KnockoutJS处理bootstrap datepickers和日期格式 [英] KnockoutJS dealing with bootstrap datepickers and date formats
问题描述
这是我正在使用的日期选择器绑定（我很抱歉，但我忘记了我把它拿走了所以我无法给予作者适当的信用。如果我记得，我会编辑。）
This is the datepicker binding i'm using (im sorry but i forgot where i took it so i can't give the author proper credit. I will edit if i remember.)
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"}' />
这个datepicker绑定和一般的Bootstrap datepicker处理Date对象。所以我的observable将包含日期。
This datepicker binding, and Bootstrap datepicker in general, deals with Date objects. So my observable will contain Dates.
当我发布数据时，我在控制台中看到它以自然的JS toString（）格式发布，这可能会根据您的区域设置而有所不同。对我而言，
When i post data i see in console that it's posted with natural JS toString() format, which can vary according to your locale settings. For me, its
Mon Dec 02 2013 01:00:00 GMT+0100 (ora solare Europa occidentale)
当我收到服务器端的这个值时，由于这种奇怪的格式，我无法处理它。
When i receive this value server-side, i can't handle it because of this weird format.
我当然可以在发布之前重写我的模型日期属性，就像这样
I could of course rewrite my model date attribute before posting, like so
this.save = function(model) {
model.date(model.date().format('YYYY-MM-DD'));
$.post(someEndpoint, {model: model});
}
但这不是通用解决方案，而且当更新model.date时对于字符串表示，datepicker会触发错误，因为它期待Date。
but this is not a general purpose solution, furthermore when model.date is updated to string representation, datepicker triggers an error since it's expecting Date.
你会怎么处理这个？
推荐答案
对于 Bootstrap 3.0及更高版本，这些对我有用：
仅限日期
为了显示日期，我使用此bindingHandler：
Date Only For displaying the date, I use this 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 变量出现问题。即：
You'll need Moment.js. The datepicker used for this is located here
I'm using a C# backend, and posting to an MVC Controller or Web API controller poses no issues with DateTime variables. I.e:
this.save = function(model) {
$.post(someEndpoint, {model: ko.toJSON(model)});
}
日期和时间
为了显示，我使用这个bindingHandler：
Date and Time For displaying, I use this 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("-");
}
}
}
};
为了设置日期时间，我使用这个处理程序：
For setting the datetime, I use this handler:
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>
我的服务器端方法如下所示：
My server side method looks something like this:
[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中生成：
The string version of the date (sFrom), is generated in my Javascript before I post to the server:
function saveModel(model) {
model.sFrom(model.FromDate().toString());
$.post(someendpoint, { model: ko.toJSON(model) }, function(data) {
ko.mapping.fromJS(data, {}, model);
});
}
再次，这使用 Moment.js ，这个版本的datetimepicker是这里
Again, this uses Moment.js and this version of the datetimepicker is here
这篇关于KnockoutJS处理bootstrap datepickers和日期格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
