API§

您可以使用picker API来扩展和创建自定义功能:

var $input = $('.datepicker').pickadate()

// 直接使用picker对象。
var picker = $input.pickadate('picker')
picker.methodName(argument1, argument2, ...)
picker.objectName

// 或者传递元素的插件数据。
$input.pickadate(methodName, argument1, argument2, ...)
$input.pickadate(objectName)

对于此页面上的大多数示例,都使用日期选择器,但相同的API也适用于时间选择器。

方法§

选择器上有11种方法可用:

  1. open
  2. close
  3. start
  4. stop
  5. render
  6. clear
  7. get
  8. set
  9. on
  10. off
  11. trigger

所有这些方法(除外get)都返回picker对象,因此可以链接:

picker.open().clear().close()...

对象§

通过选择器有四个可用的对象:

  1. $node
  2. $root
  3. _hidden
  4. component

方法§

打开和关闭§

打开和关闭捡拾器支架。要检查它是否已经打开,可使用的get 方法.

picker.open()
picker.close()

// 如果涉及“单击”,请防止事件冒泡。
event.stopPropagation()

// 如果我们想保持对输入的关注,
// 防止“mousedown”上的默认操作。
event.preventDefault()

重点关注§

关闭input 传递选择器,同时通过传递true -y参数来关注元素。

picker.close(true)

无焦点打开§

input通过将false 第一个参数作为参数来打开选择器,而无需关注元素。以这种方式打开选择器,需要注意以下几点:

(1) 关闭它的唯一方法是使用单独的自定义绑定-在此示例中,单击文档即可。

(2) “打开”事件仍被触发-但是,使用该get方法查看选择器是否打开将返回false.

(3)如果任一选择器元素被聚焦/单击,它将恢复正常行为。

picker.open(false)
$(document).on('click', function() {
  picker.close()
})

开始和停止§

销毁并重建拾取器。要检查它是否已经启动,请使用该 get 方法。

picker.stop()
picker.start()

销毁选择器还会清除绑定在其上的所有事件的回调。

渲染§

将一些东西添加到容器后刷新选择器。

picker.render()

默认情况下,仅选择器的“面”(即box元素)具有重新呈现的内容。要从头开始渲染整个选择器root,请true 作为第一个参数传递:

picker.render(true)

清除§

清除选择器input元素中的值。

picker.clear()

这是使用速记的set 方法.

获取§

获取选择器的属性,对象和状态。

picker.get(thing)

thing 参数是一个可选字符串,可以是下列之一:

* 项目对象§

thing上面列表中用星号(*)表示的s 返回一个选择器项目对象,该对象可以通过使用日期或时间格式化规则传递第二个字符串参数来进行格式化:

picker.get(thing, format)

选取器中的每个“日期”或“时间”在后台都有一个伴随它的项目对象。

这里有一个日期选择器项目的对象为2015年4月20日,:

{
  // 整整一年。
  year: 2015,

  // 指数为零的月份。
  month: 3,

  // 月份的日期。
  date: 20,

  // 以零为指数的一周中的一天。
  day: 1,

  // 底层JavaScript日期对象。
  obj: "Mon, 20 Apr 2015 00:00:00 EDT",

  // 用于比较的“pick”值。
  pick: 1429502400000
}

这里有一个时间选择器项目对象为下午4时20分:

{
  // 从0到23的一天中的一小时。
  hour: 16,

  // 从0到59的每小时分钟(基于间隔)。
  mins: 20,

  // 用于比较的“pick”值。
  pick: 980
}

获取 value§

返回选择器input 素的字符串值。

picker.get() //简称 `picker.get('value')`.

获取 select§

返回以可视方式选择的日期的项目对象或格式化字符串。

默认为null

picker.get('select')
picker.get('select', 'yyyy/mm/dd')

获取 highlight§

返回突出显示日期的项目对象或格式化字符串。

没有时,默认为“今天”(或时间选择器为“现在”)value.

picker.get('highlight')
picker.get('highlight', 'yyyy/mm/dd')

获取 view§

返回确定当前视图的日期的项目对象或格式字符串。

如果没有,则默认为当月的第一天(时间选择器为“现在”)value.

picker.get('view')
picker.get('view', 'yyyy/mm/dd')

获取 min§

返回确定下限的日期的项目对象或格式字符串。

如果未在选项中或通过选择器的API显式设置-Infinity 项目对象,则默认为该项目对象。

picker.get('min')
picker.get('min', 'yyyy/mm/dd')

获取 max§

返回确定上限的日期的项目对象或格式字符串。

如果未在选项中或通过选择器的API明确设置Infinity 项目对象,则默认为该项目对象。

picker.get('max')
picker.get('max', 'yyyy/mm/dd')

获取 open§

返回选择器是否打开的布尔值。

picker.get('open')

获取 start§

返回选择器是否已启动的布尔值。

picker.get('start')

获取 id§

返回唯一的字符串,该字符串是选择器及其元素的ID。如果元素没有ID,则将其设置为随机值。

picker.get('id')

获取 disableenable§

这两件事共同作用,以确定在选择器上禁用哪些项目对象:

// 数组传入了禁用日期的选项
var datesToDisable = [ 1, 4, 7, [2015,3,8], [2015,3,19], new Date(2015,3,26) ]

// 返回 `1` 表示 “enabled” 状态
picker.get('enable')

// 返回要禁用的日期集合
picker.get('disable')

但是,当所有日期都被禁用而少数几个日期被启用时,其行为会有所不同:

// 数组传入选项以禁用除少数日期之外的所有日期
var datesToDisable = [ true, 1, 4, 7, [2015,3,8], [2015,3,19], new Date(2015,3,26) ]

// 返回 `-1`表示 “flipped” 状态
picker.get('enable')

// 将日期集合返回到*not*disable
picker.get('disable')

设置§

设置选择器的属性,对象和状态。

// 一次一个
picker.set(thing, value)

// 一次多个
picker.set({
  thing: value,
  thing: value,
  thing: value
})

value 是基于thing被设置。的thing是,可以是一个字符串:

* 级联更改§

设置thing上面列表中带有星号(*)的s时,它们会级联使用相同的值来更新其他内容。

静音回调§

默认情况下,势必任何回调的on方法时,相关的会被开除thing设置。要静默设置a thing,请传递一个muted参数设置为的options对象true:

// 一次一个
picker.set(thing, value, { muted: true })

// 一次多个
picker.set({
  thing: value,
  thing: value,
  thing: value
}, { muted: true })

设置 clear§

清除选择器input元素中的值。

picker.set('clear')

这是该clear方法的完整形式。

设置 select§

设置select具有级联更改,这些更改会根据设置更新元素highlight的view,和值。inputformat

选择一个日期项目对象§

// 使用格式化为的数组[YEAR, MONTH, DATE].
picker.set('select', [2015, 3, 20])

// 使用JavaScript日期对象。
picker.set('select', new Date(2015, 3, 30))

// 使用正整数作为UNIX时间戳。
picker.set('select', 1429970887654)

// 使用字符串和解析格式(默认为“format”选项)。
picker.set('select', '2016-04-20', { format: 'yyyy-mm-dd' })

选择一个时间项对象§

// 使用格式化为的数组 [HOUR,MINUTE].
picker.set('select', [3,0])

// 使用JavaScript日期对象。
picker.set('select', new Date(2015, 3, 20, 10, 30))

// 使用正整数作为分钟。
picker.set('select', 540)

// 使用字符串和解析格式(默认为“format”选项)。
picker.set('select', '04-30', { format: 'hh-i' })

设置 highlight§

设置 highlight 具有级联更改,可更新设置选择器的项目对象view。

突出显示日期项目对象§

// 使用格式化为的数组 [YEAR, MONTH, DATE].
picker.set('highlight', [2015, 3, 20])

// 使用JavaScript日期对象。
picker.set('highlight', new Date(2015, 3, 30))

// 使用正整数作为UNIX时间戳。
picker.set('highlight', 1429970887654)

// 使用字符串和解析格式(默认为“format”选项)
picker.set('highlight', '2016-04-20', { format: 'yyyy-mm-dd' })

突出显示时间项目对象§

// 使用格式化为的数组 [HOUR,MINUTE].
picker.set('highlight', [15,30])

// 使用JavaScript日期对象。
picker.set('highlight', new Date(2015, 3, 20, 10, 30))

// 使用正整数作为分钟。
picker.set('highlight', 1080)

// 使用字符串和解析格式(默认为“format”选项)
picker.set('highlight', '04-30', { format: 'hh-i' })

设置 view§

设置 view 没有级联更改,并且highlight其余设置不受影响。

设置日期项目对象的视图§

value通过被归为每月的第一个日期之前将进入视野。

// 使用格式化为的数组 [YEAR,MONTH,DATE].
picker.set('view', [2000,3,20])

// 使用JavaScript日期对象。
picker.set('view', new Date(1988,7,14))

// 使用正整数作为UNIX时间戳。
picker.set('view', 1587355200000)

// 使用字符串和解析格式(默认为“format”选项)
picker.set('view', '2016-04-20', { format: 'yyyy-mm-dd' })

设置时间项对象的视图§

// 使用格式化为的数组[HOUR,MINUTE].
picker.set('view', [15,30])

// 使用JavaScript日期对象。
picker.set('view', new Date(2015, 3, 20, 10, 30))

// 使用正整数作为分钟。
picker.set('view', 1080)

// 使用字符串和解析格式(默认为“format”选项
picker.set('view', '04-30', { format: 'hh-i' })

设置 min§

设置min了级联变化的select,highlight以及view只在特定的项目对象变为超出范围。

限制最小日期§

// 使用格式化为的数组[YEAR,MONTH,DATE].
picker.set('min', [2015,3,20])

// 使用JavaScript日期对象。
picker.set('min', new Date(2015,7,14))

// 使用格式化字符串。
picker.set('min', '8 January, 2016'))

//使用整数作为相对于今天的天数。
picker.set('min', -4)

// 使用“true”表示“today”。
picker.set('min', true)

// 使用“false”删除。
picker.set('min', false)

限制最小时间§

// 使用格式化为的数组[HOUR,MINUTE].
picker.set('min', [15,30])

// 使用JavaScript日期对象。
picker.set('min', new Date(2015, 3, 20, 10, 30))

// 使用格式化字符串。
picker.set('min', '4:30 PM'))

// 从现在开始使用整数作为相对间隔。
picker.set('min', -4)

// 使用“true”表示“now”。
picker.set('min', true)

// 使用“false”删除。
picker.set('min', false)

设置 max§

设置max了级联变化的select,highlight以及view只在特定的项目对象变为超出范围。

限制最大日期§

// 使用格式化为的数组[YEAR,MONTH,DATE].
picker.set('max', [2015,3,20])

// 使用JavaScript日期对象。
picker.set('max', new Date(2015,7,14))

// 使用格式化字符串。
picker.set('max', '20 April, 2016'))

//使用整数作为相对于今天的天数。
picker.set('max', 4)

// 使用“true”表示“today”。
picker.set('max', true)

// 使用“false”删除。
picker.set('max', false)

限制最大时间§

// 使用格式化为的数组[HOUR,MINUTE].
picker.set('max', [15,30])

// 使用JavaScript日期对象。
picker.set('max', new Date(2015, 3, 20, 10, 30))

// 使用格式化字符串。
picker.set('max', '11:30 AM'))

// 从现在开始使用整数作为相对间隔。
picker.set('max', 4)

// 使用“true”表示“now”。
picker.set('max', true)

// 使用“false”删除。
picker.set('max', false)

设置 disableenable§

设置disable或enable已级联的变化上select,highlight以及view在当前选择的唯一项目对象被禁用。

这里要注意的重要一点是,将某项“设置”为启用或禁用会将新元素添加到要禁用的项目集合中,而不是完全用新集合替换它们。

禁用/启用日期 §

您可以禁用日期集,然后通过以下方法启用整个日期集或这些日期集中的特定日期:

禁用/启用时间§

您可以禁用时间集,然后通过以下方法启用整个时间集或这些时间集中的特定时间:

在禁用范围内启用元素 §

当您要启用的日期或时间在禁用范围内时,将该inverted属性添加到该项目:

picker.set('disable', [

  // 禁用所有周一,2015年11月15日除外。
  1, [2015, 10, 15, 'inverted'],

  // 禁用从2016年3月2日到2016年3月28日的所有日期
  // 除了3月10日和3月14日至3月23日之间。
  { from: [2016, 2, 2], to: [2016, 2, 28] },
  [2016, 2, 10, 'inverted'],
  { from: [2016, 2, 14], to: [2016, 2, 23], inverted: true }
])
picker.set('disable', [

  // 从凌晨1:00到1:59禁用所有时间,凌晨1:30除外。
  1, [1, 30, 'inverted'],

  // 从凌晨3:00到下午6:00禁用所有时间,除了
  // 上午4:30到上午7:30到11:30。
  { from: [3,0], to: [18,0] },
  [4, 30, 'inverted'],
  { from: [7,30], to: [11,30], inverted: true }
])

设置 interval§

仅对于时间选择器,您可以更改每个时间显示之间的间隔。

设置interval了级联变化的select,highlight以及view只在特定的项目对象变为超出范围。

// 使用以分钟为单位表示间隔长度的整数
picker.set('interval', 15)
picker.set('interval', 20)
picker.set('interval', 120)

事件和回调§

on事件§

绑定回调以在调用相对选择器方法时触发(除非回调为“ muted”):

// 一次一个
picker.on(methodName, function() { … })

// 一次多个
picker.on({
  methodName: function() { … },
  methodName: function() { … },
  methodName: function() { … }
})

methodName 可以是 open, close, render, start, stop, 或 set.

在这些回调的范围内,this指的是选择器对象 -对于大多数事件,不传递任何参数。

唯一的例外是set 方法,该方法传递了一个参数,该参数提供了有关“设置”内容的更多上下文。

事件回调作为绑定§

启动选择器后,可以使用以下 on 方法设置事件的回调:

picker.on({
  open: function() {
    console.log('打开!')
  },
  close: function() {
    console.log('现在关闭')
  },
  render: function() {
    console.log('刚刚重新渲染')
  },
  stop: function() {
    console.log('再见')
  },
  set: function(thingSet) {
    console.log('布景:', thingSet)
  }
})

由于只能在选择器启动后绑定这些回调,'start'因此无法以这种方式为事件提供回调。为此,必须将它作为option传递。

事件回调作为选项§

在启动选择器之前,可以通过在调用选择器时将事件作为选项传递来设置事件的回调:

$('.datepicker').pickadate({
  onOpen: function() {
    console.log('打开!')
  },
  onClose: function() {
    console.log('现在关闭')
  },
  onRender: function() {
    console.log('刚刚重新渲染')
  },
  onStart: function() {
    console.log('Hello there :)')
  },
  onStop: function() {
    console.log('再见')
  },
  onSet: function(thingSet) {
    console.log('布景:', thingSet)
  }
})

off事件§

正在使用绑定拆散回调的on方法:

picker.off(methodName, methodName, methodName, ...)

methodName 可以是 open, close, render, start, stop, 或 set.

picker.on('open', function() {
  console.log('即使我被打开,我也没有记录。。')
})
picker.off('open')

trigger事件§

触发已排队的事件的回调:

picker.on('open', function() {
  console.log('这木头不开!')
})
picker.trigger('open')

注意:这实际上并没有调用该方法。它仅触发回调。类似于jQuery的triggerHandler方法。

您也可以选择将一些数据传递给要触发的方法:

picker.on('open', function(data) {
  console.log('此日志不使用此数据打开:', data)
})
picker.trigger('open', { some: 'value' })

对象§

$node对象§

input包装为jQuery对象的选择器的相对元素。

picker.$node

$root对象§

这是包装为jQuery对象的选择器的相对根所有者元素。

picker.$root

_hidden对象§

这是选择器的相对隐藏元素,undefined如果没有formatSubmit选择的话。

component对象§

这是选择器的相对组件构造函数,用于构建日期或时间选择器。该API处于不断发展之中-因此请立即避免使用它。