Angularjs uses the layDate date control example, angularjslaydate

Angularjs uses the layDate date control example, angularjslaydate

LayDate Control Address: http://laydate.layui.com/

Prerequisites: the date control used in the original system is in UI bootstrap (Address: https://angular-ui.github.io/bootstrap. Later, for various reasons, we had to replace the date control in UI bootstrap and use the layDate date control instead.

Solution: Initialize layDate and define related code in the command.

Key Aspect: layDate is used to operate Html elements. How to Implement bidirectional binding and synchronize Angularjs template values and Html element values.

Command code:

/*** Example ** <input def-laydate type = "text" id = "id1" ng-model = "startTime"/> */app. directive ('descdate', function () {return {require :'? Ngmodel', restrict: 'A', scope: {ngModel: '='}, link: function (scope, element, attr, ngModel) {var _ date = null, _ config = {}; // initialization parameter _ config = {elem: '#' + attr. id, format: attr. format! = Undefined & attr. format! = ''? Attr. format: 'yyyy-date ', max: attr. hasOwnProperty ('maxdate ')? Attr. maxDate: '', min: attr. hasOwnProperty ('mindate ')? Attr. minDate: '', choose: function (data) {scope. $ apply (setViewValue) ;}, clear: function () {ngModel. $ setViewValue (null) ;}}; // initialize _ date = laydate (_ config); // The model value is synchronized to ngModel on The View. $ render = function () {element. val (ngModel. $ viewValue | '') ;}; // event element on the listening element. on ('blur keyup change', function () {scope. $ apply (setViewValue) ;}); setViewValue (); // update the view value function setViewValue () {var val = element. val (); ngModel. $ setViewValue (val );}}}})

--- The preceding code example is <input def-laydate type = "text" id = "id1" ng-model = "startTime"/>.

Note:1. commands can only be used as element attributes. 2. The element must have a unique id attribute.

So far, the basic goal of laydate has been implemented in Angularjs. However, the date component will inevitably have requirements for the date selection range, such as the maximum and minimum values available for the date. The command is now optimized to meet the requirements:

App. directive ('descdate', function () {return {require :'? Ngmodel', restrict: 'A', scope: {ngModel: '=', maxDate: '@', minDate: '@'}, link: function (scope, element, attr, ngModel) {var _ date = null, _ config = {}; // initialization parameter _ config = {elem: '#' + attr. id, format: attr. format! = Undefined & attr. format! = ''? Attr. format: 'yyyy-date ', max: attr. hasOwnProperty ('maxdate ')? Attr. maxDate: '', min: attr. hasOwnProperty ('mindate ')? Attr. minDate: '', choose: function (data) {scope. $ apply (setViewValue) ;}, clear: function () {ngModel. $ setViewValue (null) ;}}; // initialize _ date = laydate (_ config); // listen to the maximum date if (attr. hasOwnProperty ('maxdate') {attr. $ observe ('maxdate', function (val) {_ config. max = val ;})} // the minimum value of the listening date if (attr. hasOwnProperty ('mindate') {attr. $ observe ('mindate', function (val) {_ config. min = val ;})} // The model value is synchronized to the ngModel on The View. $ render = function () {element. val (ngModel. $ viewValue | '') ;}; // event element on the listening element. on ('blur keyup change', function () {scope. $ apply (setViewValue) ;}); setViewValue (); // update the view value function setViewValue () {var val = element. val (); ngModel. $ setViewValue (val );}}}})

--- The preceding code example is <input def-laydate type = "text" id = "id1" ng-model = "startTime" max-date = "{model. max }}" min-date = "{model. min }}"/> min-date, max-date attribute added as needed.

This command can be used normally, but a problem occurs when used in combination with ngDialog: When layDate obtains an element by getElementById during initialization, the html content in the pop-up window has not been stored in the page's node tree, so an error is reported.

Therefore, we hope that the link code of the command can be executed after rendering in the pop-up window. After searching for information, $ timeout is introduced in the command:

App. directive ('ngclaydate', function ($ timeout) {return {require :'? Ngmodel', restrict: 'A', scope: {ngModel: '=', maxDate: '@', minDate: '@'}, link: function (scope, element, attr, ngModel) {var _ date = null, _ config = {}; // After the rendering template is complete, run $ timeout (function () {// initialization parameter _ config = {elem: '#' + attr. id, format: attr. format! = Undefined & attr. format! = ''? Attr. format: 'yyyy-date ', max: attr. hasOwnProperty ('maxdate ')? Attr. maxDate: '', min: attr. hasOwnProperty ('mindate ')? Attr. minDate: '', choose: function (data) {scope. $ apply (setViewValue) ;}, clear: function () {ngModel. $ setViewValue (null) ;}}; // initialize _ date = laydate (_ config); // listen to the maximum date if (attr. hasOwnProperty ('maxdate') {attr. $ observe ('maxdate', function (val) {_ config. max = val ;})} // the minimum value of the listening date if (attr. hasOwnProperty ('mindate') {attr. $ observe ('mindate', function (val) {_ config. min = val ;})} // The model value is synchronized to the ngModel on The View. $ render = function () {element. val (ngModel. $ viewValue | '') ;}; // event element on the listening element. on ('blur keyup change', function () {scope. $ apply (setViewValue) ;}); setViewValue (); // update the view value function setViewValue () {var val = element. val (); ngModel. $ setViewValue (val) ;}}, 0 );}};})

OK. Solve the problem. The process of solving the problem is accompanied by the Data Query Process, which is improved step by step. We also hope that you will avoid detours when encountering the same problem.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.