首先引用js WdatePicker.js
<script src="./WdatePicker.js"></script>
在标签使用插件input标签 必须带有id属性
开始时间
<input id="start_time_id" type="text" name="start_time_name"
onclick="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',
maxDate:'#F{$dp.$D(\'end_time_id\',{d:-1})}'})" style="width: 120px;" />
结束时间
<input id="end_time_id" type="text" name="end_time_name"
onclick="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd',
minDate:'#F{$dp.$D(\'start_time_id\',{d:1})||(\'%y-%M-%d\')}'});"
style="width: 120px;" />
文中开始时间
- dateFmt:定义了他的格式’yyyy-MM-dd’,就例如 2020-05-21
- minDate:’%y-%M-%d’; ‘%y-%M-%d’ 相当于今天(根据计算机设置的日期)
- maxDate:’#F{ d p . dp. dp.D(‘end_time_id’,{d:-1})}’ ; #F{ d p . dp. dp.D()} 为定义格式,需要按照这么规范写入。end_time_id必须是对应结束日期 id的名字 。{d:-1}为小一天,整体来看,开始时间最大日期不能和结束时间相同,不能为同一天。(如果想要前两天,后两天可以写{d:-2},{d:2})
文中结束时间
- minDate:’#F{ d p . dp. dp.D(‘start_time_id’,{d:1})||(’%y-%M-%d’,{d:-1})}’});" ; start_time_id,同样必须是开始时间的id属性
同样可以使用JQ写法:
文中开始时间
$("#start_time_id").unbind("click");
$('body').on('click', '#start_time_id', function () {
WdatePicker({
readOnly: true,
dateFmt: "yyyy-MM-dd",
minDate: "%y-%M-%d",
maxDate: "#F{$dp.$D(\'end_time_id\',{d:-1})}"
});
});
文中结束时间
$("#end_time_id").unbind("click");
$('body').on('click', '#end_time_id', function () {
WdatePicker({
readOnly: true,
dateFmt: "yyyy-MM-dd",
minDate: "#F{$dp.$D(\'start_time_id\',{d:1})||\'%y-%M-%d\'}"
});
});