使用敲除綁定datepicker的mindate到另一個datepicker

我有很多對datepickers。第一個日期選擇器是時間間隔的開始，第二個是結束時間。從邏輯上講，要求第一個日期選擇器的值不應超過第二個，反之亦然。我寫了這個代碼：使用敲除綁定datepicker的mindate到另一個datepicker

HTML：

<input type="text" class="datepicker" data-bind="datepicker: firstDate, datepickerOptions: { endDate: secondDate }" /> 
<input type="text" class="datepicker" data-bind="datepicker: secondDate, datepickerOptions: { startDate: firstDate }" />

和JS：

function model() { 
     var self = this; 

     self.firstDate = ko.observable(); 
     self.secondDate = ko.observable(); 
    } 

    ko.bindingHandlers.datepicker = { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     //initialize datepicker with some optional options 
     var options = allBindingsAccessor().datepickerOptions || {}; 
     $(element).datepicker(options); 

     //when a user changes the date, update the view model 
     ko.utils.registerEventHandler(element, "changeDate", function(event) { 
     var value = valueAccessor(); 
     if (ko.isObservable(value)) { 
      value(event.date); 
     } 
     }); 
    }, 
    update: function(element, valueAccessor) { 
     var widget = $(element).data("datepicker"); 
     //when the view model is updated, update the widget 
     if (widget) { 
     widget.date = ko.utils.unwrapObservable(valueAccessor()); 
     if (widget.date) { 
      widget.setValue(); 
     } 
     } 
    } 

    }; 

    ko.applyBindings(new model()); 

    $('body').on('focus', ".datepicker", function() { 
    $(this).datepicker({ 
     format: 'dd.mm.yyyy', 
     language: 'ru', 
     forceParse: true, 
     todayBtn: true, 
     clearBtn: true, 
     autoclose: true 
    }); 
    });

數值得到綁定BUT的minDate上沒有日期選擇更新。請問，有人能指出我的錯誤嗎？

這是broken JsFiddle和working one。因此，只要我將datepickerOptions添加到我的代碼中就會破裂。

來源

2016-09-29 mr.nothing

嘗試'ATTR：{的minDate：值}' – Rajesh

@Rajesh，不，不幸的是它不工作。 –

@ mr.nothing，你能提供一個可行的例子嗎？（不僅僅是html/js代碼 - 一個完整的jsfiddle/snippet可以工作並顯示兩個數據選取器的工作）。 – Dekel

您正在爲您的日期選擇器提供ko.observable選項。日期選擇器不會自動知道如何處理這些。

您必須在update方法中處理可觀察的選項。例如：

var options = allBindingsAccessor().datepickerOptions || {}; 

    // Unwrap observable dates 
    Object.keys(options).forEach(function(key) { 
    options[key] = ko.unwrap(options[key]); 
    }); 

    var widget = $(element).data("datepicker"); 
    if (options.startDate) widget.setStartDate(options.startDate); 
    if (options.endDate) widget.setEndDate(options.endDate);

這裏有一個更新的小提琴：https://jsfiddle.net/4ebexf44/

來源

2016-10-04 09:39:44 user3297291

你可以做的是對每一個變化使用下一個日期選擇器的setStartDate功能爲當前日期（當前元素）：

update: function(element, valueAccessor) { 
    $(element) 
     .next('input.datepicker') 
     .datepicker('setStartDate', $(element).datepicker('getDate')); 
}

這裏是工作的jsfiddle（主要是基於你的工作）：
https://jsfiddle.net/ynfoj5jz/

來源

2016-10-03 22:45:04 Dekel

謝謝，但不幸的是它不符合我的需求。我需要將任意日期選擇器綁定到對方。我的例子只是簡化了我所擁有的。事實上，我的表單具有複雜的依賴關係，我必須處理。 –

你怎麼知道哪兩個日期選擇器是「綁定」的？ – Dekel

使用敲除綁定datepicker的mindate到另一個datepicker

回答

相關問題