如何设置uib-datepicker-popup总是在白天模式下打开?

时间:2016-10-30 07:11:24

标签: javascript angularjs datepicker angular-ui-bootstrap directive

uib-datepicker-popup我遇到此问题,当用户打开日期选择器并进入月份或年份模式并关闭选择器并再次打开日期选择器时,选择器将以最后一种模式打开关闭。如何将uib-datepicker-popup的行为始终更改为以白天模式打开?

我找到的一个选项是将minModemaxMode都设置为day,但这样做会阻止用户进入我不想要的其他模式!

任何想法都表示赞赏!

这是一个让你前进的插曲:Demo

2 个答案:

答案 0 :(得分:1)

可能最简单的方法是在显示弹出窗口之前强制设置日期选择器模式。在这种情况下,无需指定datepicker-options="{minMode: 'day', maxMode: 'day'}"来阻止用户选择其他模式。

因此,请在弹出式datepickerMode事件中设置click

$scope.open1 = function() {
  $scope.dateOptions.datepickerMode = 'day'; //<-force to set date picker mode
  $scope.popup1.opened = true;
};

Updated demo

答案 1 :(得分:0)

您正在寻找的是datepickerMode指令的datepicker-options属性。

文档说

  

datepickerMode C(默认值:日) - 日期选择器的当前模式(日|月|年)。可用于在特定模式下初始化日期选择器。

日期选择器有3种模式:

  

天 - 在此模式下,您将获得指定月份的6周日历。   月 - 在此模式下,您可以选择所选年份内的月份。   year - 在此模式下,您将看到一系列年份(默认为20年)。

您可以在标记中内联定义

<div uib-datepicker ng-model="dt" datepicker-options="{'datepickerMode: 'day'}"></div>

或只是传递一个选项对象

<div uib-datepicker ng-model="dt" datepicker-options="optionsObject}"></div>

然后将$watch设置为dt,以便当用户摆弄您的纠察队时,观察员会将您的模式重置为day

$scope.$watch('dt', ()=>{
    $scope.dateOptions.datepickerMode = 'day';
});