Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enabled custom date masks and support for non-Date models #244

Merged
merged 3 commits into from
Jan 24, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,21 @@ Some masks are internationalized, so you need to include the proper angular-loca
```html
<input type="text" name="field" ng-model="initializeTime" ui-time-mask="short">
```

### ui-time-date ###
-Example:

```html
<input type="text" name="field" ng-model="birthDate" ui-date-mask>
```
- Support to the custom date masks (See moment.js date formats).
```html
<input type="text" name="field" ng-model="birthDate" ui-time-mask="DD-MM-YYYY">
```
- 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```.
```html
<input type="text" name="field" ng-model="birthDate" ui-time-mask parse="false">
```
### More examples ###

_See more usage examples in the [Demo page](http://assisrafael.github.io/angular-input-masks/)_
Expand Down
8 changes: 7 additions & 1 deletion src/global/date/date.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ function DateMaskDirective($locale) {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
attrs.parse = attrs.parse || 'true';

dateFormat = attrs.uiDateMask || dateFormat;

var dateMask = new StringMask(dateFormat.replace(/[YMD]/g,'0'));

function formatter(value) {
Expand Down Expand Up @@ -52,7 +56,9 @@ function DateMaskDirective($locale) {
ctrl.$render();
}

return moment(formatedValue, dateFormat).toDate();
return attrs.parse === 'false'
? formatedValue
: moment(formatedValue, dateFormat).toDate();
});

ctrl.$validators.date = function validator(modelValue, viewValue) {
Expand Down
14 changes: 7 additions & 7 deletions src/global/date/date.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,13 @@ describe('ui.utils.masks.date', function() {
expect(input.getAttribute('value')).toEqual(formatedDateAsString);
}

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

for (i = 7; i >= 0; i--) {
input.sendKeys(protractor.Key.BACK_SPACE);
numberToFormat = numberToFormat.slice(0, -1);
if (numberToFormat) {
formatedDateAsString = dateFormatter.apply(numberToFormat).replace(/-$/,'');
formatedDateAsString = dateFormatter.apply(numberToFormat).replace(/-$/, '');
expect(input.getAttribute('value')).toEqual(formatedDateAsString);
}
}
Expand All @@ -43,8 +43,8 @@ describe('ui.utils.masks.date', function() {
var input = element(by.model('initializedDateMask')),
value = element(by.exactBinding('initializedDateMask'));

value.getText().then((textValue) => {
var dateValue = moment(new Date(textValue)).format('YYYY-MM-DD');
value.evaluate('initializedDateMask').then((initialValue) => {
var dateValue = moment(initialValue).format('YYYY-MM-DD');
expect(input.getAttribute('value')).toEqual(dateValue);
});
});
Expand Down Expand Up @@ -108,7 +108,7 @@ describe('ui.utils.masks.date', function() {
expect(input.getAttribute('value')).toEqual(formatedDateAsString);
}

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

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

value.getText().then((textValue) => {
var dateValue = moment(new Date(textValue)).format('DD/MM/YYYY');
value.evaluate('initializedDateMask').then((initialValue) => {
var dateValue = moment(initialValue).format('DD/MM/YYYY');
expect(input.getAttribute('value')).toEqual(dateValue);
});
});
Expand Down
23 changes: 23 additions & 0 deletions src/global/date/date.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,15 @@ describe('ui-date-mask', function() {
expect(model.$viewValue).toBe('1999-12-31');
});

it('should use specified mask', function() {
var input = TestUtil.compile('<input ng-model="model" ui-date-mask="DD.MM.YYYY">', {
model: new Date('1999-12-31 00:00:00')
});

var model = input.controller('ngModel');
expect(model.$viewValue).toBe('31.12.1999');
});

it('should ignore non digits', function() {
var input = TestUtil.compile('<input ng-model="model" ui-date-mask>');
var model = input.controller('ngModel');
Expand All @@ -50,6 +59,20 @@ describe('ui-date-mask', function() {
});
});

it('should parse input', angular.mock.inject(function($rootScope) {
var input = TestUtil.compile('<input ng-model="model" ui-date-mask>');

input.val('1999-12-31').triggerHandler('input');
expect($rootScope.model instanceof Date).toBe(true);
}));

it('should not parse input when parse disabled', angular.mock.inject(function($rootScope) {
var input = TestUtil.compile('<input ng-model="model" ui-date-mask parse="false">');

input.val('1999-12-31').triggerHandler('input');
expect(typeof ($rootScope.model) === 'string').toBe(true);
}));

it('should handle corner cases', angular.mock.inject(function($rootScope) {
var input = TestUtil.compile('<input ng-model="model" ui-date-mask>');
var model = input.controller('ngModel');
Expand Down