datetimepicker双日历控件及其参数配置

程序员文章站 2022-06-09 14:39:50

...

先看一下一个简单的区间时间区域选择的实现：

需要引入的css

<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">

引入的js

    <script src="../plugins/jQuery/jquery-1.12.4.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/daterangepicker/moment.min.js"></script>
    <script src="../plugins/daterangepicker/daterangepicker.js"></script>

完整的代码：

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
    <meta charset="UTF-8" />
    <title>A date range picker for Bootstrap</title>

    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
    <script src="../plugins/jQuery/jquery-1.12.4.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/daterangepicker/moment.min.js"></script>
    <script src="../plugins/daterangepicker/daterangepicker.js"></script>
</head>
<body style="margin: 60px 0">
<div class="row">
    <div class="col-md-4 col-md-offset-2 demo">
        <h4>Your Date Range Picker</h4>
        <input type="text" id="config-demo" class="form-control">
        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
    </div>
</div>
<style type="text/css">
    .demo {
        position: relative;
    }

    .demo i {
        position: absolute;
        bottom: 10px;
        right: 24px;
        top: auto;
        cursor: pointer;
    }
</style>

<script type="text/javascript">
    var beginTimeStore = '';
    var endTimeStore = '';
    $('#config-demo').daterangepicker({
        "timePicker": true,
        "timePicker24Hour": true,
        "linkedCalendars": false,
        "autoUpdateInput": false,
        "locale": {
            format: 'YYYY-MM-DD',
            separator: ' ~ ',
            applyLabel: "应用",
            cancelLabel: "取消",
            resetLabel: "重置",
        }
    }, function(start, end, label) {
        beginTimeStore = start;
        endTimeStore = end;
        console.log(this.startDate.format(this.locale.format));
        console.log(this.endDate.format(this.locale.format));
        if(!this.startDate){
            this.element.val('');
        }else{
            this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
        }
    });
</script>
</body>
</html>

下面是参数配置

参数	格式	示例	含义
startDate	MM/DD/YYYY	“startDate”:”10/14/2017”	设置默认的开始日期
endDate	MM/DD/YYYY	“endDate”:”10/22/2017”	设置默认的结束日期
minDate	MM/DD/YYYY	“minDate”:”10/14/1995”	设置最小可用日期
maxDate	MM/DD/YYYY	“maxDate”:”10/14/2017”	设置最大可用日期
autoApply	true/false	默认值：false	不用点击Apply或者应用按钮就可以直接取得选中的日期
singleDatePicker	true/false	默认值：false	设置为单个的datepicker，而不是有区间的datepicker
singleDatePicker	true/false	默认值：false	设置为单个的datepicker，而不是有区间的datepicker
showDropdowns	true/false	默认值：false	当设置值为true的时候，允许年份和月份通过下拉框的形式选择
timePicker	true/false	默认值：false	可选中时分
timePicker24Hour	true/false	默认值：false	设置小时为24小时制
timePickerSeconds	true/false	默认值：false	可选中秒
opens	可选值：right left center	默认值：center	设置datepicker面板防止的位置：左边、右边或者中间
drops	可选值：down up	默认值：down	设置面板防止的位置：input输入框上面或者input输入框下面
locale			本地配置
locale.applyLabel			确认按钮文字
locale.cancelLabel			取消按钮文字
locale.format			格式