本文参照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
相关推荐
### AngularJS1.x快速入门知识点总结 #### 一、AngularJS概述 - **定义**:AngularJS是一款由Google维护的开源JavaScript框架,主要用于构建动态Web应用程序。它采用MVC(Model-View-Controller)设计模式,并实现...
前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的。后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件。 解决思路:将layDate的初始化及...
在详细讲解layDate日期控件使用方法之前,首先我们需要了解,layDate是一个基于Layui框架开发的日期时间选择插件,它具有轻量、易用、丰富的API接口等特点,非常适合在Web前端开发中使用,以提高用户在表单填写或者...
layDate是一款功能强大的JavaScript日期时间插件,广泛应用于网页中的日期和时间选择。这款控件设计简洁、易用,提供了多种样式和模式,满足不同场景下的需求。在本篇文章中,我们将深入探讨layDate的基本使用、主要...
2. 在弹窗中使用layDate:利用layui的layer模块,可以在弹出窗口中添加layDate,实现日期选择功能。 3. 日程管理应用:结合layDate的事件回调,可以开发出日程提醒、日程管理等功能。 总结,layDate凭借其简洁的API...
laydate是一款广泛应用于前端开发中的JavaScript日期时间插件,它提供了丰富的配置选项和灵活的API接口,使得在网页中添加日期、时间选择功能变得简单易行。本篇将深入探讨laydate时间控件的使用方法以及如何触发...
layDate是一款广泛应用于Web开发中的JavaScript时间控件,它的出现极大地简化了网页中日期和时间选择的功能实现。layDate以其丰富的功能、良好的兼容性以及高度的可定制性,深受前端开发者的喜爱。以下是对layDate...
1. **在layui模块中使用laydate**: 在layui框架内使用laydate,需要先引入layui.css和layui.js文件。然后通过`layui.use('laydate', function() {...})`来加载laydate模块,并在回调函数中进行初始化。例如: ```...
在【压缩包子文件的文件名称列表】中,"aspnet.webforms-angularjs-master"可能包含项目源代码、示例、文档等资源,帮助开发者了解和学习如何在Asp.Net Webforms中集成和使用AngularJS 1.x。通常,这样的项目文件...
总的来说,解决在layer.open中使用laydate失败的问题,关键在于正确传递内容和设置弹层类型。通过理解layer.open的工作原理和laydate的初始化方式,我们可以顺利地在弹窗中集成日期选择功能,提升用户体验。同时,...
问题:一个页面多次重载时间控件,并且都是不同页面,会导致时间控件绑定...以上这篇解决layui laydate 时间控件一闪而过的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
laydate.js是一款流行的JavaScript日期选择器插件,它在网页开发中被广泛用于处理与日期相关的交互。这个插件以其轻量级、易用性和高度可定制性而受到开发者们的青睐。下面将详细介绍laydate.js的主要特点、使用方法...
AngularJS-FlowChart, 可视化和编辑流程图的示例/模板WebUI控件 angularjs流程图用于可视化和编辑流程图的WebUI控件。虽然这不是完全通用的,但是如果你需要使用SVG流程图并且愿意使用 AngularJS,那么它将是一个很...
在前端开发中,日历控件是一种常见的交互元素,用于选择日期或设定日期范围。layDate是一款基于JavaScript的轻量级日历插件,它提供了丰富的功能和自定义选项,适用于各种Web项目。本篇文章将深入解析js layDate日历...
她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封闭与狭隘。layDate本着资源共享的开发者精神和对网页日历交互无穷的追求,延续了...
至于icon.png,这可能是日期控件中使用的图标资源。在laydate的默认样式中,一些操作按钮(如“清除”、“确定”等)通常会用到图标。开发者可能根据天蓝色主题的需求,自定义了这些图标,使得它们与新的皮肤风格...
在layui官方文档中,你可以找到更多layDate的方法和选项,如`laydate.render()`用于初始化日期控件,`laydate.config()`用于全局配置,以及`laydate.parse()`和`laydate.format()`用于日期解析和格式化等。...
下面我们将深入探讨AngularJS 1.x中的核心概念和重要知识点。 ### 1. 双向数据绑定 AngularJS的核心特性之一就是双向数据绑定,它将视图和模型紧密联系在一起。当模型发生变化时,视图会自动更新;反之,用户在...
而“angularjs ui-grid datepicker”则是UI-Grid的一个扩展功能,它为表格中的日期字段提供了集成的日期选择器,提高了用户交互性和数据输入的便利性。下面将详细介绍这个功能及其相关知识点。 1. **AngularJS**: ...