程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了与UI.Mask结合的Angular UI Bootstrap日期选择器大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_607_0@如何解决与UI.Mask结合的Angular UI Bootstrap日期选择器? 开发过程中遇到与UI.Mask结合的Angular UI Bootstrap日期选择器的问题如何解决?下面主要结合日常开发的经验,给出你关于与UI.Mask结合的Angular UI Bootstrap日期选择器的解决方法建议,希望对你解决与UI.Mask结合的Angular UI Bootstrap日期选择器有所启发或帮助;

以下代码段对我有用:

.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;
  });

});

它只是用 提供的掩码 指令。玩得开心!

一个说明它工作原理的工具:http ://plnkr.co/edit/fTFNu9Mp2kX5X1D6AJOx?p=prevIEw

@H_607_0@解决方法

我正在使用角度UI引导程序弹出日期选择器来构建指令,该指令可以轻松地使我在需要的地方添加日期选择器。

当我将其与uiMask指令结合使用时,当我选择一个日期时,输入中的值会变得混乱。

这是我的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>

而我的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];

我希望能够使用ui-mask功能,而不必键入/s,从而使键入日期更容易。是否可以将它们一起使用?

大佬总结

以上是大佬教程为你收集整理的与UI.Mask结合的Angular UI Bootstrap日期选择器全部内容,希望文章能够帮你解决与UI.Mask结合的Angular UI Bootstrap日期选择器所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。