jQuery WeUI日历calendar时间段（开始日期默认选中日期是今天，结束日期设置最小日期），显示日期格式是yyyy年mm月dd日

最新推荐文章于 2022-10-11 11:50:33 发布

vicky_yongqi

最新推荐文章于 2022-10-11 11:50:33 发布

阅读量2.8k

点赞数 2

分类专栏：随笔文章标签： jquery

本文链接：https://blog.csdn.net/vicky_yongqi/article/details/109536175

版权

随笔专栏收录该内容

7 篇文章 2 订阅

订阅专栏

jQuery WeUI官网： https://jqweui.cn(国内)

说明

日历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; //已初始化
                    }

                });