日期时间范围选择插件-daterangepicker使用总结

最新推荐文章于 2024-09-22 13:53:09 发布
最新推荐文章于 2024-09-22 13:53:09 发布
阅读量1.9w 收藏 11
点赞数 3

分享说明:

　　项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layui的问题;因为自己写的demo可以在IE8运行;只是在我的项目环境下某些代码冲突了;所以换用了bootstrap插件daterangepicker;看了很多资料;结合官网了文档;基本算是搞定了;把我的总结代码分享给大家;希望对使用daterangepicker插件的初学者有帮助.

　　总结分为四个部分;日期范围选择实现,日期时间选择,使用两个单日历实现范围选择,使用div代替input实现日期时间选择;下面是代码

css 代码

    <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>

html代码:

 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         <span></span> <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);

效果图:

第一部分:

第二部分:

第三部分就是两个第二部分组实现第一部分的效果;原理为在确定好开始日期后;设置选择结束日期日历的最小选择日期;在结束日期选中后;设置开始日期的最大选择日期;

第四部分:

　　关键选项的含义已经在代码中注释了;引入文件css包括bootstrap的css文件;daterangepicker的css文件;js包括jquery的js;bootstrap的js;daterangepicker的js以及moment.js;

　　备注:

　　1 moment.js使用了数组的indexOf()方法;但IE8不支持;需要引入兼容代码;代码地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf　　在polyfill下;

　　2 在IE8下;双日历的范围选择出现连个日历竖直排列问题;解决方法为给存放两个日历的盒子设置固定的宽度,足以放下两个日历的div;再把两个日历的div设置float:left即可;

　　3 官网地址;选项设置: http://www.daterangepicker.com/#options　　例子: http://www.daterangepicker.com/#examples

　　4 希望本文能够帮助初识daterangepicker的朋友.

 

---恢复内容结束---

分享说明:

　　项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layui的问题;因为自己写的demo可以在IE8运行;只是在我的项目环境下某些代码冲突了;所以换用了bootstrap插件daterangepicker;看了很多资料;结合官网了文档;基本算是搞定了;把我的总结代码分享给大家;希望对使用daterangepicker插件的初学者有帮助.

　　总结分为四个部分;日期范围选择实现,日期时间选择,使用两个单日历实现范围选择,使用div代替input实现日期时间选择;下面是代码

css 代码

    <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>

html代码:

 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         <span></span> <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);

效果图:

第一部分:

第二部分:

第三部分就是两个第二部分组实现第一部分的效果;原理为在确定好开始日期后;设置选择结束日期日历的最小选择日期;在结束日期选中后;设置开始日期的最大选择日期;

第四部分:

　　关键选项的含义已经在代码中注释了;引入文件css包括bootstrap的css文件;daterangepicker的css文件;js包括jquery的js;bootstrap的js;daterangepicker的js以及moment.js;

　　备注:

　　1 moment.js使用了数组的indexOf()方法;但IE8不支持;需要引入兼容代码;代码地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf　　在polyfill下;

　　2 在IE8下;双日历的范围选择出现连个日历竖直排列问题;解决方法为给存放两个日历的盒子设置固定的宽度,足以放下两个日历的div;再把两个日历的div设置float:left即可;

　　3 官网地址;选项设置: http://www.daterangepicker.com/#options　　例子: http://www.daterangepicker.com/#examples

　　4 希望本文能够帮助初识daterangepicker的朋友.如有错误,希望大家指出

 
ggabcda
关注
PHP日历如何写
10-18
创建三个表单字段，以用来先择 月份/日期/年份
推荐一款高效易用的日期范围选择器 - Date Range Picker
gitblog_00036的博客
05-30 372
推荐一款高效易用的日期范围选择器 - Date Range Picker 项目地址:https://gitcode.com/gh_mirrors/da/date_range_picker 在开发移动应用时，日期选择功能是不可或缺的一部分。Flutter社区中有一款强大的开源库——Date Range Picker，它为你的Flutter应用提供了优雅而直观的日期和时间范围选择体验。本文将详细介绍这...
设计年份和月份选择的时间控件
最新发布
weixin_42515340的博客
09-22 1326
本文还有配套的精品资源，点击获取 简介：开发过程中可能需要特定的用户界面组件，如时间选择器。针对只需选择年份和月份的场景，特定插件或自定义解决方案可以帮助用户简化操作。传统UI框架提供的日期选择器通常包含完整的日期范围，修改为仅显示年份和月份往往需要深入定制。有一个现成的解决方案能快速集成，避免繁琐的定制过程，提高开发效率和用户体验。压缩包中的文件可能是这种年月选择器插件的...
bootstrap中日历范围选择插件daterangepicker的使用详解
09-06 1359
setStartDate(Date 对象, moment 对象或者string类型): 设置日期范围选择器中当前选择的开始日期为提供的日期 setEndDate(Date 对象, moment 对象或者string类型): 设置日期范围选择器中当前选择的结束日期为提供的日期。monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],选择两个日期或预定义范围时，会自动应用新的日期范围。
bootstrap的daterangepicker日期区间选择器
阿毛的博客
01-16 2657
项目里面要能自定义的双区间时间选择器，网上下载的有单区间，有双区间的，但是双区间的只能在两个月以内选择时间段，好不容易在csdn上找到了有年月切换的，怎奈我没有c币，我就从其他渠道买了一个，分享给大家哈哈（我算不算拆台==） daterangepicker.js可以自定义，有单区间，有双区间的（无年月选择） 具体使用大家可以参考https://www.jb51.net/article/1236...
bootstrap之双日历时间段选择控件Date Range Picker
qq_43685640的博客
01-18 488
bootstrap之双日历时间段选择控件Date Range Picker
时间格式显示效果(singleDatePicker)
苏_苏(sunny)
08-20 1160
今天在项目中看到这样的写法自己不是很理解效果是怎么做出来的，故百度了一下，感觉说的很好分享一下。 链接：http://www.daterangepicker.com/
日期时间范围选择插件:daterangepicker使用总结(必看篇)
12-11
项目中要使用日期时间范围选择对数据进行筛选；精确到年月日 时分秒；起初,使用了layui的时间日期选择插件；但是在IIE8第一次点击会报设置格式错误；研究了很久没解决，但能确定不是layui的问题；因为自己写的demo...
bootstrap时间插件daterangepicker使用详解
11-29
总结来说，Bootstrap时间插件daterangepicker是为用户提供日期范围选择的优秀工具，通过灵活的配置和丰富的功能，能满足各种界面交互的需求。通过合理地设置各项参数，你可以轻松地将daterangepicker集成到你的项目...
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
09-01
总结来说，datetimepicker适合需要单个日期或时间选择的场景，而daterangepicker则适用于需要选取日期范围的场合。两者都依赖于Moment.js库，提供灵活的配置和丰富的功能，可以满足大多数Web应用的日期和时间选择...
bootstrap 时间插件 daterangepicker 4.0 添加清空按钮
09-04
Bootstrap时间插件daterangepicker是前端开发中常用的组件，主要用于选取日期范围。在版本4.0及以上，这个插件提供了一种优雅的方式来展示和选择日期区间，同时满足了用户对交互性和自定义的需求。本篇文章将深入...
【踩坑】vite项目使用ant＜a-date-picker /＞提示报错 rr.isMoment is not a function 解决方法
Jinkerr的博客
05-07 958
vite项目使用ant的提示报错 rr.isMoment is not a function 解决方法
antd——a-date-picker——日期的限制功能——js基础积累
yehaocheng520的博客
01-04 1697
antd——a-date-picker——日期的限制功能——js基础积累
fastadmin页面日期时间组件的调用
chengxuyuan8的博客
07-10 5378
第一步 html <div class="form-group col-lg-3"> <div class="input-group form_datetime"> <span class="input-group-addon">收集时间:</span> <input class="form-control datetimepicker" data-date-format="YYYY-MM-DD
a-date-picker报错TypeError: date4.locale is not a function
小权权的博客
08-03 5388
使用日期选择器，数据从后端获得，再赋值给a-date-picker做数据回显，遇到这个报错，排错后定位到a-date-picker组件本身接收数据的问题。经过尝试，不对时间字符串进行格式化，直接使用dayjs处理后传给a-date-picker后报错消失。如果使用了dayjs或moment库来处理时间字符串，并且使用.format对时间数据进行格式化，则会报这个错误。在此记录如有同学遇到，望不吝赐教。
FastAdmin日期选择控件的使用
热门推荐
安迪夫的博客
01-04 1万+
Fastadmin的日期选择插件介绍。
fastadmin添加自定义页面，实现7天，1月，1年，以及指定时间查询显示表格
天龙的博客
01-26 1332
fastadmin添加自定义页面，实现7天，1月，1年，以及指定时间查询显示表格
jquery双日历插件daterangepicker.js设置成单日历
Cooky的博客
12-06 7124
只需要在初始化的时候设置参数singleDatePicker为true$('.start-time',$currentTab).daterangepicker({ singleDatePicker: true,//设置成单日历 }, function(start, end, label) { $scope.start_time = st
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值