javascript - KnockoutJS 处理引导日期选择器和日期格式

Question

这是我正在使用的日期选择器绑定(bind)(我很抱歉，但我忘记了我把它放在哪里，所以我不能给作者适当的信用。如果我记得的话，我会编辑。) p>

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"}' />

这个日期选择器绑定(bind)，以及一般的 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。

你会如何处理这个问题？

Answer 1

对于 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 .用于此的日期选择器位于 here我正在使用 C# 后端，并且发布到 MVC Controller 或 Web API Controller 不会对 DateTime 变量造成任何问题。即:

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这个版本的日期时间选择器是 here