KnockoutJS处理引导程序日期选择器和日期格式
KnockoutJS dealing with bootstrap datepickers and date formats
这是我正在使用的日期选择器绑定（对不起，我忘了把它带到哪里了，所以我不能给作者适当的信任。如果我记得，我会编辑。）
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();
}
}
}
};
function Model() {
this.date = ko.observable();
}
function VM() {
this.model = new Model();
this.save = function(model) {
$.post(someEndpoint, {model: model});
}
}
<input type='text' data-bind='datepicker: model().date,
datepickerOptions: { format:"dd/mm/yyyy"}' />
此日期选择器绑定以及一般的Bootstrap日期选择器处理Date对象。因此，我的观察结果将包含日期。
当我发布数据时，我在控制台中看到它是用自然的JS-toString（）格式发布的，根据您的区域设置，这种格式可能会有所不同。对我来说，它的
Mon Dec 02 2013 01:00:00 GMT+0100 (ora solare Europa occidentale)
当我在服务器端收到这个值时，由于这种奇怪的格式，我无法处理它。
我当然可以在发布之前重写我的模型日期属性，就像一样
this.save = function(model) {
model.date(model.date().format('YYYY-MM-DD'));
$.post(someEndpoint, {model: model});
}
但这不是一个通用的解决方案，此外，当model.date更新为字符串表示时，datepicker会触发一个错误，因为它需要date。
你会怎么处理？
对于Bootstrap 3.0及更高版本，这些对我有效：
仅限日期为了显示日期，我使用这个bindingHandler:
window.ko.bindingHandlers.datetext = {
init: function (element, valueAccessor, allBindingsAccessor) {
// Provide a custom text value
var value = valueAccessor(), allBindings = allBindingsAccessor();
var dateFormat = allBindingsAccessor.dateFormat || "M/D/YYYY";
var strDate = window.ko.utils.unwrapObservable(value);
if (strDate) {
if (moment(strDate).year() > 1970) {
var date = moment(strDate).format(dateFormat);
$(element).text(date);
}
else {
$(element).text("-");
}
}
},
update: function (element, valueAccessor, allBindingsAccessor) {
// Provide a custom text value
var value = valueAccessor(), allBindings = allBindingsAccessor();
var dateFormat = allBindingsAccessor.dateFormat || "M/D/YYYY";
var strDate = window.ko.utils.unwrapObservable(value);
if (strDate) {
if (moment(strDate).year() > 1970) {
var date = moment(strDate).format(dateFormat);
$(element).text(date);
}
else {
$(element).text("-");
}
}
}
};
HTML
<!-- Display the date -->
<span data-bind="datetext: StartingDate"></span>
<!-- Set the date -->
<div class="input-group date">
<input type="text" class="form-control" data-provide="datepicker" data-bind="value: StartingDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
您需要Moment.js。用于此操作的日期选择器位于此处我使用的是C#后端，发布到MVC控制器或Web API控制器不会对DateTime变量造成任何问题。I.e:
this.save = function(model) {
$.post(someEndpoint, {model: ko.toJSON(model)});
}
日期和时间为了显示，我使用这个bindingHandler：
window.ko.bindingHandlers.datetimetext = {
init: function(element, valueAccessor, allBindingsAccessor) {
// Provide a custom text value
var value = valueAccessor(), allBindings = allBindingsAccessor();
var dateFormat = allBindingsAccessor.dateFormat || "M/D/YYYY h:mm a";
var strDate = window.ko.utils.unwrapObservable(value);
if (strDate) {
if (moment(strDate).year() > 1970) {
var date = moment(strDate).format(dateFormat);
$(element).text(date);
} else {
$(element).text("-");
}
}
},
update: function(element, valueAccessor, allBindingsAccessor) {
// Provide a custom text value
var value = valueAccessor(), allBindings = allBindingsAccessor();
var dateFormat = allBindingsAccessor.dateFormat || "M/D/YYYY h:mm a";
var strDate = window.ko.utils.unwrapObservable(value);
if (strDate) {
if (moment(strDate).year() > 1970) {
var date = moment(strDate).format(dateFormat);
$(element).text(date);
} else {
$(element).text("-");
}
}
}
};
为了设置日期时间，我使用以下处理程序：
window.ko.bindingHandlers.datetimepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
$(element).parent().datetimepicker();
window.ko.utils.registerEventHandler($(element).parent(), "change.dp", function (event) {
var value = valueAccessor();
if (window.ko.isObservable(value)) {
var thedate = $(element).parent().data("DateTimePicker").getDate();
value(moment(thedate).toDate());
}
});
},
update: function(element, valueAccessor) {
var widget = $(element).parent().data("DateTimePicker");
//when the view model is updated, update the widget
var thedate = new Date(parseInt(window.ko.utils.unwrapObservable(valueAccessor()).toString().substr(6)));
widget.setDate(thedate);
}
};
HTML
<!-- Display the date -->
<span data-bind="datetimetext: FromDate"></span>
<!-- Set the date -->
<a data-bind="attr:{id: Id}" class="input-group date">
<input type="text" class="form-control" data-bind="datetimepicker: FromDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</a>
我的服务器端方法看起来像这样：
[HttpPost]
public async Task<ActionResult> Update(MyViewModel myModel)
{
if (myModel.FromDate == new DateTime(0001, 01, 01))
{
if (!string.IsNullOrEmpty(myModel.sFrom))
{
myModel.sFrom = myModel.sFrom.Replace("/Date(", "").Replace(")", "").Replace("/", "").Trim();
var ticks = Convert.ToInt64(myModel.sFrom);
myModel.FromDate = new DateTime(1970, 1, 1).AddTicks(ticks * 10000).AddHours(-6);
}
}
var item = Mapper.Map<MyClass>(myModel);
await Task.Run(() => _myService.Save(item));
return Json(myModel);
}
有一个类似的模型：
public class MyViewModel
{
public Guid Id { get; set; }
public DateTime FromDate { get; set; }
public string sFrom { get; set; }
}
日期的字符串版本（sFrom）是在我发布到服务器之前在我的Javascript中生成的：
function saveModel(model) {
model.sFrom(model.FromDate().toString());
$.post(someendpoint, { model: ko.toJSON(model) }, function(data) {
ko.mapping.fromJS(data, {}, model);
});
}
同样，它使用Moment.js，这个版本的日期时间选择器在这里
相关文章：
- Javascript日期格式类似于ISO，但本地
- NodeJS日期格式不起作用
- 将客户端特定的日期格式返回到服务器MVC4
- ui网格日期单元格过滤器，过滤日期格式导致显示错误的日期
- 将Javascript日期转换为ASP.NET日期格式
- 在达到状态之前在Redux Reducer中设置日期格式
- 如何从Angularjs中的新日期获取日期格式
- 如何使用jquery更改为所需的日期格式
- keith wood日期选择器日期格式和语言
- Dygraph更改日期格式
- 确定Twig(或JavaScript）中的国际日期格式，以便在其他地方使用
- javascript和jquery日期格式转换
- 用javascript将日期格式从d/m/yyyy转换为yyyy-mm-dd
- 在Datepicker中将日期格式更改为yyyy-mm-dd
- 在Karma Jasmine单元测试用例中检查日期格式
- 使用不同的日期格式和区域设置创建时刻
- 更改日期选择器上的日期格式
- 以日期计算的天数更改日期格式
- 带有onchange的日期格式
- 如何从区域设置获取日期格式
