新しいHTML5の時間入力と日付入力でmomentjsを使用して、ユーザーが予定の日時を選択できるようにしようとしています。
日付入力用のマークアップ
<input data-bind="value: startDate" type="date" ></input>
<output id=startDate data-bind="text: startDate"></output>
<br />
<input data-bind="value: endDate" type="date"></input>
<output id=endDate data-bind="text: endDate"></output>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
ザ・JS
//var todayDate = (new Date()).toISOString().split('T')[0],
viewModel = {
//reset startDate and EndDate
startDate: ko.observable(moment(new moment()).format("YYYY-MM-DD")),
endDate: ko.observable(moment(new moment()).format("YYYY-MM-DD")),
//set back the endDtate to 2034-04-28
//endDate: ko.observable("2034-04-28"),
dateDiff : ko.computed(function () {
return moment.duration(this.endDate - this.startDate).humanize();
})
};
viewModel.startDate.subscribe(function(newValue) {
// Show the updated value in the console
console.info(newValue.replace(/\D/g,''));
});
viewModel.endDate.subscribe(function(newValue) {
// Show the updated value in the console
console.info(newValue.replace(/\D/g,''));
});
ko.applyBindings(viewModel);
デモ: http://jsfiddle.net/kougiland/pBFQA/2/
ユーザーが日付入力を変更すると、差額が再計算され、終了日が開始日よりも小さい場合はアラートが生成され、終了日が開始日の値に戻されます。
そして、Html5タイムピッカーでも同じことをしたい
ありがとうございました
更新:HTML5 時間
マークアップ
<input data-bind="value: startTime" type="Time" ></input>
<output id=startTime data-bind="text: startTime"></output>
<br />
<input data-bind="value: endTime" type="Time"></input>
<output id=endTime data-bind="text: endTime"></output>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
JS
viewModel = {
//reset startTime and EndTime
startTime: ko.observable(moment().format('HH:mm:ss')),
endTime: ko.observable(moment().format('HH:mm:ss')),
timeDiff : ko.computed(function () {
console.log(this.startTime);
console.log(this.endTime);
return moment.duration(this.endTime - this.startTime).humanize();
})
};
ko.applyBindings(viewModel);
デモ: http://jsfiddle.net/kougiland/5Bjzh/1/
timeDiff入力の変更を更新するにはどうすればよいですか?