900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > jQuery WeUI日历calendar时间段(开始日期默认选中日期是今天 结束日期设置最小日期

jQuery WeUI日历calendar时间段(开始日期默认选中日期是今天 结束日期设置最小日期

时间:2022-11-29 00:06:06

相关推荐

jQuery WeUI日历calendar时间段(开始日期默认选中日期是今天 结束日期设置最小日期

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日

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。