两个带剔除的日期选择器，一个更新另一个 [英] two datepickers with knockout, one updates another

问题描述

我在jQuery datepicker上附加了敲除自定义绑定处理程序，我想在更新第一个字段时将第二个日期的minDate设置为第二天(以防万一其他日期未设置为以后的日期).

I got attached jQuery datepicker with knockout custom bindings handler, and I want to when updating first field to set minDate of second to day after (in case that other date was not set to later date).

<label>Check-in:</label>
<input type="date" id="checkIn" data-bind="datepicker: checkIn, datepickerOptions: {
    minDate: 0,
    dateFormat: 'dd/mm/yy',
    firstDay: 1
    }" />
<br/>
<br/>

<label>Check-out:</label>
<input type="date" id="checkOut" data-bind="datepicker: checkOut, datepickerOptions: {
    minDate: 0,
    dateFormat: 'dd/mm/yy',
    firstDay: 1
    }" />

我已为此设置小提琴

例如 如果选择签出日期"为2012年11月28日，而您选择签入"日期为2012年11月25日，则无需更改签出日期"，只需将签出"的minDate设置为2012年11月26日即可.

e.g. If for checkOut date is selected 28/11/2012 and you for checkIn choose 25/11/2012 there is no need to change checkOut date, only to set minDate of checkOut to 26/11/2012.

但是，如果您选择2012年11月29日签入，那么checkOut需要更新为2012年11月30日

But if you choose 29/11/2012 for checkIn, then checkOut needs to update to 30/11/2012

推荐答案

一种实现方法是订阅第一个日期可观察属性，然后使用该属性设置第二个日期:

One way to do it is to subscribe to the first date observable property and use that to set the second:

self.checkIn.subscribe(function(newValue) {
    $("#checkOut").datepicker("option", "minDate", self.checkIn());
});

请参见此处

当然，这不是最优雅的解决方案，因为它需要知道视图的哪一部分与其他属性有关.更好的解决方案可能是创建另一个自定义绑定.

Of course, this is not the most elegant solution, since it requires knowing which part of the view relates to the other property. A better solution might be to create another custom binding.

类似这样的东西:

ko.bindingHandlers.minDate = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
        current = $(element).datepicker("option", "minDate", value);
    }        
}

这样的约束:

<input type="date" id="checkOut" data-bind="{datepicker: checkOut, datepickerOptions: {
minDate: 0,
dateFormat: 'dd/mm/yy',
firstDay: 1
},
minDate: checkIn}" />

请参见此处.

这篇关于两个带剔除的日期选择器，一个更新另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！