您现在的位置是：技术博客 > 前端前端

日期插件Datetimepicker

Lucas2020-12-05 15:28【代码】592人已围观

简介datetimepicker是Bootstrap的一个时间组件,使用很方便,用于选择日期范围的JavaScript组件，设计用于Bootstrap CSS框架。

这款插件在web后台使用率很高，<a href="https://www.bootcss.com/p/bootstrap-datetimepicker/index.htm" target='_blank'>官网</a>有文档，想看更多的配置用法，一定得看官方文档。当然网上也有各种教程，但总感觉不够直接，不够实用。我这里整理了一份案例代码，效果图中的大概涵盖了基本常用的场景。

#### 直接先看效果图
![daterangepicker](/upload/article/image/f8/datetimepicker.png "daterangepicker")
#### 实现代码如下
```
<!DOCTYPE html>
<html>
<head>
    <title>datetimepicker</title>
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css"/>
    
    <link rel="stylesheet" type="text/css" href="./bootstrap-datetimepicker.css"/>
    <script type="text/javascript" src="./bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="./bootstrap-datetimepicker.zh-CN.js"></script>
</head>
<body style="margin: 20px 0">
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label for="startDate">选择年</label>
                <input type="text" class="form-control" id="SingleYear" value="">
            </div>
            <div class="form-group">
                <label for="startDate">选择月（年月）</label>
                <input type="text" class="form-control" id="SingleMonth" value="">
            </div>
            <div class="form-group">
                <label for="startDate">选择日（年月日）</label>
                <input type="text" class="form-control" id="SingleDate2" value="">
            </div>
            <div class="form-group">
                <label for="startDate">选择某天的某时间（年月日时分）</label>
                <input type="text" class="form-control" id="SingleTime2" value="">
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

// 单日期选择年份，如：2020
    $("#SingleYear").datetimepicker({
        format: 'yyyy',
        startView: 'decade',
        minView: 'decade',
        language: 'zh-CN',
        autoclose: true
    }).on('changeDate', function (ev) {
        var search_year = $("#SingleYear").val();
        $("#SingleYear").datetimepicker('hide');
    });

// 单日期选择年月，如：2020-01
    $("#SingleMonth").datetimepicker({
        format: 'yyyy-mm',
        startView: 'decade',
        minView: 'year',
        language: 'zh-CN',
        autoclose: true
    }).on('changeDate', function (ev) {
        var SingleMonth = $("#SingleMonth").val();
        $("#SingleMonth").datetimepicker('hide');
    });

// 单日期选择，如：2020-01-01
    $('#SingleDate2').datetimepicker({
        format: 'yyyy-mm-dd', //年-月-日
        todayHighlight: true,
        language: 'zh-CN',
        pickerPosition: 'bottom-right', // bottom-right,bottom-left,top-right,top-left
        // initialDate: new Date(),
        startDate: new Date(), // 起始日期
        endDate: '2022-01-01', // 结束日期
        initialDate: '2020-12-09', // 初始化日期
        daysOfWeekDisabled: '1,5', // 一周禁用的日期，0-6表示星期日-星期六
        minView: 2, // 最精确时间，0选时分，1选时，2选天，3选月，4选年
        todayBtn: true,
    });

// 单日期选择，如：2020-01-01 10:20
    $('#SingleTime2').datetimepicker({
        format: 'yyyy-mm-dd hh:ii', //年-月-日（不支持到秒）
        todayHighlight: true,
        language: 'zh-CN',
        minuteStep: 1, // 步进值，分钟为单位
        initialDate: new Date(),
        // startDate:new Date(), // 起始日期
        endDate: '2022-01-01', // 结束日期
        daysOfWeekDisabled: '1,5', // 一周禁用的日期，0-6表示星期日-星期六
        // minView: 2, // 最精确时间，0选时分，1选时，2选天，3选月，4选年
        todayBtn: true,
    });

</script>
</html>
```

#### 参数配置
```
// 显示日期时间选择器。
$('#datetimepicker').datetimepicker('show');
// 给日期时间选择器设置一个新的起始日期。
$('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');
changeDate
// show事件，当选择器显示时被触发。
// hide事件，当选择器隐藏时被触发。
// changeDate事件，当日期被改变时被触发。
$('#date-end').datetimepicker().on('changeDate', function(ev){
    if (ev.date.valueOf() < date-start-display.valueOf()){
        ....
    }
});
```

很赞哦！ ( 0 )

上一篇：日期插件Daterangepicker

下一篇：jquery选择器案例大全