【4858美高梅】bootstrap日期时间限定插件使用分享,双日历时间段选取控件

By admin in 4858美高梅 on 2019年4月9日

引入:daterangepicker.css、daterangepicker.js、moment.js、moment.min.js

基础运用入门

展现具体时间时分秒:

【4858美高梅】bootstrap日期时间限定插件使用分享,双日历时间段选取控件。分享表明:

链接:

1 引入

双日历时间控件供给重视bootstrap、jQuery、moment 环境!
下载地址:http://www.daterangepicker.com

4858美高梅 1

那里要强调一下:注意引进的依次,因为datepicker.js的运营正视moment.js,所以肯定要保险moment.js在datepicker.js以前引进。

timePicker设置为true,//某些材料写的pickerTime不太对

  项目中要选用日期时限选取对数码实行筛选;精确到年月日
时须臾间;开始,使用了layui的岁月日期采纳插件;但是在IIE八率先次点击会报设置格式错误;商量了很久没化解,但能明确不是layui的标题;因为自身写的demo能够在IE八运营;只是在自个儿的品种环境下1些代码争论了;所以换用了bootstrap插件daterangepicker;看了累累素材;结合官网了文书档案;基本算是搞定了;把小编的总计代码分享给我们;希望对使用daterangepicker插件的初学者有赞助.

/**初始化 Daterangepicker 插件 */
function initDaterangepicker() {
    $('.daterangepicker').daterangepicker({
        "showDropdowns": true,
        "showWeekNumbers": false,
        "showISOWeekNumbers": false,
        "timePicker": true,
        "timePicker24Hour": true,
        "timePickerSeconds": false,
        "autoApply": false,
        "locale": {
            "direction": "ltr",
            "format": "YYYY-MM-DD HH:mm",
            "separator": " 至 ",
            "applyLabel": "确定",
            "cancelLabel": "取消",
            "fromLabel": "From",
            "toLabel": "To",
            "daysOfWeek": [
                "周六",
                "周一",
                "周二",
                "周三",
                "周四",
                "周五",
                "周日"
            ],
            "monthNames": [
                "一月",
                "二月",
                "三月",
                "四月",
                "五月",
                "六月",
                "七月",
                "八月",
                "九月",
                "十月",
                "十一月",
                "十二月"
            ],
            "firstDay": 1
        },
        "alwaysShowCalendars": false,
        "parentEl": "daterangepicker",
        "startDate": moment(),
        "endDate": moment(),
        "minDate": false,
        "maxDate": "05/28/2050",
        "applyClass": "btn-green btn-outline",
        "cancelClass": "btn-default btn-outline",
        "opens": "center",
        "drops": "down"
    }, function (start, end, label) {
        console.log("New date range selected: " + start.format('YYYY-MM-DD HH:mm') + " to " + end.format('YYYY-MM-DD HH:mm') + " (predefined range: " + label + ")");
        $("#startTime").val(start.format('YYYY-MM-DD HH:mm'));
        $("#endTime").val(end.format('YYYY-MM-DD HH:mm'));
    });
}
/**初始化 datetimepicker 日期 插件*/
function initDatepicker(defaultStartDate, defaultEndDate) {
    var now = new Date();
    //date + time
    var picker1 = $('.datetimepicker-startdate').datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn'),
        defaultDate: defaultStartDate,
        minDate: false,
        maxDate: false,
        ignoreReadonly: true,
        allowInputToggle: true,
        icons: {
            time: 'fa fa-clock-o',
            date: 'fa fa-calendar',
            up: 'fa fa-chevron-up',
            down: 'fa fa-chevron-down',
            previous: 'fa fa-chevron-left',
            next: 'fa fa-chevron-right',
            today: 'fa fa-crosshairs',
            clear: 'fa fa-trash'
        }
    });
    var picker2 = $('.datetimepicker-enddate').datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn'),
        defaultDate: defaultEndDate,
        minDate: defaultStartDate,
        maxDate: false,
        ignoreReadonly: true,
        allowInputToggle: true,
        icons: {
            time: 'fa fa-clock-o',
            date: 'fa fa-calendar',
            up: 'fa fa-chevron-up',
            down: 'fa fa-chevron-down',
            previous: 'fa fa-chevron-left',
            next: 'fa fa-chevron-right',
            today: 'fa fa-crosshairs',
            clear: 'fa fa-trash'
        }
    });
    //动态设置最小值  
    picker1.on('dp.change', function (e) {
        picker2.data('DateTimePicker').minDate(e.date);
    });
    //动态设置最大值  
    picker2.on('dp.change', function (e) {
        picker1.data('DateTimePicker').maxDate(e.date);
    });
}
/**初始化 datetimepicker 时间 插件*/
function initTimepicker(defaultStartTime, defaultEndTime) {
    var now = new Date();
    // only time
    var picker1 = $('.datetimepicker-starttime').datetimepicker({
        format: 'LT',
        locale: moment.locale('zh-cn'),
        defaultDate: defaultStartTime == "" ? 5 : defaultStartTime,
        minDate: false,
        maxDate: false,
        ignoreReadonly: true,
        allowInputToggle: true,
    });
    var picker2 = $('.datetimepicker-endtime').datetimepicker({
        format: 'LT',
        locale: moment.locale('zh-cn'),
        defaultDate: defaultEndTime == "" ? 21 : defaultEndTime,
        minDate: defaultStartTime,
        maxDate: false,
        ignoreReadonly: true,
        allowInputToggle: true,
    });
    //动态设置最小值  
    picker1.on('dp.change', function (e) {
        picker2.data('DateTimePicker').minDate(e.date);
    });
    //动态设置最大值  
    picker2.on('dp.change', function (e) {
        picker1.data('DateTimePicker').maxDate(e.date);
    });
}

2 容器成分

在html页面中供给创制日期控件的器皿成分。
一般是用input,例如:
<input id="datepicker" value=""/>
根据气象和体制的不等有相应的写法。

驷不及舌大坑:修改时间暗中认可显示格式,把fomat写在locale中,网上海人民广播广播台湾大学资料说一直写在daterangepicker属性中,那样是不奏效的。

  计算分为四个部分;日期范围选用达成,日期时间接选举拔,动用三个单日历完结范围采取,应用div代替input完成日期时间接选举取;上边是代码

 

3 调用

最简便易行的调用方法是:
$(“#datepicker”).daterangepicker();
当然也足以流传参数和章程。

起止时间能够安装为实际年月日也能够变动当明日子(new Date()  或许moment()【moment()方法为moment.js获取当今天子的函数】)

css 代码**

4 参数

此处差不离介绍多少个常用的参数。

{
   "autoApply": true,  // 选中后自动关闭控件窗口
    "locale":{
        "separator": " 至 “,  //开始时间与结束时间的连接符号
        "format": "YYYY-MM-DD”,  // 日期格式
        "daysOfWeek":["日","一","二","三","四","五","六”],  // 控件上的周的现实方式,也可设置成英文。
        "monthNames":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月”] // 控件上的月的现实方式,也可设置成英文。
    },
    "dateLimit": {
        "days": 90  // 时间的最大选择范围。
    },
    singleDatePicker: true, // 变成单日历控件
    ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    } // 其中moment()可以获取到当前时间。通过subtract()方法可以从当前时间推算出你想要得到的时间。
}

除外,还有别的参数,详情参见上述网址。

$(“#dateid”).daterangepicker({

      startDate: moment(),// '2013-01-01',

      maxDate:new Date(),

      endDate: moment(),//new Date(),

      dateLimit : {

        days : 30

      }, //起止时间的最大间隔

      timePicker : true, //是否显示小时和分钟

      timePickerIncrement : 1, //时间的增量,单位为分钟

      timePicker24Hour : true, //是否使用24小时制来显示时间

      locale: {//用来设置默认时间显示格式,各个按钮空间的中文显示

format: 'YYYY/MM/DD HH:mm:ss',

applyLabel: '确认',

       cancelLabel: '取消',

       fromLabel: '从',

       toLabel: '到',

       weekLabel: 'W',

       customRangeLabel: '选择时间',

       daysOfWeek:["日","一","二","三","四","五","六"],

       monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十 一月","十二月"],

}

    range: {//设置快捷区间控件,不同的时间段

      "近期": ['2015-04-12',new Date()]

    }

  }, function (start, end, label) {

    alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));

  }
    <style type="text/css">
    body,
    ul,
    p,
    h3,
    img,
    input {
        margin: 0;
        padding: 0;
    }

    .box {
        display: block;
        text-align: center;
        margin: 20px auto;
    }

    input {
        width: 400px;
        height: 40px;
    }

    label {
        display: inline-block;
        width: 90px;
        line-height: 40px;
        height: 40px;
        margin: 0;
        font-weight: normal;
        font-family: "宋体";
        background-color: #ddd;
    }
    .divDateSelect{
        width: 185px;
        height: 50px;
        line-height: 50px;
        margin:10px auto;
        border:2px solid #ddd;
        border-radius: 5px;
    }
    </style>

5 待执行函数

例如:
流传本身包装的函数,执行要达到规定的标准的作用。

function(start, end, label) {

    $('#daterangepicker').html(
        start.format('YYYY-MM-DD') + ' - ' +
        end.format('YYYY-MM-DD')
    );
    $('#beginTime').val(start.format('YYYY-MM-DD'));
    $('#endTime').val(end.format('YYYY-MM-DD'));
    // console.log(
    //     'New date range selected: ' +
    //     start.format('YYYY-MM-DD') + ' to ' +
    //     end.format('YYYY-MM-DD') +
    //     ' (predefined range: ' + label + ')');
}

上述那篇基于daterangepicker日历插件使用参数注意的题材就是作者分享给大家的全体内容了,希望能给我们3个参考,也期望大家多多扶助脚本之家。

html代码:

6 网址财富

http://www.daterangepicker.com

您或然感兴趣的稿子:

  • jQuery
    dateRangePicker插件使用办法详解
  • bootstrap
    daterangepicker双日历时间段选用控件详解
  • Bootstrap时间接选举拔器datetimepicker和daterangepicker使用实例分析
  • BootStrap daterangepicker
    双日历控件
 1     <!-- 日期时间范围选择代码 -->
 2     <div class="box">
 3         <label for="datePicker">双日历</label>
 4         <input type="text" name="datePicker" class="datePicker" id="datePicker">
 5     </div>
 6     <!-- 日期时间选择代码 -->
 7     <div class="box">
 8         <label for="singledatePicker">单日历</label>
 9         <input type="text" name="singledatePicker" class="singledatePicker" id="singledatePicker">
10     </div>
11     <!-- 两个单日历实现日期时间范围选择代码 -->
12     <div class="box">
13         <label for="from">从</label>
14         <input type="text" name="from" class="from" id="from">
15         <label for="to">到</label>
16         <input type="text" name="to" class="to" id="to">
17     </div>
18     <!-- 不使用input,用div实现代码 -->
19     <div class="divDateSelect" id="divDateSelect">
20         &nbsp;<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
21          <b class="caret"></b>
22     </div>

js 代码;遵照上下顺序对应html四有的

 1     $('input[name="datePicker"]').daterangepicker({
 2         timePicker: true, //显示时间
 3         timePicker24Hour: true, //时间制
 4         timePickerSeconds: true, //时间显示到秒
 5         startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
 6         endDate: moment(new Date()), //设置结束器日期
 7         maxDate: moment(new Date()), //设置最大日期
 8         "opens": "center",
 9         ranges: {
10             // '今天': [moment(), moment()],
11             '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
12             '上周': [moment().subtract(6, 'days'), moment()],
13             '前30天': [moment().subtract(29, 'days'), moment()],
14             '本月': [moment().startOf('month'), moment().endOf('month')],
15             '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
16         },
17         showWeekNumbers: true,
18         locale: {
19             format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
20             applyLabel: '确定', //确定按钮文本
21             cancelLabel: '取消', //取消按钮文本
22             customRangeLabel: '自定义',
23             daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
24             monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
25                 '七月', '八月', '九月', '十月', '十一月', '十二月'
26             ],
27             firstDay: 1
28         },
29     }, function(start, end, label) {
30         timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
31         console.log(timeRangeChange);
32     });

 1     $('input[name="singledatePicker"]').daterangepicker({
 2         "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
 3         singleDatePicker: true, //单日历
 4         showDropdowns: true, //年月份下拉框
 5         timePicker: true, //显示时间
 6         timePicker24Hour: true, //时间制
 7         timePickerSeconds: true, //时间显示到秒
 8         startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
 9         maxDate: moment(new Date()), //设置最大日期
10         "opens": "center",
11         showWeekNumbers: true,
12         locale: {
13             format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
14             applyLabel: '确定', //确定按钮文本
15             cancelLabel: '取消', //取消按钮文本
16             daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
17             monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
18                 '七月', '八月', '九月', '十月', '十一月', '十二月'
19             ],
20             firstDay: 1
21         },
22     }, function(start) {
23         console.log(start.format('YYYY-MM-DD HH:mm:ss'));
24     });

 1     var minDate = null;
 2     var max = null;
 3     function fromDate(maxDate) {
 4         if(!maxDate){
 5             max = moment(new Date())
 6         }else{
 7             max = maxDate;
 8         }
 9         $('input[name="from"]').daterangepicker({
10             "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
11             singleDatePicker: true, //单日历
12             showDropdowns: true, //年月份下拉框
13             timePicker: true, //显示时间
14             timePicker24Hour: true, //时间制
15             timePickerSeconds: true, //时间显示到秒
16             // startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
17             maxDate: max , //设置最大日期
18             "opens": "center",
19             showWeekNumbers: true,
20             locale: {
21                 format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
22                 applyLabel: '确定', //确定按钮文本
23                 cancelLabel: '取消', //取消按钮文本
24                 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
25                 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
26                     '七月', '八月', '九月', '十月', '十一月', '十二月'
27                 ],
28                 firstDay: 1
29             },
30         }, function(s) {
31             toDate(s);
32         });
33     }
34     fromDate()
35     function toDate(minDate) {
36         $('input[name="to"]').daterangepicker({
37             "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
38             singleDatePicker: true, //单日历
39             showDropdowns: true, //年月份下拉框
40             timePicker: true, //显示时间
41             timePicker24Hour: true, //时间制
42             timePickerSeconds: true, //时间显示到秒
43             // startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
44             maxDate: moment(new Date()), //设置最大日期
45             minDate: minDate,
46             "opens": "center",
47             showWeekNumbers: true,
48             locale: {
49                 format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
50                 applyLabel: '确定', //确定按钮文本
51                 cancelLabel: '取消', //取消按钮文本
52                 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
53                 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
54                     '七月', '八月', '九月', '十月', '十一月', '十二月'
55                 ],
56                 firstDay: 1
57             },
58         }, function(s) {
59             fromDate(s)
60         });
61     }
62     toDate();

 1     var start = moment(new Date());
 2     function cb(start) {
 3         $('#divDateSelect span').html(start.format('YYYY-MM-DD HH:mm:ss'));
 4     }
 5     $('#divDateSelect').daterangepicker({
 6         "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
 7         singleDatePicker: true, //单日历
 8         showDropdowns: true, //年月份下拉框
 9         // timePicker: true, //显示时间
10         timePicker24Hour: true, //时间制
11         timePickerSeconds: true, //时间显示到秒
12         startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
13         maxDate: moment(new Date()), //设置最大日期
14         "opens": "center",
15         showWeekNumbers: true,
16         locale: {
17             format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
18             applyLabel: '确定', //确定按钮文本
19             cancelLabel: '取消', //取消按钮文本
20             daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
21             monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
22                 '七月', '八月', '九月', '十月', '十一月', '十二月'
23             ],
24             firstDay: 1
25         },
26     }, cb);
27     cb(start);

4858美高梅,效果图:

首先片段:

4858美高梅 2

其次部分:

4858美高梅 3

其3片段就是多个第一部分组完成率先部分的效能;原理为在鲜明好起来日期后;设置采纳甘休日期日历的细微选用日期;在收尾日期选中后;设置初步日期的最公投择日期;

第伍有的:

4858美高梅 4

*  *关键抉择的含义已经在代码中注释了;引进文件css包罗bootstrap的css文件;daterangepicker的css文件;js包罗jquery的js;bootstrap的js;daterangepicker的js以及moment.js;

  备注:

  1moment.js使用了数组的indexOf()方法;但IE8不协助;须要引进包容代码;代码地址  在polyfill下;

  二在IE八下;双日历的限定采纳出现连个日历竖直排列难题;化解办法为给存放八个日历的盒子设置固定的小幅度,足以放下五个日历的div;再把五个日历的div设置float:left即可;

  3 官网地址;选项设置:
  例子:

  四 希望本文能够协理初识daterangepicker的朋友.如有错误,希望大家建议

* *

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有