My97DatePicker 日历控件使用,两个日历控件联动.

来源:互联网 发布:华中大数据交易所 编辑:程序博客网 时间:2024/06/05 09:38

关于插件需要的文件可以去http://www.my97.net/down.asp下载,关于此插件的使用方法以及文档等也可以在此链接下查看,这里主要记录了两个日历控件联动的方法(比如 yy-mm-dd 至 yy-mm-dd).

注意:下载完之后不要改变其中的目录结构,否则会导致某些文件无法找到.

插件的使用相信你已经在官网上看的很清楚了,官网的描述要比我详细的多.
一下是两个日历控件:

<div id="" class=" fl">            <input type="text" id="startDate" class="timeFrom fl">                <span id="startSpan" onclick="WdatePicker({el:'startDate',dateFmt:'yyyy-M-d ',maxDate:'%y-%M-%d '})" class="timeIco fr bgimage"></span>            </input>        </div>        <div id="" class=" fl">            <input type="text" id="endDate" class="timeFrom fl" onchange="endDateChanged()">                <span onclick="WdatePicker({el:'endDate',dateFmt:'yyyy-M-d ',maxDate:'%y-%M-%d ',minDate:'#F{$dp.$D(\'startDate\')}'})" class="timeIco fr bgimage"></span>            </input>        </div>

以上代码中maxDate和minDate属性分别用来设置可以选择的最大的日期和最小的日期,这里我们要完成的是让后者的日期永远不能选择为比前一个小,前一个则不能比后一个大.初始化的时候默认两个日历控件的日期都是未选中的.默认两者最大都为当前日期.前者最小暂时不设定,后者设定为不能小于前者,当前者未选择时,后者则不限制, 当前者的日期改变后则应该设置后者的最小日期,此处用js来设置:

$("#startSpan").attr("onclick", WdatePicker({el:'startDate',dateFmt:'yyyy-M-d ',maxDate:'#F{$dp.$D(\'endDate\')}'}));

这样只需要设置一个属性就好了,如果有别的需要,还可以根据实际情况做相应的改变.

原创粉丝点击