日期选择器§

基本设置需要定位input元素并调用选择器:

$('.datepicker').pickadate()

注意: JavaScript Date对象中的月份为零索引new Date(2016320)含义是20 April, 2016.

为了与此保持一致,每当使用整数表示月份时,pickadate都会将其视为零索引。仍按预期解析字符串日期。

选项§

使用上面的基本调用,这些是默认设置:

// 字符串 and 语言翻译
monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
weekdaysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
showMonthsShort: undefined,
showWeekdaysFull: undefined,

// 按钮
today: 'Today',
clear: 'Clear',
close: 'Close',

// 辅助功能标签
labelMonthNext: 'Next month',
labelMonthPrev: 'Previous month',
labelMonthSelect: 'Select a month',
labelYearSelect: 'Select a year',

// 格式化
format: 'd mmmm, yyyy',
formatSubmit: undefined,
hiddenPrefix: undefined,
hiddenSuffix: '_submit',
hiddenName: undefined,

// 可编辑输入
editable: undefined,

// 下拉式选择器
selectYears: undefined,
selectMonths: undefined,

// 一周的第一天
firstDay: undefined,

// 日期限制
min: undefined,
max: undefined,

// 禁用日期
disable: undefined,

// 根选择器容器
container: undefined,

// 隐藏的输入容器
containerHidden: undefined,

// 关闭用户操作
closeOnSelect: true,
closeOnClear: true,

// 事件
onStart: undefined,
onRender: undefined,
onOpen: undefined,
onClose: undefined,
onSet: undefined,
onStop: undefined,

// 
klass: {

  // 元素状态
  input: 'picker__input',
  active: 'picker__input--active',

  // 根选择器和状态 *
  picker: 'picker',
  opened: 'picker--opened',
  focused: 'picker--focused',

  // 持有者选择器
  holder: 'picker__holder',

  // 拣选机框架、包装和盒子
  frame: 'picker__frame',
  wrap: 'picker__wrap',
  box: 'picker__box',

  // 选择器标题
  header: 'picker__header',

  // 月导航
  navPrev: 'picker__nav--prev',
  navNext: 'picker__nav--next',
  navDisabled: 'picker__nav--disabled',

  // 月份和年份标签
  month: 'picker__month',
  year: 'picker__year',

  // 年月下拉列表
  selectMonth: 'picker__select--month',
  selectYear: 'picker__select--year',

  // 日期表
  table: 'picker__table',

  // 星期标签
  weekdays: 'picker__weekday',

  // 天状态
  day: 'picker__day',
  disabled: 'picker__day--disabled',
  selected: 'picker__day--selected',
  highlighted: 'picker__day--highlighted',
  now: 'picker__day--today',
  infocus: 'picker__day--infocus',
  outfocus: 'picker__day--outfocus',

  // 选取器页脚
  footer: 'picker__footer',

  // 今天,清除和关闭按钮
  buttonClear: 'picker__button--clear',
  buttonClose: 'picker__button--close',
  buttonToday: 'picker__button--today'
}

* 重要的是不要在选择器的根元素中添加任何样式。而是.picker__holder根据根元素的状态来定位该元素(或其中的任何其他元素)。

字符串§

更改适合的月份和工作日标签:

$('.datepicker').pickadate({
  weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
  showMonthsShort: true
})

按钮§

通过传递false-y值来更改文本或完全隐藏按钮:

$('.datepicker').pickadate({
  today: '',
  clear: 'Clear selection',
  close: 'Cancel'
})

辅助功能标签§

title属性更改为选择器中的几个元素:

$('.datepicker').pickadate({
  labelMonthNext: 'Go to the next month',
  labelMonthPrev: 'Go to the previous month',
  labelMonthSelect: 'Pick a month from the dropdown',
  labelYearSelect: 'Pick a year from the dropdown',
  selectMonths: true,
  selectYears: true
})

语言翻译§

可以扩展选择器以添加对国际化的支持。. 提供40多种语言的翻译,您可以通过以下两种方式之一进行翻译:

// 扩展所有实例的默认选取器选项
$.extend($.fn.pickadate.defaults, {
  monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
  weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
  today: 'aujourd\'hui',
  clear: 'effacer',
  formatSubmit: 'yyyy/mm/dd'
})

// 或者,将月和工作日作为每次调用的数组传递
$('.datepicker').pickadate({
  monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
  weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
  today: 'aujourd\'hui',
  clear: 'effacer',
  formatSubmit: 'yyyy/mm/dd'
})

使用翻译时,请指定formatSubmitdata-value以确保正确解析日期(与区域设置无关)。

rtl语言§

对于从右向左(RTL)流动的语言,您需要通过沿rtl.css文件链接来切换箭头和文本方向:

<!-- 添加样式文件 *after* pickadate主题文件之后 -->
<link rel="stylesheet" href="lib/themes/rtl.css">

<!-- 添加语言文件 *after* pickadate脚本文件之后 -->
<script src="lib/translations/ar.js"></script>

格式§

显示一种人类友好的格式,并使用另一种格式提交给服务器。

这是通过创建一个新的隐藏input元素来实现的,该元素具有与name原始属性相同的属性,并带有可选的前缀/后缀:

$('.datepicker').pickadate({
  // 用感叹号(!)转义任何“规则”字符。
  format: 'You selecte!d: dddd, dd mmm, yyyy',
  formatSubmit: 'yyyy/mm/dd',
  hiddenPrefix: 'prefix__',
  hiddenSuffix: '__suffix'
})

仅发送隐藏value§

在大多数情况下,需要发送到服务器的值只是隐藏值,而不是可见值。为此,请使用 hiddenName 选项。

实际上使hiddenPrefixhiddenSuffix, 从源中剥离该属性name ,然后将其设置为 input,name 隐藏的的input:

$('.datepicker').pickadate({
  formatSubmit: 'yyyy/mm/dd',
  hiddenName: true
})

使用自定义格式或翻译预先填充值§

当为选项使用自定义格式设置规则format或使用翻译时, the input元素应为提供data-value使用formatSubmit – 设置格式的属性,value 可以将元素留空。这有助于将日期从自定义格式解析为各种语言:

<input data-value="2015/04/20">

格式规则§

以下规则可用于格式化任何日期:

规则 描述 结果
d 该月的日期 1 – 31
dd 月份的日期,前导零 01 – 31
ddd 星期几的缩写 周日–周六
dddd 星期几的完整格式 星期天星期六
m 一年中的月份 1 – 12
mm 一年中的月份,前导零 01 – 12
mmm 缩写形式的月份名称 一月至十二月
mmmm 完整格式的月份名称 一月至十二月
yy 缩写年份* 00 – 99
yyyy 格式完整的年份 2000 – 2999

* 如果选项规则format中使用yy, 则必须yyyyformatSubmit选项中使用适当的data-value 属性指定规则,以确保正确解析日期。

切勿yyformatSubmit选项中使用规则。

可编辑的输入§

默认情况下,通过为输入提供readOnly属性来禁用输入。这样做可以确保虚拟键盘不会在触摸设备上弹出。这也证实了传递给服务器的值将具有一致的格式。

但是,可以使用以下editable选项更改此行为:

$('.datepicker').pickadate({
  editable: true
})

这里要注意的重要一点是,这将禁用输入元素上的键盘绑定,例如打开选择器的箭头键。您将必须根据需要添加自己的绑定。

使用html5属性§

因为每个inputreadOnly在默认情况下,HTML5的属性,如requiredpattern,没有得到执行。

要对这些属性启用默认浏览器行为,请将属性设置editabletrue.

下拉选择器§

显示 select 菜单以选择月份和年份。真-y启用选择器,任何真-y启用选择器将其转换为文本:

$('.datepicker').pickadate({
  selectYears: true,
  selectMonths: true
})

如果 selectYears为真,则年份选择器出现在月份之前。

您还可以使用偶数整数-指定焦点年份的前一半和后一半来指定要显示在下拉菜单中的年数:

$('.datepicker').pickadate({
  // `true` defaults to 10.
  selectYears: 4
})

第一个工作日§

可以将一周的第一天设置为星期日或星期一。真值-y将其设置为星期一,假值-y将其设置为星期日:

$('.datepicker').pickadate({
  firstDay: 1
})

日期限制§

在选择器上设置最小和最大可选日期。

Using JavaScript dates§

$('.datepicker').pickadate({
  min: new Date(2015,3,20),
  max: new Date(2015,7,14)
})

使用格式化为[YEAR,MONTH,DATE]§

$('.datepicker').pickadate({
  min: [2015,3,20],
  max: [2015,7,14]
})

使用整数或布尔值§

$('.datepicker').pickadate({
  // 整数(正/负)将其设置为相对于今天。
  min: -15,
  // `true` 是今天. `false` 移除任何限制。
  max: true
})

禁用日期§

禁用选择器上可以选择的一组特定日期或任意日期。

使用javascript日期§

$('.datepicker').pickadate({
  disable: [
    new Date(2015,3,13),
    new Date(2015,3,29)
  ]
})

使用格式化为[YEAR,MONTH,DATE]§

$('.datepicker').pickadate({
  disable: [
    [2015,3,3],
    [2015,3,12],
    [2015,3,20]
  ]
})

使用整数作为星期几(1到7)§

$('.datepicker').pickadate({
  disable: [
    1, 4, 7
  ]
})

使用对象作为日期范围§

$('.datepicker').pickadate({
  disable: [
    { from: [2016,2,14], to: [2016,2,27] }
  ]
})

from & to 的值可以是:

这些值也可以是表示相对于另一个日期的整数:

禁用所有带有一组例外的内容§

通过设置true为集合中的第一项,仅启用一组特定日期或任意日期:

$('.datepicker').pickadate({
  disable: [
    true,
    1, 4, 7,
    [2015,3,3],
    [2015,3,12],
    [2015,3,20],
    new Date(2015,3,13),
    new Date(2015,3,29)
  ]
})

禁用范围有例外§

通过将inverted参数添加到集合中的项目,以启用禁用日期范围内的日期:

$('.datepicker').pickadate({
  disable: [
    5,
    [2015, 10, 21, 'inverted'],
    { from: [2016, 3, 15], to: [2016, 3, 25] },
    [2016, 3, 20, 'inverted'],
    { from: [2016, 3, 17], to: [2016, 3, 18], inverted: true }
  ]
})

容器§

默认情况下,选择器的根元素插入在主input元素之后。通过将任何有效的CSS选择器或jQuery对象传递给此选项来指定在哪里插入根元素:

$('.datepicker').pickadate({
  container: '#root-picker-outlet'
})

使用此选项时,请注意不要将容器设置为文档的通用名称body。这将破坏文档的键盘流程,例如,在浏览表单时。相反,应通过使容器靠近input滤芯来保持流动。

隐藏的容器 input§

默认情况下,选择器的隐藏内容input会插入到主要input元素之后。通过将任何有效的CSS选择器传递给此选项来指定在何处插入隐藏元素:

$('.datepicker').pickadate({
  containerHidden: '#hidden-input-outlet'
})

结束用户操作 §

选择日期或按下“清除”按钮时,选择器关闭。若要更改此行为,请使用以下选项:

$('.datepicker').pickadate({
  closeOnSelect: false,
  closeOnClear: false
})

事件§

当用户与选择器交互时触发事件:

$('.datepicker').pickadate({
  onStart: function() {
    console.log('你好啊 :)')
  },
  onRender: function() {
    console.log('哇。。重新呈现')
  },
  onOpen: function() {
    console.log('打开了')
  },
  onClose: function() {
    console.log('现在关闭')
  },
  onStop: function() {
    console.log('再见。')
  },
  onSet: function(context) {
    console.log('只需设置内容:', context)
  }
})

onSet 事件是传递给context参数的唯一回调,该参数提供有关“设置”哪些属性的详细信息。

在所有这六个事件的范围内,this 是指选择器。