bui.pickerdate Class

Defined in: src/scripts/ui/bui.pickerdate.js:7

Module: UI

日期选择器

日期必须以2015/8/10 这种格式传才能确保在IOS上正常, 支持动态渲染以及静态渲染, 两种的区别就在于,动态渲染初始化简单, 静态渲染灵活,支持自定义按钮样式,并且支持左右侧滑.

可以同时有左边跟右边菜单,菜单的个数也可以不一样多,留意示例的几种不同效果

预览地址: demo

方法说明:

value: 设置日期
values: 获取多个日期
min: 设置最小日期
max: 设置最大日期
reset: 重新渲染
onChange: 日期变更事件回调
formatValue: 数据格式化方法
cols: 设置分栏
widget: since1.3.0 获取依赖

Constructor

`bui.pickerdate`

(

option

)

Defined in src/scripts/ui/bui.pickerdate.js:7

Parameters:

option Object
- id String
  
  [ 日期生成的容器, 同时需要设置 popup:false ]
- [uid] String optional
  
  1.6.6新增，实例的自定义唯一名字，用于命令式调用
- [handleParent] Boolean optional
  
  1.6.2新增, 如果这组日期是动态创建的dom, 可以设置已知的父级容器
- [handle] Boolean optional
  
  触发弹窗的选择器, 1.5.3支持样式选择器,多个日期,只需要初始化一个
- [bindValue] Boolean optional
  
  1.5.3 新增, 默认:false|true, 修改的值会自动绑定到 handle, 不再需要自己去绑定
- [popup] Boolean optional
  
  是否弹出窗口默认 true || false
- [mask] Boolean optional
  
  是否显示遮罩默认 true || false
- [zIndex] Number optional
  
  层级默认 110
- buttons Array
  
  since 1.3.0 如果buttons是一个数组,则底部会增加相应的按钮格式为 ["确定","取消"] || [{name:"确定",className:"primary"}]
- [value] String optional
  
  初始化第一个日期,日期格式 2015/8/10 9:00
- [min] String | Date optional
  
  最小日期,日期格式 2015/8/10 9:00, 不能传 new Date()
- [max] String | Date optional
  
  最大日期,日期格式 2015/8/10 9:00, 不能传 new Date()
- [formatValue] Function optional
  
  since 1.3.0 显示的日期格式, 默认: yyyy-MM-dd hh:mm:ss
- [cols] Object optional
  
  分栏
  - year Object | "none"
    不需要某栏,设置为 "none" 格式: { values: [],displayValues:[] }
  - month Object | "none"
    不需要某栏,设置为 "none" 格式: { values: [],displayValues:[] }
  - date Object | "none"
    不需要某栏,设置为 "none" 格式: { values: [],displayValues:[] }
  - hour Object | "none"
    不需要某栏,设置为 "none" 格式: { values: [],displayValues:[] }
  - minute Object | "none"
    不需要某栏,设置为 "none" 格式: { values: [],displayValues:[] }
  - second Object | "none"
    不需要某栏,设置为 "none" 格式: { values: [],displayValues:[] }
- [appendTo] String | Object optional
  
  1.4.3新增默认:"body",添加到哪里去,主要配合单页使用
- [onBeforeInit] Function optional
  
  1.5.1新增初始化前触发
- [onInited] Function optional
  
  1.5.1新增初始化以后触发
- [rotateEffect] Boolean optional
  
  是否开启3D效果,默认:false
- [autoClose] Boolean optional
  
  自动关闭,默认:true | false
- [onChange] Function optional
  
  改变回调
- [callback] Function optional
  
  点击按钮的回调
- [onChanged] Function optional
  
  1.7新增，结束后触发，这里才能获取到values的值

Example:

       // 1. 简单初始化
                                           //1.5.3 新增 bindValue, 设置 true, 会自动把值绑定到指定的handle.
                                    
                                           var uiPickerdate = bui.pickerdate({
                                               handle:"#datepicker_input",
                                               bindValue: true,
                                               formatValue: "yyyy-MM-dd hh:mm",
                                               callback: function(e) {
                                                   if( e.taret.innerText === "确定"){
                                                       console.log(this.value())
                                                   }
                                               },
                                           });

Index
Methods
Events

Item Index

Methods

checkValue
close
cols
destroy
disabled
empty
enabled
formatDate
formatValue
isOpen
max
min
modifyTitle
onChange
open
reset
triggerInput
value
values
widget

Events

Methods

`checkValue`

(

[startId]
[endId]

)

Boolean

Defined in src/scripts/ui/bui.pickerdate.js:599

Available since 1.7.0

检测开始时间与结束时间，传input的id值进行检测

Parameters:

[startId] String optional

例如："start"
[endId] String optional

例如："end"

Returns:

Boolean:

默认返回 true,如果开始时间比结束时间大，则返回false

Example:

           <input id="start" class="pickerdate" value=""/>
                                                           <input id="end" class="pickerdate" value=""/>
                                                
                                                           let canSetting = uiPickerdate.checkValue();

`close`

() chainable

Defined in src/scripts/ui/bui.pickerdate.js:1218

Available since 1.5.3

关闭窗口

Example:

           uiPickerdate.close();

`cols`

(

cols

)

Defined in src/scripts/ui/bui.pickerdate.js:339

设置分栏

Parameters:

cols Object

[ {} ]
- year Object
  
  [ 'none' || 年份 ]
  - values Array
    [ 年份的值 ]
  - displayValues Array
    [ 年份的值对应的文本 ]
- month Object
  
  [ 'none' || 月份 ]
  - values Array
    [ 月份的值 ]
  - displayValues Array
    [ 月份的值对应的文本 ]
- date Object
  
  [ 'none' || 日 ]
  - values Array
    [ 日 ]
  - displayValues Array
    [ 日对应的文本 ]
- hour Object
  
  [ 'none' || 时 ]
  - values Array
    [ 时 ]
  - displayValues Array
    [ 时对应的文本 ]
- minute Object
  
  [ 'none' || 分 ]
  - values Array
    [ 分 ]
  - displayValues Array
    [ 分对应的文本 ]
- second Object
  
  [ 'none' || 秒 ]
  - values Array
    [ 秒 ]
  - displayValues Array
    [ 秒对应的文本 ]

Example:

           //设置分栏
                                                           uiPickerdate.cols({
                                                               year: {
                                                                   values: [2013, 2014, 2015],
                                                               },
                                                               hour: {
                                                                   values: [8, 9, 10, 11, 13, 14, 15, 16, 17]
                                                               },
                                                               minute: {
                                                                   values: [0, 30],
                                                                   displayValues: ['00', '30']
                                                               },
                                                               second: 'none'
                                                           });

`destroy`

(

[bool]

)

Defined in src/scripts/ui/bui.pickerdate.js:1289

Available since 1.4.2

[销毁控件]

Parameters:

[bool] Boolean optional

默认: false 销毁部分 | true 销毁全部

Example:

           //销毁
                                                           uiPickerdate.destroy();

`disabled`

() chainable

Defined in src/scripts/ui/bui.pickerdate.js:1167

Available since 1.4

阻止触发

Example:

           uiPickerdate.disabled();

`empty`

()

Defined in src/scripts/ui/bui.pickerdate.js:472

Available since 1.5.6

清空值,必须在控件初始化以后再执行.

Example:

           //
                                                           uiPickedate.empty();

`enabled`

() chainable

Defined in src/scripts/ui/bui.pickerdate.js:1272

Available since 1.4

允许触发

Example:

           uiPickerdate.enabled();

`formatDate`

(

[date]
[pattern]

)

Defined in src/scripts/ui/bui.pickerdate.js:758

格式化后回调

Parameters:

[date] String optional

"2019-11-01"
[pattern] String optional

"yyyy-MM-dd hh:00:00"

Example:

           //设置某个日期
                                                           uiPickedate.formatDate("yyyy-MM-dd hh:00:00");

`formatValue`

(

[str]

)

Defined in src/scripts/ui/bui.pickerdate.js:696

格式化后回调

Parameters:

[str] String optional

"yyyy-MM-dd hh:00:00"

Example:

           //设置某个日期
                                                           uiPickedate.formatValue("yyyy-MM-dd hh:00:00");

`isOpen`

() chainable

Defined in src/scripts/ui/bui.pickerdate.js:1202

Available since 1.5.3

是否打开状态

Example:

           uiPickerdate.isOpen();

`max`

(

[max]

)

Defined in src/scripts/ui/bui.pickerdate.js:507

设置最大日期

Parameters:

[max] String optional

默认最大日期:'2030/01/01 00:00:00'

Example:

           //设置最大日期
                                                           uiPickedate.max('2030/01/01 00:00:00');

`min`

(

[min]

)

Defined in src/scripts/ui/bui.pickerdate.js:490

设置最小日期

Parameters:

[min] String optional

默认最小日期:'1960/01/01 00:00:00'

Example:

           //设置最小日期
                                                           uiPickedate.min('1960/01/01 00:00:00');

`modifyTitle`

(

content

)

chainable

Defined in src/scripts/ui/bui.pickerdate.js:1253

Available since 1.5.6

修改标题文本, 只有刚开始标题有内容才可以修改

Parameters:

content String

[文本]

Example:

           uiPickerdate.modifyTitle("标题名称");

`onChange`

(

[callback]

)

Defined in src/scripts/ui/bui.pickerdate.js:796

日期改变的回调

Parameters:

[callback] Function optional

日期改变实时监听回调

Example:

           //设置某个日期
                                                           uiPickedate.onChange(function(value) {
                                                               // body...
                                                           });

`open`

() chainable

Defined in src/scripts/ui/bui.pickerdate.js:1185

Available since 1.5.3

打开窗口

Example:

           uiPickerdate.open();

`reset`

()

Defined in src/scripts/ui/bui.pickerdate.js:453

重新渲染

Example:

           //重置
                                                           uiPickedate.reset();

`triggerInput`

(

ev

)

chainable

Defined in src/scripts/ui/bui.pickerdate.js:1236

Available since 1.7.0

手动触发事件变更，如果设置onMask 点击遮罩关闭的时候，可以手动触发这个change事件

Parameters:

ev String

[ input | change ]

Example:

           uiPickerdate.triggerInput("input");

`value`

(

[date]

)

Defined in src/scripts/ui/bui.pickerdate.js:526

设置某个日期

Parameters:

[date] String optional

日期格式:'2030/01/01 00:00:00'

Example:

           //设置某个日期
                                                           uiPickedate.value('2016/07/01 00:00:00');

`values`

(

[date] [{id:"#start",value:'2016/07/01 00:00:00'}]

)

Defined in src/scripts/ui/bui.pickerdate.js:554

Available since 1.6.4

设置获取多个日期

Parameters:

[date] [{id:"#start",value:'2016/07/01 00:00:00'}] Array optional

Example:

           //获取多个日期
                                                           var dates = uiPickedate.values();
                                                           // [{id:"#start",value:'2016/07/01 00:00:00',name:"meeting"}]
                                                           
                                                           //设置多个日期
                                                           uiPickedate.values([{id:"#start",value:'2016/07/01 00:00:00'}]);

`widget`

(

[name]

)

Defined in src/scripts/ui/bui.pickerdate.js:1311

获取依赖的控件

Parameters:

[name] String optional

依赖控件名 dialog

Example:

           //获取依赖控件
                                                           var uiPickerdateWidget = uiPickerdate.widget();

Events

`off`

Defined in src/scripts/ui/bui.pickerdate.js:1349

Available since 1.3.0

为控件取消绑定事件

Event Payload:

[type] String optional

事件类型: "change"(日期改变的时候) | "show"(日期展示的时候)| "hide"(日期隐藏的时候)
[callback] Function optional

绑定的事件, this 为当前点击的菜单

Example:

           uiPickerdate.off("show");

`on`

Defined in src/scripts/ui/bui.pickerdate.js:1329

Available since 1.3.0

为控件绑定事件

Event Payload:

[type] String optional

事件类型: "change"(日期改变的时候) | "show"(日期展示的时候)| "hide"(日期隐藏的时候)
[callback] Function optional

绑定的事件, this 为当前点击的菜单

Example:

           uiPickerdate.on("show",function () {
                                                               // 点击的菜单
                                                               console.log(this);
                                                           });

BUI

bui.pickerdate Class

日期选择器

预览地址: demo

方法说明:

Constructor

bui.pickerdate

Parameters:

Example:

Item Index

Methods

Events

Methods

checkValue

Parameters:

Returns:

Example:

close

Example:

cols

Parameters:

Example:

destroy

Parameters:

Example:

disabled

Example:

empty

Example:

enabled

Example:

formatDate

Parameters:

Example:

formatValue

Parameters:

Example:

isOpen

Example:

max

Parameters:

Example:

min

Parameters:

Example:

modifyTitle

Parameters:

Example:

onChange

Parameters:

Example:

open

Example:

reset

Example:

triggerInput

Parameters:

Example:

value

Parameters:

Example:

values

Parameters:

Example:

widget

Parameters:

Example:

Events

off

Event Payload:

Example:

on

Event Payload:

Example:

`bui.pickerdate`

`checkValue`

`close`

`cols`

`destroy`

`disabled`

`empty`

`enabled`

`formatDate`

`formatValue`

`isOpen`

`max`

`min`

`modifyTitle`

`onChange`

`open`

`reset`

`triggerInput`

`value`

`values`

`widget`

`off`

`on`