Javascript 敲除js以禁用引导数据采集器中选定日期的过去日期

绑定淘汰模型的Html代码

     <tbody data-bind="foreach: responseUserSetUpData().userListViewModel">
                        <tr>
                            <td><input type="text" class="datepicker form-control"  data-bind="datePicker: ko.observable(new Date(FormatStartDate)) , textInput : FormatStartDate , attr: {id: UserId}, datePickerOptions: {startDate: new Date()}"></td>
                            <td><input type="text" class="datepicker form-control" data-bind="datePicker: ko.observable(new Date(FormatEndDate)), textInput: FormatEndDate , attr :{id: UserId}, datePickerOptions: {startDate: new Date(FormatStartDate)}" ></td>
                        </tr>
                        </tbody>

现在，我想禁用日历中从所选开始日期开始的所有过去日期。它应该禁用所选日期的所有过去日期

下面是视图模型的两个属性

StartMeetingDate: ko.observable(new Date()),
    EndMeetingDate: ko.observable(),

---

如何使用剔除自定义绑定禁用日历中所有过去的日期。

这是更新的答案，考虑到

endDateLowLimit

的下限不仅应在启动时设置，而且还应在每次

startMeetingDate

更改时动态更新

正如我在评论中所说的，我不相信有“纯淘汰”的方式来实现这种动态行为

尽管您可以在每次更改

startMeetingDate

时应用触发的自定义事件，并自定义

datePicker

绑定以对事件作出反应

然后，您可以查看模型，如下所示：

function ViewModel(){
    var self   = this;
    //    ..... 
    self.startDateLowLimit = ko.observable(new Date());
    self.startDateHihgLimit = ko.pureComputed(function(){
        return new Date(self.startDateLowLimit().getTime() + 30 * 86400000);    //  roughly 30 days from self.startMeetingDate()
    });

    self.startMeetingDate = ko.observable(self.startDateLowLimit());

    self.startMeetingDate.subscribe(function(newStartDate) { $('#endDate').trigger('DATE-FROM-CHANGED', [newStartDate])});    //    this is where custom event is fired


    self.endDateLowLimit = ko.pureComputed(function(){
        return self.startMeetingDate();
    });
    self.endMeetingDate = ko.observable(null);
    //    ..... 
}

<label>Start meeting date</label>
<input type="text" class="datepicker form-control"  id="startDate"  data-bind="datePicker: startMeetingDate, datePickerOptions: {startDate: startDateLowLimit(), endDate: startDateHihgLimit()}" >
<label>End meeting date</label>
<input type="text" class="datepicker form-control"  id="endDate"  data-bind="datePicker: endMeetingDate, datePickerOptions: {startDate: endDateLowLimit()}" >

标记可能如下所示：

function ViewModel(){
    var self   = this;
    //    ..... 
    self.startDateLowLimit = ko.observable(new Date());
    self.startDateHihgLimit = ko.pureComputed(function(){
        return new Date(self.startDateLowLimit().getTime() + 30 * 86400000);    //  roughly 30 days from self.startMeetingDate()
    });

    self.startMeetingDate = ko.observable(self.startDateLowLimit());

    self.startMeetingDate.subscribe(function(newStartDate) { $('#endDate').trigger('DATE-FROM-CHANGED', [newStartDate])});    //    this is where custom event is fired


    self.endDateLowLimit = ko.pureComputed(function(){
        return self.startMeetingDate();
    });
    self.endMeetingDate = ko.observable(null);
    //    ..... 
}

<label>Start meeting date</label>
<input type="text" class="datepicker form-control"  id="startDate"  data-bind="datePicker: startMeetingDate, datePickerOptions: {startDate: startDateLowLimit(), endDate: startDateHihgLimit()}" >
<label>End meeting date</label>
<input type="text" class="datepicker form-control"  id="endDate"  data-bind="datePicker: endMeetingDate, datePickerOptions: {startDate: endDateLowLimit()}" >

尽管我相信这个答案有助于你了解总体情况，但你仍可能需要处理各种各样的角落案例

如果您错过了本文档，您可能会发现本文档非常有用

下面是一个更详细（但更黑客化）示例的链接，该示例涉及放置在单独表行上的一系列日期选择器对。注意，在示例中，knockout的

subscribe

不参与消息传递

---

这是一个更新的答案，考虑到

endDateLowLimit

的下限不仅应在启动时设置，而且还应在每次

startMeetingDate

更改时动态更新

正如我在评论中所说的，我不相信有“纯淘汰”的方式来实现这种动态行为

尽管您可以在每次更改

startMeetingDate

时应用触发的自定义事件，并自定义

datePicker

绑定以对事件作出反应

然后，您可以查看模型，如下所示：

function ViewModel(){
    var self   = this;
    //    ..... 
    self.startDateLowLimit = ko.observable(new Date());
    self.startDateHihgLimit = ko.pureComputed(function(){
        return new Date(self.startDateLowLimit().getTime() + 30 * 86400000);    //  roughly 30 days from self.startMeetingDate()
    });

    self.startMeetingDate = ko.observable(self.startDateLowLimit());

    self.startMeetingDate.subscribe(function(newStartDate) { $('#endDate').trigger('DATE-FROM-CHANGED', [newStartDate])});    //    this is where custom event is fired


    self.endDateLowLimit = ko.pureComputed(function(){
        return self.startMeetingDate();
    });
    self.endMeetingDate = ko.observable(null);
    //    ..... 
}

<label>Start meeting date</label>
<input type="text" class="datepicker form-control"  id="startDate"  data-bind="datePicker: startMeetingDate, datePickerOptions: {startDate: startDateLowLimit(), endDate: startDateHihgLimit()}" >
<label>End meeting date</label>
<input type="text" class="datepicker form-control"  id="endDate"  data-bind="datePicker: endMeetingDate, datePickerOptions: {startDate: endDateLowLimit()}" >

标记可能如下所示：

function ViewModel(){
    var self   = this;
    //    ..... 
    self.startDateLowLimit = ko.observable(new Date());
    self.startDateHihgLimit = ko.pureComputed(function(){
        return new Date(self.startDateLowLimit().getTime() + 30 * 86400000);    //  roughly 30 days from self.startMeetingDate()
    });

    self.startMeetingDate = ko.observable(self.startDateLowLimit());

    self.startMeetingDate.subscribe(function(newStartDate) { $('#endDate').trigger('DATE-FROM-CHANGED', [newStartDate])});    //    this is where custom event is fired


    self.endDateLowLimit = ko.pureComputed(function(){
        return self.startMeetingDate();
    });
    self.endMeetingDate = ko.observable(null);
    //    ..... 
}

<label>Start meeting date</label>
<input type="text" class="datepicker form-control"  id="startDate"  data-bind="datePicker: startMeetingDate, datePickerOptions: {startDate: startDateLowLimit(), endDate: startDateHihgLimit()}" >
<label>End meeting date</label>
<input type="text" class="datepicker form-control"  id="endDate"  data-bind="datePicker: endMeetingDate, datePickerOptions: {startDate: endDateLowLimit()}" >

尽管我相信这个答案有助于你了解总体情况，但你仍可能需要处理各种各样的角落案例

如果您错过了本文档，您可能会发现本文档非常有用

下面是一个更详细（但更黑客化）示例的链接，该示例涉及放置在单独表行上的一系列日期选择器对。注意，在示例中，knockout的

subscribe

不参与消息传递

---

如何在一个文本框中根据用户选择的日期禁用过去的日期。此解决方案适用于页面的初始加载。如果用户更改第一个文本框中的日期，它不会禁用过去的日期。请告诉我如何解决此问题。。。。。一、 我一直在思考这个问题，我认为没有“纯粹的淘汰”方法来动态设置

日期选择器的
开始日期
选项。要做到这一点，你必须添加一些魔术事件。然而，它需要定制
日期选择器
绑定。我会在几分钟后更新我以前的答案。我已经更新了我的答案。希望现在对你更有帮助。那里的所有代码片段都经过测试。我没有把整个代码放在不混淆其基本部分的地方。我如何在表的每一行上使用动态id执行此操作。我如何在一个文本框中根据用户选择的日期禁用过去的日期。此解决方案适用于页面的初始加载。如果用户更改第一个文本框中的日期，它不会禁用过去的日期。请告诉我如何解决此问题。。。。。一、 我一直在思考这个问题，我认为没有“纯粹的淘汰”方法来动态设置
日期选择器的
开始日期
选项。要做到这一点，你必须添加一些魔术事件。然而，它需要定制
日期选择器
绑定。我会在几分钟后更新我以前的答案。我已经更新了我的答案。希望现在对你更有帮助。那里的所有代码片段都经过测试。我没有把整个代码放在不混淆其基本部分的地方。我如何在表的每一行上使用动态id来执行这项操作。