mydatepicker97复选日期功能实现

Demon丶冷漠

于 2019-05-28 09:49:51 发布

阅读量548

点赞数 2

分类专栏： JS前端技术文章标签： mydatepicker97 mydatepicker97 日期复选 js日期复选日期复选

本文链接：https://blog.csdn.net/u014135369/article/details/90633170

版权

JS前端技术专栏收录该内容

10 篇文章 0 订阅

订阅专栏

近日在做一个需求，需要日期可以复选，翻了些许资料，发现mydatepicker97并不支持复选，想要支持复选，需要自己重写一些方法，其实实现的原理也很简单，代码很简单，一看便知。以下代码本人以亲自实验，没有问题。欢迎大家批评指正哈！！！！！

js代码如下：

//日期控制事件 
function chooseDate() {
    var nowDate = $("#billMonthHide").val();//新选的日期
    var oldDate = $("#billMonth").val();//新日期之前已选择的日期
    if (isNull(oldDate)) {
        oldDate += nowDate;
    } else {
        //去除已经拼接的日期，去重的作用
        if (oldDate.indexOf(nowDate) < 0) {
            oldDate = oldDate + "," + nowDate;
        }
    }
    $("#billMonth").val(oldDate);
    $("#billMonthHide").val("");
}
//日期清除功能
function clearDate() {
    $("#billMonth").val("");
}

html代码如下：

   <input name="billMonth" id="billMonth" type="text" readonly="true" maxlength="1000" style="width:320px;" value="${invoiceApplyBaseinfo.billMonth}" class="required" /> 
   <input id="billMonthHide" class="Wdate" style="width:30px;border: none;" onclick="WdatePicker({dateFmt:'yyyy-MM',isShowClear:true,onpicked:chooseDate,onclearing:clearDate});" />

到此，复选的功能就实现了，但是样式不是很好看，但是功能倒是满足了，界面如下：