`
conkeyn
  • 浏览: 1522706 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

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

阅读更多

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

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

 

/**
 * 使用示例:
 * <p>
 *     <ul>
 *         <li> 基本日期选择:<input type="text"  lay-date-picker="" ng-model="date" placeholder="日期"/>
 *         <li> 带有日期范围选择:<input type="text"  lay-date-picker="" range="true" ng-model="daterange" placeholder="日期范围"/>
 *         <li> 带有日期范围选择,并自定范围符号:<input type="text"  lay-date-picker="" range="→" ng-model="daterange" placeholder="日期范围"/>
 *         <li> 时间选择:<input type="text"  lay-date-picker="" range="true" ng-model="daterange" placeholder="时间"/>
 *         <li> 时间范围选择:<input type="text"  lay-date-picker="" range="true" date-type="time" ng-model="daterange" placeholder="时间范围"/>
 *         <li> 日期时间范围选择:<input type="text"  lay-date-picker="" range="true" date-type="datetime" ng-model="daterange" placeholder="日期时间范围"/>
 * </p>
 */
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
分享到:
评论

相关推荐

    Angularjs中使用layDate日期控件示例

    前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的。后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件。 解决思路:将layDate的初始化及...

    layDate日期控件使用方法详解

    在详细讲解layDate日期控件使用方法之前,首先我们需要了解,layDate是一个基于Layui框架开发的日期时间选择插件,它具有轻量、易用、丰富的API接口等特点,非常适合在Web前端开发中使用,以提高用户在表单填写或者...

    layDate多款日期时间控件

    layDate是一款功能强大的JavaScript日期时间插件,广泛应用于网页中的日期和时间选择。这款控件设计简洁、易用,提供了多种样式和模式,满足不同场景下的需求。在本篇文章中,我们将深入探讨layDate的基本使用、主要...

    laydate日历插件

    2. 在弹窗中使用layDate:利用layui的layer模块,可以在弹出窗口中添加layDate,实现日期选择功能。 3. 日程管理应用:结合layDate的事件回调,可以开发出日程提醒、日程管理等功能。 总结,layDate凭借其简洁的API...

    laydate时间控件及触发时间校验事件

    laydate是一款广泛应用于前端开发中的JavaScript日期时间插件,它提供了丰富的配置选项和灵活的API接口,使得在网页中添加日期、时间选择功能变得简单易行。本篇将深入探讨laydate时间控件的使用方法以及如何触发...

    layDate 时间控件

    layDate是一款广泛应用于Web开发中的JavaScript时间控件,它的出现极大地简化了网页中日期和时间选择的功能实现。layDate以其丰富的功能、良好的兼容性以及高度的可定制性,深受前端开发者的喜爱。以下是对layDate...

    layui-laydate时间日历控件使用方法详解

    1. **在layui模块中使用laydate**: 在layui框架内使用laydate,需要先引入layui.css和layui.js文件。然后通过`layui.use('laydate', function() {...})`来加载laydate模块,并在回调函数中进行初始化。例如: ```...

    aspnet.webforms-angularjs:带有Angularjs 1.x的Asp.Net Webforms

    在【压缩包子文件的文件名称列表】中,"aspnet.webforms-angularjs-master"可能包含项目源代码、示例、文档等资源,帮助开发者了解和学习如何在Asp.Net Webforms中集成和使用AngularJS 1.x。通常,这样的项目文件...

    解决在layer.open中使用时间控件laydate失败的问题

    总的来说,解决在layer.open中使用laydate失败的问题,关键在于正确传递内容和设置弹层类型。通过理解layer.open的工作原理和laydate的初始化方式,我们可以顺利地在弹窗中集成日期选择功能,提升用户体验。同时,...

    解决layui laydate 时间控件一闪而过的问题

    问题:一个页面多次重载时间控件,并且都是不同页面,会导致时间控件绑定...以上这篇解决layui laydate 时间控件一闪而过的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

    laydate.js日期控件

    laydate.js是一款流行的JavaScript日期选择器插件,它在网页开发中被广泛用于处理与日期相关的交互。这个插件以其轻量级、易用性和高度可定制性而受到开发者们的青睐。下面将详细介绍laydate.js的主要特点、使用方法...

    AngularJS-FlowChart, 可视化和编辑流程图的示例/模板WebUI控件.zip

    AngularJS-FlowChart, 可视化和编辑流程图的示例/模板WebUI控件 angularjs流程图用于可视化和编辑流程图的WebUI控件。虽然这不是完全通用的,但是如果你需要使用SVG流程图并且愿意使用 AngularJS,那么它将是一个很...

    js layDate日历控件代码.zip

    在前端开发中,日历控件是一种常见的交互元素,用于选择日期或设定日期范围。layDate是一款基于JavaScript的轻量级日历插件,它提供了丰富的功能和自定义选项,适用于各种Web项目。本篇文章将深入解析js layDate日历...

    laydate日期控件

    她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封闭与狭隘。layDate本着资源共享的开发者精神和对网页日历交互无穷的追求,延续了...

    laydate独立版日期控件源码及demo.zip

    在layui官方文档中,你可以找到更多layDate的方法和选项,如`laydate.render()`用于初始化日期控件,`laydate.config()`用于全局配置,以及`laydate.parse()`和`laydate.format()`用于日期解析和格式化等。...

    angularjs-code.zip

    下面我们将深入探讨AngularJS 1.x中的核心概念和重要知识点。 ### 1. 双向数据绑定 AngularJS的核心特性之一就是双向数据绑定,它将视图和模型紧密联系在一起。当模型发生变化时,视图会自动更新;反之,用户在...

    angularjs ui-grid datepicker 日期控件

    而“angularjs ui-grid datepicker”则是UI-Grid的一个扩展功能,它为表格中的日期字段提供了集成的日期选择器,提高了用户交互性和数据输入的便利性。下面将详细介绍这个功能及其相关知识点。 1. **AngularJS**: ...

    angularjs与openlayers3自定义控件

    在本文中,我们将深入探讨如何将AngularJS与OpenLayers 3结合使用,特别是在创建自定义控件方面。AngularJS是一个强大的前端JavaScript框架,用于构建单页应用(SPA),而OpenLayers 3则是一个广泛使用的开源...

    laydate网页日期控件 v5.0.6.zip

    你是时候换一款日期控件了,而layDate非常愿意和您成为工作伙伴。她正致力于成为全球最高大上的web日期支撑,为国内外所有从事web应用开发的同仁提供力所能及的动力。她基于原生JavaScript精心雕琢,兼容了包括IE6...

Global site tag (gtag.js) - Google Analytics