Angularjs 1.x 中使用 layDate 日期控件

阅读更多

本文参照Angularjs 中使用 layDate 日期控件进行修改。

laydate控件版本采用5.0.7，下载地址github。原版的package.json文件好像是有编码问题。需要将该文件转到utf-8格式的。

 

/**
 * 使用示例：
 * 

 *     

 *         
 基本日期选择:
 *         
 带有日期范围选择:
 *         
 带有日期范围选择，并自定范围符号:
 *         
 时间选择:
 *         
 时间范围选择:
 *         
 日期时间范围选择:
 * 

 */
class LayDatePicker {
    constructor() {
        this.require= '?ngModel';
        this.restrict = "A";
        this.scope={
            ngModel: '=',
            max:'@',
            min:'@',
            //开启日期范围选择功能，并定义分隔符。
            //true //或 range: '~' 来自定义分割字符
            range:'@',
            //值：year、month、time、datetime、date
            //默为，date
            dateType:'@',
            format:"@"
        }
        this.link=function(scope, element, attr, ngModel) {
            var _date = null,_config={};
            // 初始化参数
            _config = {
                elem: element[0],
                //通过laydate的done回调函数重新设置ngModel的值
                done: function(value, date, endDate){
                    scope.$apply(setViewValue(value));
                    // console.log("done: "+value); //得到日期生成的值，如：2017-08-18
                    // console.log("done: "+date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    // console.log("done: "+endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                }
            };

            // 监听日期类型
            if(attr.hasOwnProperty('dateType') && attr.dateType ){
                _config.type=attr.hasOwnProperty('dateType') && attr.dateType ?attr.dateType:'';
                attr.$observe('dateType', function (val) {
                    _config.type = val;
                })
            }

            // 监听格式
            if(attr.hasOwnProperty('format') && attr.format ){
                _config.format=attr.hasOwnProperty('format') && attr.format ?attr.format:'';
                attr.$observe('format', function (val) {
                    _config.format = val;
                })
            }

            // 监听日期最大值
            if(attr.hasOwnProperty('max') && attr.max ){
                _config.max=attr.hasOwnProperty('max') && attr.max ?attr.max:'';
                attr.$observe('max', function (val) {
                    _config.max = val;
                })
            }

            // 监听日期最小值
            if(attr.hasOwnProperty('min') && attr.min ){
                _config.min= attr.hasOwnProperty('min')&& attr.min ?attr.min:'',
                attr.$observe('min', function (val) {
                    _config.min = val;
                })
            }
            // 监听是否开启日期范围选择功能
            if(attr.hasOwnProperty('range') && attr.range ){
                setDateRange(_config,attr);
                attr.$observe('range', function (val) {
                    setDateRange(_config,attr);
                    // 重新渲染日期窗口
                    _date= laydate.render(_config);
                })
            }

            function setDateRange(_config,attr) {
                var tmpRangeValue = attr.hasOwnProperty('range') && attr.range ?attr.range:'';
                if(tmpRangeValue && tmpRangeValue!==false && tmpRangeValue!=="false"){
                    if(tmpRangeValue=="true" || tmpRangeValue==true){
                        _config.range=true ;
                    }else{
                        _config.range=tmpRangeValue ;
                    }
                }
            }
            // 渲染日期窗口
            _date= laydate.render(_config);

            // 模型值同步到视图上
            ngModel.$render = function() {
                element.val(ngModel.$viewValue || '');
            };

            //初始化ngModel的默认值
            setViewValue("");

            // 更新模型上的视图值
            function setViewValue(value) {
                ngModel.$setViewValue(value);
            }
        }
    }

}

LayDatePicker.$inject = [];
export default LayDatePicker;

 要让日期选择器作为一个模块使用还需要将放到一个目录中，并定义index.js文件。

以下是index.js文件

import LayDatePicker from "./datepicker";

export default  angular.module("app.directives.layDatePicker",[])
//因为指令是使用fn加返回json对象的。因为我们构造出一个匿名函数并返回LotteryHistory类的实例。
                    .directive("layDatePicker",()=>new LayDatePicker())
                    .name;

 

 

d

• 
• 大小: 67.9 KB

• 查看图片附件