日期插件 pikaday.js 自己使用的小心得 希望能帮到你们

直接上代码：这是需要引进去的css和js

<link rel="stylesheet"href="__PUBLIC__/Common/css/pikaday.css" /><scriptsrc="__PUBLIC__/Common/js/moment.js"></script><scriptsrc="__PUBLIC__/Common/js/pikaday.js"></script>

本人需要的是中文的日期所以：下面的代码是必须的

  <inputtype="text" name="" id="datepicker" value="选择日期" >

       var i18n = { // 本地化                       previousMonth:'上个月',                      nextMonth: '下个月',                      months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],                      weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],                      weekdaysShort: ['日', '一', '二', '三', '四', '五', '六']                 }                 var picker = newPikaday({                      field:document.getElementById('datepicker'),                      firstDay: 1,                      showWeekNumber:false,                      i18n: i18n,                       format: ' MM月D日',//这里面是改变日期显示的格式的，YYYY年MM月DD日 ,想要什么格式的就在这里面改                      minDate: newDate('2000-01-01'),                      maxDate: newDate('2020-12-31'),                      yearRange: [2000,2020]                       });

 

 

该插件的一些基本组态：

 field 将日期戳绑定到表单字段

trigger使用不同的元素触发打开datepicker，请参见触发器示例（默认为field）

bound自动显示/隐藏在日期选择field对焦（默认情况下true，如果field被设置）

ariaLabel输入字段上的数据属性带有aria帮助tekst（仅在bound设置时才应用）

position相对于所述表单字段的日期选择器的优选位置，例如：top right，bottom right 注意：可能会发生自动调整，以避免从被显示的视区之外日期选择器，请参阅位置例如（默认为“左下”）

reposition可以设置为false，不能在视口内重新定位datepicker，强制它采取配置position（默认值：true）

containerDOM节点渲染日历，看容器示例（默认值：undefined）

format默认的输出格式.toString()和field值（需要Moment.js进行自定义格式化）

formatStrict时间的严格日期解析的默认标志（需要Moment.js进行自定义格式化）

toString(date, format)将用于自定义格式的功能。此功能将优先moment。

parse(dateString, format)函数将用于解析输入字符串并从中获取日期对象。此功能将优先moment。

defaultDate 首次打开时查看的初始日期

setDefaultDate做出defaultDate初始选择的值

firstDay 一周的第一天（0：星期日，1：星期一等）

minDate可以选择的最小/最早的日期（这应该是一个本地的Date对象 - 例如newDate()或moment().toDate()）

maxDate可以选择的最大/最新日期（这应该是一个本机的Date对象 - 例如newDate()或moment().toDate()）

disableWeekends 不允许选择星期六或星期日

disableDayFn回调函数通过视图中每一天的Date对象。应该返回true以禁用当天的选择。

yearRange年数（例如10）或上/下范围的阵列（例如[1900,2015]）

showWeekNumber在行头显示ISO周数（默认false）

pickWholeWeek选择一个星期而不是一天（默认false）

isRTL 反转从右到左的语言的日历

i18n 语言默认为月和工作日名称（见下面的国际化）

yearSuffix 额外的文字附加到标题中的年份

showMonthAfterYear在标题中逐年呈现（默认false）

showDaysInNextAndPreviousMonths 显示下一个或前几个月的日历网格的日期（默认值：false）

enableSelectionDaysInNextAndPreviousMonths 允许用户选择下一个或前几个月的日期（默认值：false）

numberOfMonths 可见日历的数量

mainCalendar什么时候numberOfMonths使用，这将帮助您选择主日历的位置（默认left，可以设置为right）。仅用于第一次显示或选定的日期不可见
events您希望与常规日期区分的日期阵列（例如['Sat Jun 28 2017', 'Sun Jun 29 2017', 'Tue Jul 01 2017',]）

theme定义一个可以用作为不同主题样式设计的钩子的类名，请参阅主题示例（默认null）

blurFieldOnSelect定义当选择日期时字段是否模糊（默认true）

onSelect 选择日期时的回调函数

onOpen 选择器变得可见时的回调函数

onClose 当选择器被隐藏时的回调函数

onDraw 选择器绘制新月时的回调函数

keyboardInput启用键盘输入支持（默认true）

小编遇到的问题是不管我怎么改 他那个日期时间 都是英文的 到最后才发现是moment.js必须要放到pikaday.js前面才有效果 怪不得 那么多人都说 加了moment.js也没有效果 。^_^   搞的我也是很尴尬。

我只是主要把自己碰到的情况写下来希望可以帮到你们，如有错误请大家 多多指教。

 附上该插件的github地址： https://github.com/dbushell/Pikaday