Javascript 结合UI.Mask的角度UI引导日期选择器

我正在使用angular来构建一个指令，它可以方便地在需要的地方添加日期选择器

当我将其与相结合时，当我选择日期时，输入中的值会被置乱

这是我的html：

<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>

和我的JS：

<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>

/**
*日期选择器
*/
$scope.today=函数（）{
$scope.dt=新日期（）；
};
$scope.today（）；
$scope.clear=函数（）{
$scope.dt=null；
};
//禁用周末选择
$scope.disabled=功能（日期、模式）{
返回（mode=='day'&&（date.getDay（）==0 | | date.getDay（）==6））；
};
$scope.toggleMin=函数（）{
$scope.minDate=$scope.minDate？空：新日期（）；
};
$scope.toggleMin（）；
$scope.open=函数（$event）{
$event.preventDefault（）；
$event.stopPropagation（）；
$scope.opened=true；
};
$scope.dateOptions={
年份：“yy”，
开始日期：1
};
$scope.initDate=新日期（'2016-15-20'）；
$scope.formats=['dd-MMMM-yyyy'，'yyyy/MM/dd'，'dd.MM.yyyy'，'shortDate']；
$scope.format=$scope.formats[0]；

---

我希望能够使用ui掩码功能，不必键入

/

s，从而更轻松地键入日期。有可能同时使用这些功能吗？

当我尝试重现您的挑战时，首先想到的是：

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

返回

Invalid Date

也许这是一个开始寻找解决方案的地方。那是几号？第15个月还是第20个月？不管怎样，那都不行。为

$scope.initDate

提供有效日期。也许你的意思是“2016-12-20”

---

您能否为您的情况创建一个小示例，我们可以用来测试可能的解决方案？你说的“加扰输入”到底是什么？同样，请提供问题和期望结果的示例。

以下代码片段对我很有用：

它只是用jquery.maskedinput.js提供的掩码装饰datepicker指令。玩得开心

---

更新（2015年5月13日）

---

一个plunk来说明它的工作原理：

在这个plunk中查看案例4：

基本添加：添加了模型视图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>

从ui.Mask提供的示例来看，它似乎没有完全按照预期工作。也许您应该研究一下ui.Mask的替代方案，看看是否有效。通过这种方式，您可以排除是您的问题还是ui.Mask的问题；是的，对我有用，日期模式必须是“yyyy/MM/dd”@IgordeLorenzi或@AminRahimi你们两个有一个显示此工作的图标吗？我试图在上应用此解决方案，但有人告诉我，

mask

不是

element

Hi@diplosaurus上可用的方法，您只是忘记了包含

jquery

和

jquery.maskedinput.js

依赖项。我更新了我的答案，你的plunker工作正常。谢谢！这对我也有用。最后一个版本是：

$provide.decorator（'uibDatepickerPopupDirective'