datapick - 日期选择控件

日历控件,用户选择时期时的控件,此控件是ui控件,已经生成了相关的html结构,只要传相关的clazz样式,对clazz下的样式进行调整就可以应用自己的样式需求

如:

日期选择控件

Allocate

ui datapick控件所在脚本 {lib}ui/datepick/datepick.js

页面结构如下: 添加标签切换控件依赖文件如下

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _u = _('nej.u'),
        _v = _('nej.v'),
        _tu = _('t.u'),
        _p = _('nej.ui');

     var _input = _e._$get('input');
     _v._$addEvent(_input,'click',onInputClick)

     function onInputClick(_event){
        _v._$stop(_event);//因为日历控件是卡片,在document上接收到click 事件都会回调到卡片,所以阻止掉事件
        var _datepick = _p._$$DatePick._$allocate({
                    parent: _input.parentNode,
                    clazz: 'm-dt',
                    onchange: onChange
                }); 
     }

    //选中时回调,把值设到input中
    function onChange(_value){
        _input.value = _u._$format(_value,'yyyy-MM-dd');
    }
}

Explain

参数

date 日历要选中默认的日期,如果没有传入选中的日期是当前日期

onchange 日期选中时回调,回调参参数是日期时间

range 日期可选范围 [0,0] - 全部日期可选【默认】

                    [0,new Date]   - 可选当前日期之前的

                    [new Date,0]   - 可选当前日期之后的

                    [new Date(1997,1,1),new Date(2000,1,1)]    可选指定范围的日期

更多的参数信息请参照datepick.js 和calendar.js api说明

Recycle

datepick.$recycle();

DatePick external interface

_$setDate(_data) 设置日历选中日期

_$getDate() 获取日历选中的日期

Known Issues

Demo

日期选择器控件Demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus