選択した値をノックアウト オブザーバブルにバインドしようとしている日付範囲の日付ピッカー (jquery) があります。日付ピッカー to および from は、ユーザーが選択できる日付範囲を制限し、ユーザーが "from" 日付を選択すると、過去 30 日間にデフォルト設定されます。
オブザーバブルの値へのバインディングをテストするために2つのスパン要素をバインドしましたが、日付を選択するたびに、日付ピッカーがフィールドを適切に設定しますが、オブザーバブルは決してトリガー/更新されません。
html
From
<input type="text" id="StartDate" data-bind="value: myStartDate()" />to
<input type="text" id="EndDate" data-bind="value: myEndDate()"/>
<hr/>
<p>start day<span data-bind="text: myStartDate()" />
</p>
<p>end day<span data-bind="text: myEndDate()" />
</p>
js (および ko の組み合わせ)
var myViewModel = function () {
var self = this;
self.myStartDate = ko.observable();
self.myEndDate = ko.observable();
};
ko.applyBindings(new myViewModel());
//calendar controls
//setup min and max date ranges
var d = new Date();
d.setDate(d.getDate());
//default range
var defRange = 30;
// total range 1yr +/-
var e = new Date();
var xDate = 365;
e.setDate(d.getDate() - xDate);
$('#StartDate').datepicker({
maxDate: d,
beforeShow: function () {
$('.ui-datepicker').css('font-size', 10);
},
onSelect: function (date) {
var dp2 = $('#EndDate');
var startDate = $(this).datepicker('getDate');
var minDate = $(this).datepicker('getDate');
startDate.setDate(startDate.getDate() + xDate);
//defaults to past 30 days
dp2.datepicker('setDate', -defRange);
minDate.setDate(minDate.getDate() - xDate);
//set max date for start and end range
dp2.datepicker('option', 'maxDate', startDate);
dp2.datepicker('option', 'minDate', minDate);
$(this).datepicker('option', 'minDate', minDate);
}
});
$('#EndDate').datepicker({
maxDate: d,
minDate: e,
beforeShow: function () {
$('.ui-datepicker').css('font-size', 10);
}
});
$('#StartDate').focus(function () {
$('#StartDate').datepicker('show');
});
$('#EndDate').focus(function () {
$('#EndDate').datepicker('show');
});
私が立ち往生しているのは、日付ピッカーで日付が選択され、オブザーバブルにプッシュされた入力フィールドに入力されたら、値を設定する必要があることを理解することです。
ヒントや提案をありがとう、