Question

我正在尝试使用KnockoutJs和jqueryUI datetimepicker实现过于简单的Datetime绑定。

它正在研究小提琴，并创建了一个html文件并将代码放入其中，它也在工作。然后我创建了一个只有一个html文件的Asp.Net项目，运行良好。

但是在我的实际MVC 4项目中，它不起作用。检查jquery和knockoutJs版本，与jsfiddle看起来相同。

  <label>Y</label>
    <input id="datepick"  data-bind="value: y"/>
   <p><span data-bind="text: y"></span></p>

JS：

  var checkin = $('#datepick').datepicker({ dateFormat: 'dd/mm/yy' });
  var viewModel=function(){
  var self=this;

  var today = new Date(); var dd = today.getDate(); var mm = today.getMonth() + 1; var yyyy = today.getFullYear();
    //January is 0! 
    if (dd < 10) { dd = '0' + dd } if (mm < 10) { mm = '0' + mm }
    today = dd + '/' + mm + '/' + yyyy;

    self.y = ko.observable(today);
     }
     var VM = new viewModel();  

   ko.applyBindings(VM);

jsfiddle

Mvc项目页面： https://desk.datasel.com.tr/AISDev/Home/Knockout1

Answer 1

尝试

将您的代码包裹在DOM Ready

中

$(function () {
    var checkin = $('#datepick').datepicker({
        dateFormat: 'dd/mm/yy'
    });
    var viewModel = function () {
        var self = this;
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1;
        var yyyy = today.getFullYear();
        //January is 0! 
        if (dd < 10) {
            dd = '0' + dd
        }
        if (mm < 10) {
            mm = '0' + mm
        }
        today = dd + '/' + mm + '/' + yyyy;
        self.y = ko.observable(today);
    }
    var VM = new viewModel();
    ko.applyBindings(VM);
});

Answer 2

这就是我正在做的事情。（使用Jquery UI datepicker和Momemt.js）

我有一个绑定处理程序。在互联网的某个地方挑选它（不记得了）

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();
            var newDate = $(element).datepicker("getDate");
            // newDate format is 2013-01-11T06:11:00.000Z
            observable(moment(newDate).format('MM/DD/YYYY'));
        });

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

    },
    // get the value from the viewmodel and format it for display
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var date = moment(value);
        current = $(element).datepicker("getDate");

        if (value != null) {
            if (value - current !== 0) {
                date = moment(value);
                $(element).val(date.format("DD-MM-YYYY"));
            }
        }
    }
};

像这样使用它。 data-bind="datepicker: DueDate"

<input data-bind="datepicker: DueDate" id="DueDate" name="DueDate" type="text">

Answer 3

我猜测问题与MVC有关。创建了新的MVC 4项目并将代码放在主页上，因此问题正在发生。

_Layout页面上的

更改了所有javascript引用语法：

    <script language="javascript" type="text/javascript" src="@Url.Content("~/Content/jquery/js/jquery-1.9.1.js")"></script>

要

@Scripts.Render("~/bundles/jquery")

同样在 BundleConfig.cs 上创建了这样的包：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-1.10.2.js", "~/Scripts/jquery-ui-1.10.4.custom.js", "~/Scripts/knockout-3.0.0.js"));

任何人都可以解释为什么我应该使用“捆绑”添加脚本才能在MVC上正确使用它们？它只是在单个.html文件上工作，也适用于ASP.NET。

Mvc - Knockout Datepicker绑定对MVC4不起作用

3 个答案: