Angular UI Bootstrap date-picker Combined With UI.Mask

[亡魂溺海] 提交于 2020-01-20 21:43:05

问题


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?


回答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 () {
      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




回答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"/>
<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>



回答3:


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.



来源:https://stackoverflow.com/questions/24786796/angular-ui-bootstrap-date-picker-combined-with-ui-mask

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!