daterangepicker的个性化使用技巧

Posted guoxiaoyu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了daterangepicker的个性化使用技巧相关的知识,希望对你有一定的参考价值。

 1 datelist = {}  //自己创建或者从后台获取 格式为 (yyyy-MM-dd)
 2 //日历
 3     $(‘.date-picker‘).daterangepicker({
 4         showDropdowns:true,
 5         isCustomDate:function( date ) { //看需求是否需要对样式进行修改
 6             for(var i=0;i<datelist.length;i++){
 7                 if(date.format(‘YYYY-MM-DD‘) == datelist[i]){
 8                     return "in-range";    //有数据的返回浅蓝颜色  active为深蓝
 9                 }
10             }
11             return "disabled";  //没有数据不可选 自己不想也可以return false
12         },
13       //用来设置默认时间显示格式,各个按钮空间的中文显示
14         locale: {
15            format:‘YYYY/MM/DD‘,
16            applyLabel:‘确认‘,
17            cancelLabel:‘取消‘,
18            fromLabel:‘从‘,
19            toLabel:‘到‘,
20            weekLabel:‘W‘,
21            customRangeLabel:‘选择时间‘,
22            daysOfWeek:["日","一","二","三","四","五","六"],
23            monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十 一月","十二月"] 
24             }
25     }, function(start, end, label) {
26         startTime=start.unix();
27         endTime = end.unix();
28          });

我主要进行对日期数据进行查看使用,有数据的显示颜色、没有数据可以不选

更多可以查看官方网站:http://www.daterangepicker.com/#examples

1     里面需要用的是哪个包下载下来引入就行了
2 <link rel="stylesheet" href="daterangepicker.css" />
3     <script src="/moment.min.js"></script>
4     <script src="daterangepicker.js"></script> 

 

以上是关于daterangepicker的个性化使用技巧的主要内容,如果未能解决你的问题,请参考以下文章

TypeError: $(...).daterangepicker 不是函数

如何使用bootstrap的daterangepicker插件

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

DateRangePicker显示错误的日期或未应用所选日期

如何使用bootstrap的daterangepicker插件

JQuery Daterangepicker onchange 事件