时间控件
<!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/yearrangemultipleDates:[],//当为多选日期类型时的初始值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/yearrangemultipleDates:[],//当为多选日期类型时的初始值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/yearrangemultipleDates:[],//当为多选日期类型时的初始值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/yearrangemultipleDates:[],//当为多选日期类型时的初始值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/yearrangemultipleDates:[],//当为多选日期类型时的初始值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/yearrangemultipleDates:[],//当为多选日期类型时的初始值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/yearrangemultipleDates:[],//当为多选日期类型时的初始值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/yearrangemultipleDates:[],//当为多选日期类型时的初始值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/yearrangemultipleDates:[],//当为多选日期类型时的初始值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文件
下载地址
转自jquery插件库
有什么问题，请多多指教，感谢！！！
