BUI

其它版本:

API for BUI 1.6.x

Show:

bui.pickerdate Class

日期选择器

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

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

预览地址: demo

方法说明:

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

Constructor

bui.pickerdate

(
  • option
)

Parameters:

  • option Object
    • id String

      [ 日期生成的容器, 同时需要设置 popup:false ]

    • [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

    • [onChange] Function optional

      回调

    • [callback] Function optional

      点击确定的回调

Example:

       // 1. 简单初始化
                                           //1.5.3 新增 bindValue, 设置 true, 会自动把值绑定到指定的handle.
                                    
                                           var uiPickerdate = bui.pickerdate({
                                               handle:"#datepicker_input",
                                               bindValue: true,
                                               onChange: function(value) {
                                                   console.log(value);
                                               }
                                           });
                                    
                                       // 2. 分离式初始化: 需要自己指定value设置到哪里.
                                           var input = $("#datepicker_input");
                                           var uiPickerdate = bui.pickerdate({
                                               handle:"#datepicker_input",
                                               onChange: function(value) {
                                                   input.val(value);
                                               }
                                           });
                                    

Methods

close

() chainable

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

Available since 1.5.3

关闭窗口

Example:

           uiPickerdate.close();
                                                

cols

(
  • cols
)

设置分栏

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:1040

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

           //销毁
                                                           uiPickerdate.destroy();
                                                

disabled

() chainable

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

Available since 1.4

阻止触发

Example:

           uiPickerdate.disabled();
                                                

empty

()

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

Available since 1.5.6

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

Example:

           //
                                                           uiPickedate.empty();
                                                

enabled

() chainable

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

Available since 1.4

允许触发

Example:

           uiPickerdate.enabled();
                                                

formatDate

(
  • [date]
  • [pattern]
)

格式化后回调

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]
)

格式化后回调

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:970

Available since 1.5.3

是否打开状态

Example:

           uiPickerdate.isOpen();
                                                

max

(
  • [max]
)

设置最大日期

Parameters:

  • [max] String optional

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

Example:

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

min

(
  • [min]
)

设置最小日期

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:1004

Available since 1.5.6

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

Parameters:

  • content String

    [文本]

Example:

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

onChange

(
  • [callback]
)

日期改变的回调

Parameters:

  • [callback] Function optional

    日期改变实时监听回调

Example:

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

open

() chainable

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

Available since 1.5.3

打开窗口

Example:

           uiPickerdate.open();
                                                

reset

()

重新渲染

Example:

           //重置
                                                           uiPickedate.reset();
                                                

value

(
  • [date]
)

设置某个日期

Parameters:

  • [date] String optional

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

Example:

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

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名 dialog

Example:

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

Events

off

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

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:1080

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);
                                                           });