jQuery WeUI官网: (国内)
说明
日历calendar时间段为两段,开始日期和结束日期。
开始日期:打开后,默认选中日期是今天。
结束日期:打开后,默认选中和最小日期是开始日期。
html
<div class="weui-cell__bd"><input class="weui-input" id="start_datetime" type="text"style="border: 0;width: 7rem;padding: 0 0 0 .3rem;" placeholder="请选择开始日期" readonly /><span class="split">-</span><input class="weui-input" id="end_datetime" type="text"style="border: 0;width: 5rem;padding: 0 0 0 .3rem;" placeholder="结束日期" readonly /></div>
jQuery
// ----获取今天日期,格式是: yyyy-mm-dd ----function formatDate(date) {var y = date.getFullYear();var m = date.getMonth() + 1;m = m < 10 ? '0' + m : m;var d = date.getDate();d = d < 10 ? ('0' + d) : d;return y + '-' + m + '-' + d;}// 初始化[开始时间]$("#start_datetime").calendar({// maxDate: [formatDate(new Date())], //设置今天日期为可选最大日期value: [formatDate(new Date())], //设置默认选中日期是今天dateFormat: 'yyyy年mm月dd日', //设置日期格式onChange: function (p, values, displayValues) {if (!isInit) {// 判断结束日期是否初始化$("#reception_datetime").calendar("destroy"); //每次点击先销毁isInit = true; //结束日期未初始化,需要初始化}}});// 初始化 [结束时间]var isInit = true; //未初始化$("#end_datetime").click(function () {// ----正则表达式 yyyy年dd月mm日 转换 yyyy-dd-mm ----var startData= $("#start_datetime").val();var reg = /(\d{4})\年(\d{2})\月(\d{2})日/;var start = startData.replace(reg, "$1-$2-$3");if (isInit) {var startDate = new Date(start);const preDate = new Date(startDate.getTime() - 24 * 60 * 60 * 1000); //前一天const preDate_format = formatDate(preDate);$("#end_datetime").calendar({//结束日期初始化minDate: [preDate_format], //设置最小可选日期的【前一天】value: [start], //设置默认选中日期dateFormat: 'mm月dd日' //设置日期格式});$("#end_datetime").calendar("open"); //直接打开[结束时间],显示日期都是NaN,重新初始化后选择[开始时间]数据正常isInit = false; //已初始化}});
效果图
直接选择结束日期:
正确选择:
jQuery WeUI日历calendar时间段(开始日期默认选中日期是今天 结束日期设置最小日期) 显示日期格式是yyyy年mm月dd日