时间选择器§

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

$('.timepicker').pickatime()

选项§

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

// 翻译清除按钮
clear: 'Clear',

// 格式
format: 'h:i A',
formatLabel: undefined,
formatSubmit: undefined,
hiddenPrefix: undefined,
hiddenSuffix: '_submit',

// 可编辑输入
editable: undefined,

// 时间间隔
interval: 30,

// 时间限制
min: undefined,
max: 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 picker--time',
  opened: 'picker--opened',
  focused: 'picker--focused',

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

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

  // 时间列表
  list: 'picker__list',
  listItem: 'picker__list-item',

  // 时间状态
  disabled: 'picker__list-item--disabled',
  selected: 'picker__list-item--selected',
  highlighted: 'picker__list-item--highlighted',
  viewset: 'picker__list-item--viewset',
  now: 'picker__list-item--now',

  // 清除按钮
  buttonClear: 'picker__button--clear',
}

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

翻译§

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

// 扩展所有实例的默认选取器选项。
$.extend($.fn.pickatime.defaults, {
  clear: 'Effacer'
})

// 或者,将月和工作日作为每次调用的数组传递
$('.timepicker').pickatime({
  clear: 'Effacer'
})

清除按钮§

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

$('.timepicker').pickatime({
  clear: ''
})

格式§

显示一种易于使用的标签和输入格式,并使用另一种标签进行提交。

这是通过创建一个input 具有与 name 原始属性相同的新隐藏元素以及一个可选的前缀/后缀来完成的:

$('.timepicker').pickatime({
  //用感叹号(!)转义任何“规则”字符。
  format: 'T!ime selected: h:i a',
  formatLabel: '<b>h</b>:i <!i>a</!i>',
  formatSubmit: 'HH:i',
  hiddenPrefix: 'prefix__',
  hiddenSuffix: '__suffix'
})

formatLabel 选项是唯一的。它可以包含HTML,如果要在运行时创建标签,它也可以是一个函数:

$('.timepicker').pickatime({
  formatLabel: function(time) {
    var hours = ( time.pick - this.get('now').pick ) / 60,
      label = hours < 0 ? ' !hours to now' : hours > 0 ? ' !hours from now' : 'now'
    return  'h:i a <sm!all>' + ( hours ? Math.abs(hours) : '' ) + label + '</sm!all>'
  }
})

仅发送隐藏value§

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

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

$('.timepicker').pickatime({
  formatSubmit: 'HH:i',
  hiddenName: true
})

格式规则§

以下规则可随时用于格式化:

规则 描述 结果
h 12小时制小时 1 – 12
hh 12小时制的小时,前导零 01 – 12
H 24小时制的小时 0 – 23
HH 24小时制的小时,前导零 00 – 23
i 分钟 00 – 59
a 白天时段 a.m. / p.m.
A 大写的一天时间段 AM / PM

可编辑的输入§

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

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

$('.timepicker').pickatime({
  editable: true
})

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

使用html5属性§

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

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

间隔§

在列表中选择两次之间的分钟间隔:

$('.timepicker').pickatime({
  interval: 150
})

时间限制§

在选择器上设置最小和最大可选时间。

使用javascript日期§

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

使用格式化为数组 [HOUR,MINUTE]§

$('.timepicker').pickatime({
  min: [7,30],
  max: [14,0]
})

使用整数或布尔值§

$('.timepicker').pickatime({
  // 整数(正/负)将其设置为从现在开始的相对间隔。
  min: -5,
  // `true` 设置为现在. `false、删除任何限制。
  max: true
})

禁用时间§

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

使用javascript日期§

$('.timepicker').pickatime({
  disable: [
    new Date(2016,3,20,4,30),
    new Date(2016,3,20,9)
  ]
})

使用格式化为数组[HOUR,MINUTE]§

$('.timepicker').pickatime({
  disable: [
    [0,30],
    [2,0],
    [8,30],
    [9,0]
  ]
})

使用(0到23)的整数作为小时§

$('.timepicker').pickatime({
  disable: [
    3, 5, 7
  ]
})

在一定范围内使用对象§

$('.timepicker').pickatime({
  disable: [
    { from: [2,0], to: [5,30] }
  ]
})

from & to 可以是:

这些值也可以是表示相对于其他时间间隔的整数:

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

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

$('.timepicker').pickatime({
  disable: [
    true,
    3, 5, 7,
    [0,30],
    [2,0],
    [8,30],
    [9,0]
  ]
})

禁用范围有例外§

通过将inverted 参数添加到集合中的项目,启用处于禁用时间范围内的时间:

$('.timepicker').pickatime({
  disable: [
    1,
    [1, 30, 'inverted'],
    { from: [4, 30], to: [10, 30] },
    [6, 30, 'inverted'],
    { from: [8, 0], to: [9, 0], inverted: true }
  ]
})

容器§

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

$('.timepicker').pickatime({
  container: '#root-picker-outlet'
})

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

隐藏的容器 input§

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

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

结束用户操作§

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

$('.timepicker').pickatime({
  closeOnSelect: false,
  closeOnClear: false
})

事件§

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

$('.timepicker').pickatime({
  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)
  }
})

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

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