js WdatePicker 日期控件监听值变化

最新推荐文章于 2026-05-14 06:51:17 发布

原创最新推荐文章于 2026-05-14 06:51:17 发布 · 1.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个基于HTML、JavaScript实现的日期选择器与任务下拉框的联动功能。通过设置特定的日期范围和选择院区，可以动态更新任务列表。涉及的技术包括前端的HTML元素操作、JavaScript的事件监听及Ajax数据请求。

1，需求

在这里插入图片描述

2，html


 <div class=" form-group" style="display: inline;height:29px;">
    <label>年月</label>
    <input id="cbstartdate" name="cbstartdate" style="width: 90px;height: 25px"
           class="Wdate wdate_input" readonly="readonly"
           onFocus="WdatePicker({isShowClear:false,dateFmt: 'yyyy-MM',onpicked:refrashTask})" ></input>至
    <input id="cbenddate" name="cbenddate" style="width: 90px;height: 25px"
           class="Wdate wdate_input" readonly="readonly"
           onFocus="WdatePicker({isShowClear:false,dateFmt: 'yyyy-MM',onpicked:refrashTask})" ></input>
</div>
//院区下拉值后台传过来
<div class=" form-group">
    <label style="margin-left: 10px;">院区 </label>
    <select name="courtyard" id="courtyard" style="width: 120px; height: 25px;" data-options="multiple:false" onchange="refrashTask()">
        <c:forEach items="${list2}" var="y" varStatus="status">
            <option value="${y.code}">${y.name}</option>
        </c:forEach>
    </select>
</div>

<label style="margin-left: 10px;" >任务</label>
<select name="taskcode" id="taskcode"  style="width: 240px;height: 25px" >
    <option value=""></option>
</select>
<button type="button" class="layui-btn layui-btn-xs buttonclass" style="margin-left: 10px" onclick="searchBtn()">查询</button>

3，js代码


 function refrashTask() {
        // alert("yes")
       var postdata ={
           courtyard:$("#courtyard").val(),
           cbstartdate:$("#cbstartdate").val(),
           cbenddate:$("#cbenddate").val()
       }
       $.post("/**/gettask",postdata,function(data){
           if (data.success) {
               var list= data.tasklist;
               var nr= '<option value=""></option>';
               if(list){
                   for(var i = 0; i < list.length; i++) {
                       if((list[i].id=='${taskcode}'&&'${taskcode}'!='')||(i==0&&'${taskcode}'=='') ){
                           nr += "<option selected value='" + list[i].id + "'>" + list[i].taskname + "</option>"
                       }else{
                           nr += "<option value='" + list[i].id + "'>" + list[i].taskname + "</option>"
                       }
                   };
               }
               $("#taskcode").html(nr);
           }
       },true);
    }