Question

I m using a jQuery UI datepicker. The HTML input field behind it is currently hooked up to KnockoutJS as a dependentObservable, but when its value is set in the viewmodel, the datepicker loses its format.

我应如何这样做,不要失去形式? 我不想知道它是jQuerydatepicker。

Answer 1

您可以撰写一份具有拘束力的习俗,用日光机标出实地的日期,并通过适当阅读日期确定您的观察价值。

具有约束力的习俗可考虑:

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {},
            $el = $(element);

        //initialize datepicker with some optional options
        $el.datepicker(options);

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

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

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element),
            current = $el.datepicker("getDate");

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

你们会利用它:

<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" />

www.un.org/Depts/DGACM/index_french.htm 这将是任择性的,可以包括你希望通过<代码>datepicker()。

此外,这假设你正在使用可观察的日期。如果你想要做到一条对不值得注意的单向约束,那么约束力就只能做些什么。

Sample here: http://jsfiddle.net/rniemeyer/NAgNV/

Answer 2

我不得不对RP Niemeyer的法典稍作改动,以便采用日期选择,以代替日期。

$(element).datepicker("getDate")

With

$(element).val()

因此,该日期的格式版本在顶点上照样通过。

Answer 3

我先使用PRP Niemeyer的代码,上面作了回答,但自我使用这个编号以来,我已经做了一些小改动。我认为我会在这里发言。也许会帮助其他人。与此相对照的是,唯一的区别是,如果该要素在页数上具有价值,那么该要素将保留其价值。另外,我还发表了<条码>。 a 变数,因此将较少处理<代码>$(element),j Query将不得不这样做。

ko.bindingHandlers[ jqDatePicker ] = {
     init : function(element, valueAccessor, allBindingsAccessor) {
        /* Initialize datepicker with some optional options */
        var options = allBindingsAccessor().jqDatePickerOptions || {},
            prop = valueAccessor(),
            $elem = $(element);

        prop($elem.val());

        $elem.datepicker(options);

        /* Handle the field changing */
        ko.utils.registerEventHandler(element, "change", function () {
            prop($elem.datepicker("getDate"));
        });

        /* Handle disposal (if KO removes by the template binding) */
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $elem.datepicker("destroy");
        });
    },
     update : function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $elem = $(element),
            current = $elem.datepicker("getDate");

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

Answer 4

Here is what worked for my particular set of circumstances. I m running a new enough version of MVC, that the default datetime serializer renders at ISO 8601 (see On the nightmare that is JSON Dates. Plus, JSON.NET and ASP.NET Web API). My bindings do not write directly to the date picker, but instead to an input tag s "value" attribute.

另外,值得注意的是,使用

ko.bindingHandlers.dateValue = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor(),
            allBindings = allBindingsAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        var pattern = allBindings.datePattern ||  MM/dd/yyyy ;
        var date = Date.parse(valueUnwrapped)
        $(element).val(date.toString(pattern));
    },

    init: function(element, valueAccessor, allBindingsAccessor) {
        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            var date = Date.parse($(element).val());
            observable(date.toString("yyyy-MM-ddThh:mm:ss"));
        });
    }
}

looks:

<input class="date" type="text" data-bind="dateValue: SomeViewModelDate" />

Java成典法改写日期:

$(document).ready(function () {
    $( .date ).datepicker({ dateFormat: "mm/dd/yy" });
});

Answer 5

以上日期的样本从 WCF格式改为 Java式格式,用户选择从日光机控制的新日期。

就我而言,我是把这个日期转回一个世界合作框架服务机构,它不会接受一个被淡化的 Java本日,而是需要以世界合作框架格式的日期。我修改了上述文字,以便用WCF格式在电文中储存这一日期,从而能够以这种格式将其送回服务器。

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"));
            // store the date in  WCF String format"
            var tempdate=$(element).datepicker("getDate");
            var tempdatestr="/Date("+tempdate.getTime()+")/";
            observable(tempdatestr);
        });
        //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());
        //Handle date data coming via JSON from Microsoft
        if (String(value).indexOf( /Date( ) == 0) {
            value = new Date(parseInt(value.replace(//Date((.*?))//gi, "$1")));
        }
        current = $(element).datepicker("getDate");
        if (value - current !== 0) {
            $(element).datepicker("setDate", value);
        }
    }
};

Answer 6

一种解决办法是将日期安排在受扶养人内部。可观测功能。因此,您必须返回该职务中诸如<代码>return view Model.someObservable()等内容。 2. 收益价值的格式。

如果列入你的法典,我可以作更多的解释。

Answer 7

在受扶养人内的日期(以毫米/d/yyyy)格式显而易见的是,我非常想知道如何做到这一点。如果你能够帮助,我就把我的一些法典留给Peter Mortensen和/或NEEBz。

    <div data-bind="with: technology">  
        <div class="titleblock">
            <label><b>End of Life Date</b></label> 
            <Input  type="text" class="ui-datepicker" id="datepicker" data-bind="value: END_OF_LIFE_DATE"/>
        </div>       
    </div>

in ViewModel - technologydetail.js:

var technology = ko.observable();

in Activate:

return dataContext.getTechnologyById(currentTechnologyId, technology);

This displays a date that looks like this in the textbox: Wed Jan 29 19:00:00 EST 2014 but I want it to just show: 01/29/2014. I am using this datepicker option - dateFormat: "mm/dd/yy" but it has no effect on the initial value displayed.

我能够利用时间进行格式格式,并且为显示目前的数据库价值做了出色的工作,但似乎正在打破对可观测到的约束力,因为它将不再更新SAVE。

<Input type="text" class="ui-datepicker" id="datepicker" data-bind="value: moment(END_OF_LIFE_DATE()).format( MM/DD/YYYY )" />

友情链接