网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款JavaScript时间日期选择插件,以弹框或内联方式选择日期,日期范围。3种主题风格,支持设置最小/最大日期,禁用日期,自定义日期格式。
1.在页面中加载js时间日期选择插件主题样式文件。
<link rel="stylesheet" href="./dist/duDatepicker.min.css" />
<link rel="stylesheet" href="./dist/duDatepicker-theme.css" />
2.在页面尾部加载js时间日期选择插件js文件。
<script src="./dist/duDatepicker.min.js"></script>
3. 插件初始化。
<input type="text" id="datepicker" />
duDatepicker('#datepicker',{
// options here
});
4. 也可以将日期范围选择器拆分为两个输入字段。
<input type="text" id="daterange" />
<input type="text" id="range-from" />
<input type="text" id="range-to" />
或者通过js设置
duDatepicker('#daterange',{
range: true,
fromTarget: '#range-from',
toTarget: '#range-to'
});
5. 设置允许选择的最小/最大日期。
<input type="text" id="datepicker" data-mindate="1/1/2000" data-maxdate="9/18/2020" />
或者通过js设置
duDatepicker('#datepicker',{
maxDate: 'today'
});
6. 选择日期选择器主题。
<input type="text" id="datepicker"
data-theme="myTheme" />
或者通过js设置
duDatepicker('#datepicker',{
theme: 'myTheme'
});
7. 自定义一个新的主题样式:
.dudp__wrapper[data-theme='dark'] .dudp__calendar-header {
background-color: #121212;
}
.dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date {
color: rgba(255, 255, 255, 0.87);
}
.dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.current {
color: #1976d2;
}
.dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.in-range, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-from, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-to {
background-color: rgba(25, 118, 210, 0.2);
}
.dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.selected:before, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-from:before, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-to:before {
background-color: #1976d2;
}
.dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.selected:hover:before, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-from:hover:before, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-to:hover:before {
background-color: #0d47a1;
}
.dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.disabled {
color: rgba(255, 255, 255, 0.38);
}
.dudp__wrapper[data-theme='dark'] .dudp__cal-container,
.dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__years-view {
background-color: #1D1D1D;
}
.dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__btn-cal-prev,
.dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__btn-cal-next,
.dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-month-year,
.dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__weekdays span,
.dudp__wrapper[data-theme='dark'] .dudp__months-view .dudp__month:not(.selected),
.dudp__wrapper[data-theme='dark'] .dudp__years-view .dudp__year:not(.selected),
.dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__pm,
.dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__nm {
color: rgba(255, 255, 255, 0.6);
}
.dudp__wrapper[data-theme='dark'] .dudp__buttons .dudp__button,
.dudp__wrapper[data-theme='dark'] .dudp__months-view .dudp__month.selected,
.dudp__wrapper[data-theme='dark'] .dudp__years-view .dudp__year.selected {
color: #0d47a1;
}
.dudp__wrapper[data-theme='dark'] .dudp__buttons .dudp__button.clear {
color: #ef5350 !important;
}
.dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__btn-cal-prev:hover,
.dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__btn-cal-next:hover,
.dudp__wrapper[data-theme='dark'] .dudp__buttons .dudp__button:hover,
.dudp__wrapper[data-theme='dark'] .dudp__months-view .dudp__month:hover,
.dudp__wrapper[data-theme='dark'] .dudp__years-view .dudp__year:hover,
.dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date:not(.disabled):not(.selected):not(.range-from):not(.range-to):hover:before {
background-color: rgba(255, 255, 255, 0.04);
}
.dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__btn-cal-prev:active,
.dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__btn-cal-next:active,
.dudp__wrapper[data-theme='dark'] .dudp__buttons .dudp__button:active,
.dudp__wrapper[data-theme='dark'] .dudp__months-view .dudp__month:active,
.dudp__wrapper[data-theme='dark'] .dudp__years-view .dudp__year:active,
.dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date:not(.disabled):not(.selected):not(.range-from):not(.range-to):active:before {
background-color: rgba(255, 255, 255, 0.1);
}
8. 插件默认配置选项。
{
// customize date format here
format: 'mm/dd/yyyy',
// output date format
outFormat: null
// theme name
theme: 'blue',
// auto pick the date on click
auto: false,
// shows a Clear button in the date picker
clearBtn: false,
// shows a Cancel button in the date picker
cancelBtn: false,
// closes the date picker on click outside
overlayClose: true,
// an array of disabled dates
// i.e. ['10/30/2018', '11/01/2020-11/15/2020']
disabledDates: [],
// an array of disabled days
// i.e. Monday, Tuesday, Mon, Tue, Mo, Tu
disabledDays: [],
// enable date range picker
range: false,
// delimiter between dates
rangeDelim: '-',
// event handles
events: {
dateChanged: function (data) {
console.log('From: ' + data.dateFrom + '\nTo: ' + data.dateTo)
},
onRangeFormat: function (from, to) {
// do something
},
ready: null,
shown: null,
hidden: null
}
}
9 API 方法。
// set date
duDatepicker('#datepicker', 'setValue', '08/01/2020');
// set date range
duDatepicker('#daterange', 'setValue', '08/01/2020-08/05/2020');
// show
duDatepicker('#datepicker', 'show');
// hide
duDatepicker('#datepicker', 'hide');
// destroy
duDatepicker('#datepicker', 'destroy');
转载请注明来源:js时间日期选择插件
本文永久链接地址:https://www.moyouyouw.cn/code/917.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
上一篇
下一篇
已有 位小伙伴发表了看法
欢迎 你 发表评论