Angular UI Bootstrap date-picker Combined With UI.Mask

Question

I am using the angular UI bootstrap popup date-picker to build a directive that will easily allow me to add the date-picker where need.

When I combine this with the uiMask Directive, the values in the input get scrambled when I pick a date.

Here is my html:

<p class="input-group">
    <input type="text" class="form-control" 
           ui-mask="99/99/9999"
           ng-model="ngModel" 
           ng-model="order.date" 
           datepicker-popup="MM/dd/yyyy" 
           is-open="opened" 
           datepicker-options="dateOptions" 
           date-disabled="disabled(date, mode)" 
           ng-required="true" 
           close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</p>

And my JS:

/**
 * DATE PICKER
 */
$scope.today = function () {
    $scope.dt = new Date();
};
$scope.today();

$scope.clear = function () {
    $scope.dt = null;
};

// Disable weekend selection
$scope.disabled = function (date, mode) {
    return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
};

$scope.toggleMin = function () {
    $scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();

$scope.open = function ($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
};

$scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
};

$scope.initDate = new Date('2016-15-20');
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];

I would like to be able to use the ui-mask functionality to make typing dates easier by not having to type the /s. Is it possible to be able to use these together?

It seems that ui.Mask doesn't exactly work as intended based on the examples they provide here. Perhaps you should look into an alternative for ui.Mask and see if that's working. This way you can rule out if it's your problem or ui.Mask's problem. — Robin van Baalen
– Robin van Baalen, Commented Sep 25, 2014 at 11:41

Igor de Lorenzi · Accepted Answer · 2015-12-23 13:55:47Z

13

The following snippet worked for me:

.config(function ($provide) {

  $provide.decorator('datepickerPopupDirective', function ($delegate) {
    var directive = $delegate[0];
    var link = directive.link;

    directive.compile = function () {
      return function (scope, element, attrs) {
        link.apply(this, arguments);
        element.mask("99/99/9999");
      };
    };

    return $delegate;
  });

});

It simply decorates the datepicker directive with a mask provided by jquery.maskedinput.js. Have fun!

UPDATE (May 13 2015)

A plunker to illustrate it working: http://plnkr.co/edit/fTFNu9Mp2kX5X1D6AJOx?p=preview

edited Dec 23, 2015 at 13:55

answered Dec 12, 2014 at 18:06

Igor de Lorenzi

5831 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Amin Rahimi Over a year ago

i used this pattern element.mask("9999/99/99");

Amin Rahimi Over a year ago

yes did work for me and date pattern must be like that "yyyy/MM/dd"

diplosaurus Over a year ago

@IgordeLorenzi or @AminRahimi do either of you have a plunk showing this working? I'm trying to apply this solution on this Plunk but am being told mask is not an available method on element

Igor de Lorenzi Over a year ago

Hi @diplosaurus, you just forgot to include the jquery and jquery.maskedinput.js dependencies. I updated my answer with your plunker working as expected.

Joander Vieira Cândido Over a year ago

thanks ! It worked for me too. The last version is: $provide.decorator('uibDatepickerPopupDirective'

|

patlv23 · Accepted Answer · 2016-11-17 22:57:08Z

3

Check out Case 4 in this plunk: https://plnkr.co/edit/0Vr5YRVREIT5EMu1m55z?p=preview

basically added: added model-view-value="true":

<input name="date4" id="date4" type="text" class="form-control" uib-datepicker-popup="dd/MM/yyyy" 
    ui-mask="99/99/9999" placeholder="DD/MM/YYYY" ng-model="date4" ng-required="true" 
    model-view-value="true" is-open="popup4.opened" datepicker-options="dateOptions" 
    show-button-bar="false"/>
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open4()"><i class="fa fa-calendar fa-1"></i></button>
</span>

answered Nov 17, 2016 at 22:57

patlv23

1432 silver badges11 bronze badges

Comments

Robin van Baalen · Accepted Answer · 2014-09-25 11:52:56Z

2

When I try to reproduce your challenge, the first thing that comes to mind is:

new Date('2016-15-20');

returns

Invalid Date

Perhaps that's a place to start looking for a solution. What date is that? 15th month or the 20th month? Either way, that doesn't work. Provide a valid date for $scope.initDate. Perhaps you meant '2016-12-20'?

Can you perhaps create a small example of you situation that we can use to test possible solutions? And what exactly is the 'scrambled input' you are talking about? Again, please provide an example of both the problem and desired outcome.

answered Sep 25, 2014 at 11:52

Robin van Baalen

3,6712 gold badges24 silver badges36 bronze badges

Collectives™ on Stack Overflow

Angular UI Bootstrap date-picker Combined With UI.Mask

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related