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

【问题标题】：Angular DateRangePicker - make "To" and "From" fields readonly in Calender popupAngular DateRangePicker - 在日历弹出窗口中将“To”和“From”字段设为只读
【发布时间】：2017-03-08 09:35:44
【问题描述】：

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

日历：

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

【问题讨论】：

我假设您指的是这个：github.com/fragaria/angular-daterangepicker ？您是否考虑过只使用指令提供的min 和max 属性？如果这些还不够，那么这可能需要您修改指令，或请求对项目维护者进行更改……这似乎有点多。
@Claies ：是的，我指的是您提供的同一个 daterangepicker 链接。我确实有 min set ，它禁用了过去的日期。那很好。我担心的是，一旦我从日历中选择日期并在单击“应用”按钮之前，我就有机会使用“应用”按钮上方的“收件人”和“发件人”输入字段来操作日期。如果我这样的话提供过去的日期，daterangepicker 接受该日期，这是我的验证失败的地方。请参阅随附的屏幕截图以更清楚地了解我的问题
嗯，对我来说这听起来像是实现中的一个错误；再次，似乎是项目维护人员需要解决的问题，除非您询问如何修改项目，但这个问题有点过于宽泛，甚至无法回答......

标签： angularjs bootstrap-daterangepicker

【解决方案1】：

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

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

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

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

【讨论】：

是的，我确实设置了 'min' 属性。但我可以从“应用”按钮上方的“到”和“从”输入字段中操作选定的日期范围，如果我在这些输入字段中提供过去的日期，然后单击“应用”按钮接受过去的日期。我需要阻止这些来自“To”和“from”字段的输入，以便只考虑日历中的日期。请参阅我附上的屏幕截图以获得更清晰的信息。
dotnetlearners.com/blogs/view/195/… 看看这里，

【解决方案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)
                        }
                    },
                };

【讨论】：