BUI

其它版本:

API for BUI 1.5.1

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 ]

    • popup Boolean

      [ 是否弹出窗口 默认 true || false ]

    • mask Boolean

      [ 是否显示遮罩 默认 true || false ]

    • buttons Array

      [ since 1.3.0 如果buttons是一个数组,则底部会增加相应的按钮 格式为 ["确定","取消"] || [{name:"确定",className:"primary"}] ]

    • value String

      [ 初始化第一个日期,日期格式 2015/8/10 9:00 ]

    • min String | Date

      [ 最小日期,日期格式 2015/8/10 9:00, 不能传 new Date() ]

    • max String | Date

      [ 最大日期,日期格式 2015/8/10 9:00, 不能传 new Date() ]

    • formatValue Function

      [ since 1.3.0 显示的日期格式, 默认: yyyy-MM-dd hh:mm:ss ]

    • cols Object

      [ 分栏 ]

      • 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

      [ 是否开启3D效果,默认:false ]

    • onChange Function

      [ 回调 ]

    • callback Function

      [ 点击确定的回调 ]

Example:

// 1. 无底部按钮初始化

   var input = $("#datepicker_input");
   var uiPickerdate = bui.pickerdate({
       handle:"#datepicker_input",
       value: '2015/8/10 9:00',
       min: '2014/4/5 9:00',
       max: '2016/4/5 10:00',
       onChange: function(value) {
           input.val(value);
       }
   });

// 2. 带底部按钮的初始化

   var datePrevVal;
   var input = $("#datepicker_input");
   var uiPickerdate = bui.pickerdate({
       // id: "#datepicker_contanier",
       handle:"#datepicker_input",
       value: '2015/8/10 9:00',
       onChange: function(value) {
           input.val(value);
       },
       // 如果需要按钮,需要自己写callback
       buttons: ["取消","确定"],
       callback: function (e) {
           // 取消返回上一个值
           if( $(e.target).text().trim() == "取消"){
               uiPickerdate.value(datePrevVal);
           }else{
               datePrevVal = uiPickerdate.value();
           }
       }
   });

   // 获取上一个值
   datePrevVal = uiPickerdate.value();

Methods

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

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

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