My97日期插件实现日期多选

最新推荐文章于 2025-05-26 11:51:47 发布

lw-留下的兵

最新推荐文章于 2025-05-26 11:51:47 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： My97日期插件

本文链接：https://blog.youkuaiyun.com/sinat_37356064/article/details/78057266

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JS修改My97日期插件属性，实现日期多选功能。通过对WdatePicker组件的onpicked和oncleared事件进行自定义处理，可以实现在一个输入框内展示多个已选日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

-##一、story

项目中一个查询页面的日期输入框需要实现多选，日期插件用的是My97，由于原始的My97不支持日期多选，只能选用其他日期插件或对My97进行改造，下面介绍下用js修改My97的属性来实现多选

二、js修改My97属性

基本思路都在注释中，主要是修改WdatePicker的两个属性onpicked和oncleared；

html部分

    <td class="form_text" width="470px">日期:
    <!-- 展示所选日期的input框 -->
    <input id="paramDate" name="paramDate" size="17" style="height:20px;font-size:14px;" readonly />
    <!-- 隐藏的和日期选择插件绑定的input框 -->
    <input id="paramDate_hide" type="hidden" />
    <!-- 日期图标，点击图标展示日期选择插件 -->
    <img id="f_trigger_a" class="trigger" src="<c:url value='/images/calen_pic.gif'/>" 
    width="20" align="middle" style="margin-top:-9px;" onclick="showWdatePicker()" />
    <!-- 记录所选日期的个数 -->
    <span id="selectNumber" class="form_text"></span>
    </td>

js部分

    //引入My97插件的js
    <script type="text/javascript" src="<c:url value='/script/My97DatePicker/WdatePicker.js'/>"></script>

    //修改WdatePicker的属性
    var datesArray = new Array();//存放所选日期的数组
    var datesString = "";//日期字符串
    function showWdatePicker(){
    WdatePicker({
        el:'paramDate_hime',
        dateFmt:'yyyy-MM',
        onpicked:function(){//选择日期之后需要执行的自定义函数
            //过滤重复选择的日期 this.value即为当前所选日期，也可 
            //以通过jQuery获取($("#paramDate_hide").val())
            for(var index in datesArray){
                if(datesArray[index] == this.value){
                    return;
                }
            }
            //将得到的日期放入数组
            datesArray.push(this.value);
            //多选的日期之间用逗号分隔，每次选择的日期放在最前面
            if(datesArray.length == 1){ 
                datesString = this.value;
            } else { 
                datesString = this.value +","+ datesString
            }
            //展示日期的input框长度自适应 默认20 最大48
            if(datesString.length > 20 && datesString.length < 48){ 
                document.getElementById("paramDate").size = datesString.length - 2;
            }
            //展示多选的日期
            $("#paramDate").val(datesString);
            //显示所选日期的个数
            $("#selectNumber").html("已选:" + datesArray.length + "个");
        },
        oncleared:function(){//点击清空按钮后需要执行的自定义函数
            //清空展示日期的input框
            $("#paramDate").val("");
            //清空存放日期的数组
            datesArray = [];
            //清空日期字符串
            datesString = "";
            //恢复展示日期的input框的默认长度
            document.getElementById("paramDate").size = 17;
            //清空显示个数的<span>快
            $("#selectNumber").html("");
        }
    });
    }

效果图

这里写图片描述