gpt4 book ai didi

asp.net-mvc - knockout js引导日期选择器

转载 作者:行者123 更新时间:2023-12-02 03:32:34 25 4
gpt4 key购买 nike

我知道这个问题以前被问过很多次...但我已经尝试了所有解决方案,但没有一个有效...因此再次询问...

我如何将 json 日期绑定(bind)到 knockout 元素...下面是我的代码...

@Html.Bootstrap().ControlGroup().TextBoxFor(x => x.DateOfBirth).HtmlAttributes(new { data_bind = "kodate: DateOfBirth, datepickerOptions : new Date()", @class = "datepicker"} )

    $(function () {
$('.datepicker').datepicker({
autoclose: true
});
});

<input data-bind="kodate: startdate" class="datepicker"/>

kodate 定义如下

ko.bindingHandlers.kodate = {
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);
}
});

ko.utils.registerEventHandler(element, "change", function () {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(new Date(element.value));
}
});

},

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) {
return;
}

if (_.isString(widget.date)) {
widget.date = new Date(parseInt(widget.date.replace(/\/Date\((.*?)\)\//gi, "$1")));
//widget.date = new Date(widget.date);
}

widget.setValue();
}
},

update_old: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());

//handle date data coming via json from Microsoft
if (String(value).indexOf('/Date(') == 0) {
value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
}

$(element).datepicker("setValue", value);
}
};

现在日期显示正确...但是当我发布日期时...它以 json 格式发布,并且模型绑定(bind)器无法将 json 日期 (/Date(1339230900000)/) 转换为实际日期,因此日期在服务器端保持为空...

如何确保模型绑定(bind)器将 json 日期/Date(1339230900000)/转换为服务器端 DateTime 或如何以不同的格式发布日期以便模型绑定(bind)器能够识别日期?

有趣的是,如果我更改日期,那么它会以 ISO 格式发布,但如果我不更改日期,那么它会以 json 格式发布...所以初始化代码可能有问题...

我正在使用 bootstrap-datepicker: https://github.com/eternicode/bootstrap-datepicker

非常感谢任何帮助...

最佳答案

最简单的方法是使用 Moment.js 等客户端库来正确格式化日期,同时维护 Knockout 提供的双向数据绑定(bind)。一个简单的入门方法是使用轻量级插件,如下所示 - http://makingsense.github.io/moment-datepicker/

不过,您不需要使用该插件,您只需要编写自己的自定义绑定(bind)处理程序来处理获取和设置日期。我过去使用过的一个例子 -

注册一个绑定(bind)处理程序来格式化要绑定(bind)的日期 -

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

//handle the field changing
ko.utils.registerEventHandler(element, "change", function () {
var observable = valueAccessor();
observable($(element).datepicker("getDate"));
});

//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).datepicker("destroy");
});

},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());

if (String(value).indexOf('/Date(') == 0) {
value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
}

var current = $(element).datepicker("getDate");

if (value - current !== 0) {
$(element).datepicker("setDate", value);
}
}
};

然后是标记 -

<div class="span4">
<label>Start Date : </label><input data-bind="datepicker: startDate, datepickerOptions: { maxDate: new Date() }" />
</div>

注意:此答案来自其他答案的汇总。

关于asp.net-mvc - knockout js引导日期选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16716909/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com