如何设置 uib-datepicker-popup 始终以白天模式打开？

Question

我遇到 uib-datepicker-popup 这个问题，当用户打开日期选择器并进入月或年模式并关闭选择器，然后再次打开日期选择器时，选择器以上次模式打开在关闭之前。如何更改 uib-datepicker-popup 的行为以始终以白天模式打开？

我发现的一个选项是将 minMode 和 maxMode 都设置为 day，但这样做会阻止用户进入我不想要的其他模式！

欢迎提出任何想法！

这是一个让你继续前进的小插曲：Demo

Answer 1

您要查找的是 datepicker-options 指令的 datepickerMode 属性。

文档说

datepickerMode C (Default: day) - Current mode of the datepicker (day|month|year). Can be used to initialize the datepicker in a specific mode.

日期选择器有 3 种模式：

day - In this mode you're presented with a 6-week calendar for a specified month. month - In this mode you can select a month within a selected year. year - In this mode you are presented with a range of years (20 by default).

您可以在您的标记中内联定义它，例如

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

Answer 2

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

因此，在弹出 click 事件上设置 datepickerMode：

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

Updated demo

如何设置 uib-datepicker-popup 始终以白天模式打开？

how to set uib-datepicker-popup opens always in day mode?

javascript

directive

datepicker

angularjs

angular-ui-bootstrap