datepicker的使用方法

大家好，欢迎来到IT知识分享网。

===导语：前一章已经实现了点击输入框弹出datepicker日期插件，但业务的处理逻辑放在哪里还未解决。此章主要介绍datepicker的使用方法，以及常见的配置项和对应的值。

使用方法：
方法很简单$(‘selector’).datepicker({});此方法内包含着配置参数的对象，根据需要按需配置即可。
*需要注意的是：因为此插件的调用默认事件是focus或者是button所以在写html时就选择input或者是button元素。

常见配置项：

1. minDate：最小可选日期*
   值：日期或数字或字符串
   ==日期：包含最小日期的日期对象。
   == 数字：从今天开始的几天。例，2代表从今天开始的两天，-1代表昨天。
   ==字符串：由dateFormat选项定义的格式的字符串，或相对日期。
   相对日期 必 须包含值和期间对; 有效期为数”y”年，
   “m”数 月，“w”数周和数”d”天。例如，”+1m +7d”代表
   从今天起一个月零七天。
2. maxDate：最大可选日期
   值：日期或数字或字符串（同上）
   默认为null，没有最大值。
3. dateFormat：日期格式
   值：字符串
   默认：“mm/dd/yy”
   4.monthNames：月份名称
   值：包含12个月份的数组（主要用于本土化）
   默认： [ “January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December” ]
   5.dayNamesMin：列标题
   值：包含周日到周六的数组（主要用于本土化）
   默认：[ “Su”, “Mo”, “Tu”, “We”, “Th”, “Fr”, “Sa” ]
   6.showMonthAfterYear：年月显示顺序
   值：布尔值
   默认：false
   7.beforeShow:日期面板显示之前的处理函数（处理业务中面板显示与否相关的逻辑）
   默认：null
   功能：获取输入字段和当前datepicker实例并返回选项对象以更新datepicker的函数。它在显示datepicker之前调用。
   8.beforeShowDay：面板显示之前可以为每个日期做处理的函数（处理业务中对日期的相关处理逻辑）
   值：一个以日期作为参数的函数，必须返回一个数组：
   [0]：true/ false表示此日期是否可选
   [1]：要添加到日期单元格的CSS类名称
   [2]：此日期的可选弹出工具提示语
   默认： null
   *在显示日期选择器之前，每个日期都会调用该函数。（相当于对每个日期遍历，此函数会被调用多次）

以上只是在此项目中用到的一些方法，具体其他的参数，值，以及函数的使用方法请参考datepicker官网

项目中的遇到的问题，及解决办法：

项目需求：
只有后台返回的日期时间可以选择，之外的日期都不可点。
已取得：
由以上的文档，可以得知处理业务中面板显示与否相关的逻辑应该放在beforeShow对应的处理函数中。
处理业务中对日期的相关处理逻辑应该放在beforeShowDay对应的处理函数中。
存在问题：
处理完毕后插件的整体处理逻辑没有问题了，但是重新写的样式无法覆盖原来的样式代码。

改造前代码：



日期插件内部样式改动找到对应的样式类名重新定义就可以，此处不在贴代码。但是点击输入框弹出插件时样式未被覆盖上。

因为此插件的样式要在点击后插件弹出来之前触发，此插件已经给这个输入框绑定上了focus事件，再绑定个click事件，在此事件内做样式修改不就可以了！
经实验，可用。

改造后代码：

总结：
1.$(‘selector’).datepicker({})默认已经绑定focus或者button事件触发，无需再次绑定对应事件。
2.处理业务中面板显示与否相关的逻辑应该放在beforeShow对应的处理函数中。
3.对日期的相关处理逻辑应该放在beforeShowDay对应的处理函数中。
4.再绑定个click事件，在此事件内做样式修改。

**最重要的还是先看官网文档，避免做很多无用功！！！！！