Skip to content

Commit 1996e11

Browse files
pavelpykhtinassisrafael
authored andcommitted
feat(uiDateMask): enable custom date masks and support for non-Date models (#244)
* feat (uiDateMask): enable explicitly specified date masks * feat (uiDateMask): enable passing inputed values to the model without parsing * fix (uiDateMask): fix broken tests
1 parent 4b05575 commit 1996e11

File tree

4 files changed

+52
-8
lines changed

4 files changed

+52
-8
lines changed

README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,21 @@ Some masks are internationalized, so you need to include the proper angular-loca
192192
```html
193193
<input type="text" name="field" ng-model="initializeTime" ui-time-mask="short">
194194
```
195+
196+
### ui-time-date ###
197+
-Example:
198+
199+
```html
200+
<input type="text" name="field" ng-model="birthDate" ui-date-mask>
201+
```
202+
- Support to the custom date masks (See moment.js date formats).
203+
```html
204+
<input type="text" name="field" ng-model="birthDate" ui-time-mask="DD-MM-YYYY">
205+
```
206+
- Support to ```parse``` attribute. When the attribute is set to ```false```, the inputed value will be passed to the model as a string. Default value of the attribute is ```true```.
207+
```html
208+
<input type="text" name="field" ng-model="birthDate" ui-time-mask parse="false">
209+
```
195210
### More examples ###
196211

197212
_See more usage examples in the [Demo page](http://assisrafael.github.io/angular-input-masks/)_

src/global/date/date.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ function DateMaskDirective($locale) {
2020
restrict: 'A',
2121
require: 'ngModel',
2222
link: function(scope, element, attrs, ctrl) {
23+
attrs.parse = attrs.parse || 'true';
24+
25+
dateFormat = attrs.uiDateMask || dateFormat;
26+
2327
var dateMask = new StringMask(dateFormat.replace(/[YMD]/g,'0'));
2428

2529
function formatter(value) {
@@ -52,7 +56,9 @@ function DateMaskDirective($locale) {
5256
ctrl.$render();
5357
}
5458

55-
return moment(formatedValue, dateFormat).toDate();
59+
return attrs.parse === 'false'
60+
? formatedValue
61+
: moment(formatedValue, dateFormat).toDate();
5662
});
5763

5864
ctrl.$validators.date = function validator(modelValue, viewValue) {

src/global/date/date.spec.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@ describe('ui.utils.masks.date', function() {
2727
expect(input.getAttribute('value')).toEqual(formatedDateAsString);
2828
}
2929

30-
expect(value.getText()).toEqual(moment(formatedDateAsString, 'YYYY-MM-DD').toDate().toString());
30+
expect(value.evaluate('dateMask.toString()')).toEqual(moment(formatedDateAsString, 'YYYY-MM-DD').toDate().toString());
3131

3232
for (i = 7; i >= 0; i--) {
3333
input.sendKeys(protractor.Key.BACK_SPACE);
3434
numberToFormat = numberToFormat.slice(0, -1);
3535
if (numberToFormat) {
36-
formatedDateAsString = dateFormatter.apply(numberToFormat).replace(/-$/,'');
36+
formatedDateAsString = dateFormatter.apply(numberToFormat).replace(/-$/, '');
3737
expect(input.getAttribute('value')).toEqual(formatedDateAsString);
3838
}
3939
}
@@ -43,8 +43,8 @@ describe('ui.utils.masks.date', function() {
4343
var input = element(by.model('initializedDateMask')),
4444
value = element(by.exactBinding('initializedDateMask'));
4545

46-
value.getText().then((textValue) => {
47-
var dateValue = moment(new Date(textValue)).format('YYYY-MM-DD');
46+
value.evaluate('initializedDateMask').then((initialValue) => {
47+
var dateValue = moment(initialValue).format('YYYY-MM-DD');
4848
expect(input.getAttribute('value')).toEqual(dateValue);
4949
});
5050
});
@@ -108,7 +108,7 @@ describe('ui.utils.masks.date', function() {
108108
expect(input.getAttribute('value')).toEqual(formatedDateAsString);
109109
}
110110

111-
expect(value.getText()).toEqual(moment(formatedDateAsString, 'DD/MM/YYYY').toDate().toString());
111+
expect(value.evaluate('dateMask.toString()')).toEqual(moment(formatedDateAsString, 'DD/MM/YYYY').toDate().toString());
112112

113113
for (i = 7; i >= 0; i--) {
114114
input.sendKeys(protractor.Key.BACK_SPACE);
@@ -124,8 +124,8 @@ describe('ui.utils.masks.date', function() {
124124
var input = element(by.model('initializedDateMask')),
125125
value = element(by.exactBinding('initializedDateMask'));
126126

127-
value.getText().then((textValue) => {
128-
var dateValue = moment(new Date(textValue)).format('DD/MM/YYYY');
127+
value.evaluate('initializedDateMask').then((initialValue) => {
128+
var dateValue = moment(initialValue).format('DD/MM/YYYY');
129129
expect(input.getAttribute('value')).toEqual(dateValue);
130130
});
131131
});

src/global/date/date.test.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,15 @@ describe('ui-date-mask', function() {
3131
expect(model.$viewValue).toBe('1999-12-31');
3232
});
3333

34+
it('should use specified mask', function() {
35+
var input = TestUtil.compile('<input ng-model="model" ui-date-mask="DD.MM.YYYY">', {
36+
model: new Date('1999-12-31 00:00:00')
37+
});
38+
39+
var model = input.controller('ngModel');
40+
expect(model.$viewValue).toBe('31.12.1999');
41+
});
42+
3443
it('should ignore non digits', function() {
3544
var input = TestUtil.compile('<input ng-model="model" ui-date-mask>');
3645
var model = input.controller('ngModel');
@@ -50,6 +59,20 @@ describe('ui-date-mask', function() {
5059
});
5160
});
5261

62+
it('should parse input', angular.mock.inject(function($rootScope) {
63+
var input = TestUtil.compile('<input ng-model="model" ui-date-mask>');
64+
65+
input.val('1999-12-31').triggerHandler('input');
66+
expect($rootScope.model instanceof Date).toBe(true);
67+
}));
68+
69+
it('should not parse input when parse disabled', angular.mock.inject(function($rootScope) {
70+
var input = TestUtil.compile('<input ng-model="model" ui-date-mask parse="false">');
71+
72+
input.val('1999-12-31').triggerHandler('input');
73+
expect(typeof ($rootScope.model) === 'string').toBe(true);
74+
}));
75+
5376
it('should handle corner cases', angular.mock.inject(function($rootScope) {
5477
var input = TestUtil.compile('<input ng-model="model" ui-date-mask>');
5578
var model = input.controller('ngModel');

0 commit comments

Comments
 (0)