angularjs - Angular DateRangePicker - 在日历弹出窗口中将“To”和“From”字段设为只读

Question

我正在使用 Angular daterangepicker。当日历弹出时，我使用在左侧显示“To”和“From”字段以及“Apply”和“Close”按钮的主题。

日历：

我需要将突出显示的字段设置为只读，以便用户只能从日历中选择日期并单击“应用”。可编辑的字段允许接受过去的日期。这是我需要限制的行为

Answer 1

您可以使用 datepicker-options 并在选项中设置最小日期，这样您的日历将不允许用户选择过去的日期。

<input type="text" datepicker-options="dateOptions" datepicker-popup="dd-MMMM-yyyy" />

在此之后，您需要以这种方式设置选项

$scope.dateOptions = {
minDate: new Date() 
};

Answer 2

我使用 showCalender.daterangepicker 事件将“To”和“From”字段设为只读。因此，一旦显示日历，我将只读和禁用属性添加到“收件人”和“发件人”输入字段。这样，它们现在不可编辑。

例子：-

$scope.options = {
                  eventHandlers: {
                        'showCalendar.daterangepicker':function(ev,picker)
                        {
                            angular.element("input[name='daterangepicker_end']").prop("readonly",true)
                            angular.element("input[name='daterangepicker_end']").prop("disabled",true)
                            angular.element("input[name='daterangepicker_start']").prop("readonly",true)
                            angular.element("input[name='daterangepicker_start']").prop("disabled",true)
                        }
                    },
                };