时间控件
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.dateinputer{
line-height:40px;
height:40px;
margin:10px 0;
border:1px solid #ccc;
cursor: pointer;
position:relative;
/*top:10px;*/
/*left:20px;*/
padding:0 6px;
font-size:12px !important;
}
.flex-div{
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-flow: column;
margin-left:30px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="flex-div">
<span>date 单日选择器</span>
<a id="destroy">销毁日历</a>
<div id='date' class="dateinputer">
</div>
</div>
<div class="flex-div">
<span>datetime 单日加时间选择器</span>
<div id='datetime' class="dateinputer">
</div>
</div>
<div class="flex-div">
<span>month 月选择器</span>
<div id='month' class="dateinputer">
</div>
</div>
<div class="flex-div">
<span>year 年选择器</span>
<div id='year' class="dateinputer">
</div>
</div>
<div class="flex-div">
<span>daterange 日期区间选择器</span>
<div id='daterange' class="dateinputer">
</div>
</div>
<div class="flex-div">
<span>monthrange 月区间选择器</span>
<div id='monthrange' class="dateinputer">
</div>
</div>
<div class="flex-div">
<span>yearrange 年区间选择器</span>
<div id='yearrange' class="dateinputer">
</div>
</div>
<div class="flex-div">
<span>week 周选择器</span>
<div id='week' class="dateinputer">
</div>
</div>
<div class="flex-div">
<span>multiple 多日期选择器</span>
<div id='multiple' class="dateinputer">
</div>
</div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="moment.js"></script>
<script type="text/javascript" src="xndatepicker.js"></script>
<script type="text/javascript">
$('.vbtn').on('click',function(){
console.log($('#year').val())
})
var date=new XNDatepicker($("#date"),{
// format:'YYYY-MM-DD',
type:'date',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
multipleDates:[],//当为多选日期类型时的初始值
startTime:'',
// endTime:'2036-04-04',
// minDate:'2019-04-04',
maxDate:'',
separator:' 到 ',
showType:'modal',
linkPanels:false,//面板联动
showClear:true,//是否显示清除按钮
autoConfirm:true,
showShortKeys:true,
autoFillDate:true,//自动变更element里面的值
},function(data){
console.log(data)
},)
$("#destroy").click(()=>{
date.destroy();
})
var datetime=new XNDatepicker($("#datetime"),{
// format:'YYYY-MM-DD',
type:'datetime',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
multipleDates:[],//当为多选日期类型时的初始值
startTime:'',
// endTime:'2036-04-04',
// minDate:'2019-04-04',
maxDate:'',
separator:' 到 ',
showType:'modal',
linkPanels:false,//面板联动
showClear:true,//是否显示清除按钮
autoConfirm:true,
showShortKeys:true,
autoFillDate:true,//自动变更element里面的值
},function(data){
console.log(data)
},)
var month=new XNDatepicker($("#month"),{
// format:'YYYY-MM-DD',
type:'month',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
multipleDates:[],//当为多选日期类型时的初始值
startTime:'',
// endTime:'2036-04-04',
// minDate:'2019-04-04',
maxDate:'',
separator:' 到 ',
showType:'modal',
linkPanels:false,//面板联动
showClear:true,//是否显示清除按钮
autoConfirm:true,
showShortKeys:true,
autoFillDate:true,//自动变更element里面的值
},function(data){
console.log(data)
},)
var year=new XNDatepicker($("#year"),{
format:'YYYY',
type:'year',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
multipleDates:[],//当为多选日期类型时的初始值
startTime:'',
// endTime:'2036-04-04',
// minDate:'2019-04-04',
maxDate:'',
separator:' 到 ',
showType:'modal',
linkPanels:false,//面板联动
showClear:true,//是否显示清除按钮
autoConfirm:true,
showShortKeys:true,
autoFillDate:true,//自动变更element里面的值
},function(data){
console.log(data)
},)
/* endStartOne: endStartOne||'2022-04-21',
endStartTwo: endStartTwo||'2022-12-21',
startDateOne: startDateOne||'2022-03-21',
startDateTwo: startDateTwo||'2022-05-21' */
var daterange=new XNDatepicker($("#daterange"),{
// format:'YYYY-MM-DD',
type:'daterange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
multipleDates:[],//当为多选日期类型时的初始值
startTime:'2022-04-21',
endTime:'2022-12-21',
// minDate:'2019-04-04',
maxDate:'',
separator:' 到 ',
showType:'modal',
linkPanels:false,//面板联动
showClear:true,//是否显示清除按钮
autoConfirm:true,
showShortKeys:true,
autoFillDate:true,//自动变更element里面的值
},function(data){
console.log(data)
},)
var monthrange=new XNDatepicker($("#monthrange"),{
// format:'YYYY-MM-DD',
type:'monthrange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
multipleDates:[],//当为多选日期类型时的初始值
startTime:'',
// endTime:'2036-04-04',
// minDate:'2019-04-04',
maxDate:'',
separator:' 到 ',
showType:'modal',
linkPanels:false,//面板联动
showClear:true,//是否显示清除按钮
autoConfirm:true,
showShortKeys:true,
autoFillDate:true,//自动变更element里面的值
},function(data){
console.log(data)
},)
var yearrange=new XNDatepicker($("#yearrange"),{
// format:'YYYY-MM-DD',
type:'yearrange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
multipleDates:[],//当为多选日期类型时的初始值
startTime:'',
// endTime:'2036-04-04',
// minDate:'2019-04-04',
maxDate:'',
separator:' 到 ',
showType:'modal',
linkPanels:false,//面板联动
showClear:true,//是否显示清除按钮
autoConfirm:true,
showShortKeys:true,
autoFillDate:true,//自动变更element里面的值
},function(data){
console.log(data)
},)
var week=new XNDatepicker($("#week"),{
// format:'YYYY-MM-DD',
type:'week',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
multipleDates:[],//当为多选日期类型时的初始值
startTime:'',
// endTime:'2036-04-04',
// minDate:'2019-04-04',
maxDate:'',
separator:' 到 ',
showType:'modal',
linkPanels:false,//面板联动
showClear:true,//是否显示清除按钮
autoConfirm:true,
showShortKeys:true,
autoFillDate:true,//自动变更element里面的值
},function(data){
console.log(data)
},)
var multiple=new XNDatepicker($("#multiple"),{
// format:'YYYY-MM-DD',
type:'multiple',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
multipleDates:[],//当为多选日期类型时的初始值
startTime:'',
// endTime:'2036-04-04',
minDate:'2019-04-04',
maxDate:'',
separator:' 到 ',
showType:'modal',
linkPanels:false,//面板联动
showClear:true,//是否显示清除按钮
autoConfirm:true,
showShortKeys:true,
autoFillDate:true,//自动变更element里面的值
},function(data){
console.log(data)
},)
</script>
</html>
html+css+js文件
有什么问题,请多多指教,感谢!!!