BUI

其它版本:

API for BUI 1.5.4

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 ]

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

    • [buttons] Array optional

      [ 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

关闭窗口

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

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

           //销毁
           uiPickerdate.destroy();

disabled

() chainable

阻止触发

Example:

           uiPickerdate.disabled();

enabled

() chainable

允许触发

Example:

           uiPickerdate.enabled();

formatValue

(
  • [str]
)

格式化后回调

Parameters:

  • [str] String optional

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

Example:

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

isOpen

() chainable

是否打开状态

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

onChange

(
  • [callback]
)

日期改变的回调

Parameters:

  • [callback] Function optional

    [ 日期改变实时监听回调 ]

Example:

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

open

() chainable

打开窗口

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

为控件取消绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

           uiPickerdate.off("show");

on

为控件绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

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