daterangepicker的个性化使用技巧
由于该模板不自动将时间戳添加到input中去,始终为NaN,所以,自己选取起始时间与截止时间
var startTime =new Date(new Date().toLocaleDateString()).getTime()/1000;
var endTime = new Date(new Date().toLocaleDateString()).getTime()/1000+(24 * 60 * 60) - 1;
1 datelist = {} //自己创建或者从后台获取 格式为 (yyyy-MM-dd) 2 //日历 3 $('.date-picker').daterangepicker({ 4 showDropdowns:true,
timePicker: true, //显示时钟
maxDate: moment(new Date()), //设置最大可选日期 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>
ps:关注一下本人公众号,每周都有新更新哦!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库