Angular Ui Bootstrap Date-picker Combined With Ui.mask

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 Directiv

Solution 1:

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 () {
      returnfunction (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

Solution 2:

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"/>
<spanclass="input-group-btn"><buttontype="button"class="btn btn-default"ng-click="open4()"><iclass="fa fa-calendar fa-1"></i></button></span>

Solution 3:

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

newDate('2016-15-20');

returns

InvalidDate

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.