xdan/datetimepicker 使用淘汰赛 - 无法更新“突出显示的天数";动态地
[英] xdan/datetimepicker using knockout - can not update "highlihted days" dynamicaly
本文介绍了xdan/datetimepicker 使用淘汰赛 - 无法更新“突出显示的天数";动态地的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 xdan/datetimepicker 并且无法动态绑定数据亮点.>
var MainViewModel = function(app) {var self = this;var $parent = app;self.dataAvailability = {};self.highlightedDates = ko.observable(undefined);//ko.observableArray([]);//然后我有方法查询数据库中的可用数据,端点返回这样的数组:[2016-09-27T00:00:00.0000000+03:00,2016-09-29T00:00:00.0000000+03:00]self.UpdateDataAvailabilityHighlight = 函数(时间字符串){var url = String.format(config.urls.dataAvailability, settings.location());var dTime = moment(timeString, "DD/MM/YYYY H:mm:ss").toDate();var id = dTime.getFullYear() + "" + dTime.getMonth();$.getJSON(url, data).done(function(result) {var 亮点 = [];//使用lodash结果.forEach(函数(元素,索引){highlight.push(moment(element).format("DD/MM/YYYY").toString() + ",,xdsoft_highlighted_mint");});self.dataAvailability[id] = 亮点;})self.highlightedDates(self.dataAvailability[id] || []);}}module.exports = MainViewModel;self.mainView = new MainViewModel(self);//淘汰赛绑定(功能(ko){ko.bindingHandlers.datetimepicker = {初始化:函数(元素,valueAccessor,allBindingsAccessor,viewModel,bindingContext){var $element = $(element);var value = valueAccessor(), allBindings = allBindingsAccessor();var valueUnwrapped = ko.utils.unwrapObservable(value);var 选项 = allBindings.dtPickerOptions ||{};var myFormatter = {解析日期:函数(vDate,vFormat){返回时刻(vDate, vFormat).toDate();},猜测日期:函数(vDateStr,vFormat){返回时刻(vDateStr, vFormat).toDate();},parseFormat: 函数 (vChar, vDate) {返回 vDate;},格式日期:函数(vChar,vDate){var res = moment(vChar).format(vDate);返回资源;}};$.datetimepicker.setDateFormatter(myFormatter);$element.datetimepicker({步骤:15,格式:"DD/MM/YYYY H:mm:ss",formatTime: "H:mm",formatDate: "DD/MM/YYYY",年份开始:2000,yearEnd: (new Date().getFullYear()) + 1,highlightDates: bindingContext.$data.highlightedDates(),//应该绑定,但是dataTimePicker貌似不能处理动态变化的值onChangeDateTime: 函数 (dp, $input) {var date = moment($input.val(), "DD/MM/YYYY H:mm:ss");date.set('秒', 0);var observable = valueAccessor();observable(date.format("DD/MM/YYYY H:mm:ss"));},onShow:函数(ct){bindingContext.$data.UpdateDataAvailabilityHighlight(ct);this.setOptions({ highlightDates: bindingContext.$data.highlightedDates() });//没有这个突出显示日期不起作用},onChangeMonth: 函数 (ct) {bindingContext.$data.UpdateDataAvailabilityHighlight(ct);this.setOptions({ highlightDates: bindingContext.$data.highlightedDates() });//没有这个突出显示日期不起作用//所以当月份更改时,bindingContext.$data.highlightedDates"仍然没有获取/更新数据.如果我们等待一段时间并返回结果,则不会更新天数.}});},更新:函数(元素,valueAccessor){var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());var obs = valueAccessor();$(element).val(moment(valueUnwrapped, "DD/MM/YYYY H:mm:ss").format("DD/MM/YYYY H:mm:ss"));}};})(ko);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.js"></script><div id="main-menu" data-bind="with: $root.mainView"><div class="btn-group-vertical btn-block btn-group-lg"><div class="content-wrapper"><div class="输入组日期"><label>时间</label><input type="text" class="form-control" data-bind="datetimepicker: time"/>
我的代码的主要部分.检查评论.所以主要问题是onChangeMonth"天的亮点没有从self.highlightedDates"更新.我做错了什么?当显示呼叫者并获得结果时,是否有可能动态更新天数?以及怎么做?
注意:这个帖子/代码剪断可能有用 - xdan/datetimepicker 使用momenjs"代替默认的php-date-formatter".
解决方案
找到了如何在有结果时更新日历视图:
在淘汰赛绑定中,我调用了方法来获取通过 datetimepicker 的 HTML doom 元素的数据.
$element.datetimepicker({...onShow:函数(ct){bindingContext.$data.UpdateDataAvailabilityHighlight(ct, true, element);},onChangeMonth: 函数 (ct) {bindingContext.$data.UpdateDataAvailabilityHighlight(ct, true, element);},...});
我在 jquery getJson 方法中添加了then"操作,并在其中更新了数据选择器选项:
$(element).datetimepicker({highlightedDates: self.highlightedDates()});
完整获取数据方法:
$.getJSON(url, data).完成(功能(结果){var 亮点 = [];结果.forEach(函数(元素,索引){highlight.push(moment(element).format(config.timeFormatDate).toString() + ",Data is aaailable," + config.timePickerHighlightStyle);});self.dataAvailability[id] = 亮点;//添加空数据,第二次不查询}).fail(function() { self.notificationController.addError("无法检索数据可用性"); }).then(函数(){如果(更新高亮){self.highlightedDates(self.dataAvailability[id] || []);}if (!(typeof element === "undefined")) {$(element).datetimepicker({highlightedDates: self.highlightedDates()});}});
现在,高亮效果就像一个魅力:)
I am using xdan/datetimepicker and can not make that data highlights were binded dynamicaly.
var MainViewModel = function(app) {
var self = this;
var $parent = app;
self.dataAvailability = {};
self.highlightedDates = ko.observable(undefined); //ko.observableArray([]);
//Then I have method to query available data in DB, endpoint returns array like this: [2016-09-27T00:00:00.0000000+03:00,2016-09-29T00:00:00.0000000+03:00]
self.UpdateDataAvailabilityHighlight = function(timeString) {
var url = String.format(config.urls.dataAvailability, settings.location());
var dTime = moment(timeString, "DD/MM/YYYY H:mm:ss").toDate();
var id = dTime.getFullYear() + "" + dTime.getMonth();
$.getJSON(url, data).done(function(result) {
var highlights = [];
//Using lodash
result.forEach(function(element, index) {
highlights.push(moment(element).format("DD/MM/YYYY").toString() + ",,xdsoft_highlighted_mint");
});
self.dataAvailability[id] = highlights;
})
self.highlightedDates(self.dataAvailability[id] || []);
}
}
module.exports = MainViewModel;
self.mainView = new MainViewModel(self);
//Knockout Binding
(function (ko) {
ko.bindingHandlers.datetimepicker = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var $element = $(element);
var value = valueAccessor(), allBindings = allBindingsAccessor();
var valueUnwrapped = ko.utils.unwrapObservable(value);
var options = allBindings.dtPickerOptions || {};
var myFormatter = {
parseDate: function (vDate, vFormat) {
return moment(vDate, vFormat).toDate();
},
guessDate: function (vDateStr, vFormat) {
return moment(vDateStr, vFormat).toDate();
},
parseFormat: function (vChar, vDate) {
return vDate;
},
formatDate: function (vChar, vDate) {
var res = moment(vChar).format(vDate);
return res;
}
};
$.datetimepicker.setDateFormatter(myFormatter);
$element.datetimepicker({
step: 15,
format: "DD/MM/YYYY H:mm:ss",
formatTime: "H:mm",
formatDate: "DD/MM/YYYY",
yearStart: 2000,
yearEnd: (new Date().getFullYear()) + 1,
highlightedDates: bindingContext.$data.highlightedDates(), // should ne binding, but dataTimePicker looks like can not handle dynamicaly changed values
onChangeDateTime: function (dp, $input) {
var date = moment($input.val(), "DD/MM/YYYY H:mm:ss");
date.set('second', 0);
var observable = valueAccessor();
observable(date.format("DD/MM/YYYY H:mm:ss"));
},
onShow: function (ct) {
bindingContext.$data.UpdateDataAvailabilityHighlight(ct);
this.setOptions({ highlightedDates: bindingContext.$data.highlightedDates() }); //Without this highlightedDates does not work
},
onChangeMonth: function (ct) {
bindingContext.$data.UpdateDataAvailabilityHighlight(ct);
this.setOptions({ highlightedDates: bindingContext.$data.highlightedDates() }); //Without this highlightedDates does not work
//SO when month is changed the "bindingContext.$data.highlightedDates" still does not get/updated the data. And if we wait some time and when results are returned, the days highlights are not updated.
}
});
},
update: function (element, valueAccessor) {
var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
var obs = valueAccessor();
$(element).val(moment(valueUnwrapped, "DD/MM/YYYY H:mm:ss").format("DD/MM/YYYY H:mm:ss"));
}
};
})(ko);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.js"></script>
<div id="main-menu" data-bind="with: $root.mainView">
<div class="btn-group-vertical btn-block btn-group-lg">
<div class="content-wrapper">
<div class="input-group date">
<label>Time</label>
<input type="text" class="form-control" data-bind="datetimepicker: time" />
</div>
</div>
</div>
</div>
There main parts of my code. Check comments.
So main problem is that "onChangeMonth" the days highlights are not updated from "self.highlightedDates". What I am doing wrong? Is it posiible that days highlight was updated dynamicaly when callender is displayed and results are get? And how to do it?
Note: This post/code snipped maybe be usefull - xdan/datetimepicker use "momenjs" instead default "php-date-formatter".
解决方案
Found how to update calendar view when I have results:
In knockout bindings I called method to get data passing the HTML doom element of datetimepicker.
$element.datetimepicker({
...
onShow: function (ct) {
bindingContext.$data.UpdateDataAvailabilityHighlight(ct, true, element);
},
onChangeMonth: function (ct) {
bindingContext.$data.UpdateDataAvailabilityHighlight(ct, true, element);
},
...
});
I added "then" action in jquery getJson method and in it I update the datapicker option:
$(element).datetimepicker({highlightedDates: self.highlightedDates()});
Full get data method:
$.getJSON(url, data)
.done(function(result) {
var highlights = [];
result.forEach(function(element, index) {
highlights.push(moment(element).format(config.timeFormatDate).toString() + ",Data is awailable," + config.timePickerHighlightStyle);
});
self.dataAvailability[id] = highlights; //Add empty data to, that it was not queried second time
})
.fail(function() { self.notificationController.addError("Failed to retrieve data availability"); })
.then(function () {
if (updateHilight) {
self.highlightedDates(self.dataAvailability[id] || []);
}
if (!(typeof element === "undefined")) {
$(element).datetimepicker({highlightedDates: self.highlightedDates()});
}
});
And now days highlight works like a charm :).
这篇关于xdan/datetimepicker 使用淘汰赛 - 无法更新“突出显示的天数";动态地的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!