捋捋所遇见的WdatePicker插件的用法

将遇到的WdatePicker插件用法记录如下，方便直接拿来使用。如果需求有大的更改，只能再去查帮助文档咯。

先说说我遇到的需求：服务端接口会给前端返回从当天日期算起未来三天的日期，将这三天的日期在WdatePicker日历中显示，除了这三天日期，其他的日期都是不可操作的。当选择三天日期中的任意一天时，回去请求服务端接口返回当前选中日期的上下午选项，将这些选项展示到日期控件后边的下拉框中。不明白看下图。

第一步：



第二步：



估计还是一知半解吧。。闲话少叙，正戏开锣，上代码吧。

1、引入插件的WdatePicker.js文件，最好是放到页面的下方。

2、给预约时间文本框添加事件，在事件中引入插件代码。

$(date).focus(function () {

WdatePicker({ opposite: true, disabledDates: datesArry, onpicked: getReserveTime, oncleared: getReserveTime, vel: realDate });

});

代码说明：

$(date)：这个对象是要显示选中日期的文本框

WdatePicker({})：这个是WdatePicker插件必须有的。

opposite：默认为false，当设置为true时，无效日期变为有效日期，正好符合需求。如果反过来做，将此值设为false，当时自己都被吓一跳，那个服务端盆友岂不是要疯了，返回那么多日期呢。

真是好爱这个属性呢。

disabledDates：结合opposite属性，给这个属性赋的值就是服务端接口给返回的可操作日期的列表。我这里的需求是三个日期。

onpicked：用这个事件来做日期的联动，就是前边提到的选择可操作日期时请求服务端接口，将返回数据显示到日历后边的下拉列表中，选择不同日期接口会返回不同的数据，这就是所谓的联动。

，自己理解的通俗的联动。

oncleared：这个事件是在日历输入框中清空日期是所发生的事情。我这里需要在清空日期时，后边下拉框中的数据清空只剩请选择选项，所以这个事件就派上了用场。

vel：这个属性。是自己偷懒了，找到了这个属性。情况是这样的，在日期输入框输入日期的无效格式时给的一个提示，实在是懒得写了，就直接用这个属性了，它会在你输入无效格式时，弹出一个提示，这个提示在配置文件zh-cn.js里找到，可以根据自己的情况进行修改。如下图。不过要记得，如果用这个属性，页面中需要多加一个隐藏域，将隐藏域的id属性值，赋给了realDate变量。插件就会自己判断日期输入框中是否输入有效格式，如果无效会给出提示。



至此，说明完毕，如有问题，记得一起探讨哦。。