Tuesday, 15 February 2011

asp.net mvc 5 - Change input date format when using Knockout.js to mm/yyyy -



asp.net mvc 5 - Change input date format when using Knockout.js to mm/yyyy -

i need alter date input format 2 dates in our application, not rest of app. these 2 inputs need collect month , year mm/yyyy. collecting in format mm/dd/yyyy. using knockout.js

<li> <label class="required_label">date of event</label> <input style="width: 140px;" type="text" data-bind="date: eventdate" /> </li> <li> <label class="required_label">date of lawsuit</label> <input style="width: 140px;" type="text" data-bind="date: lawsuitdate" /> </li>

i added new binding handler called date2 datehandler file

<li> <label class="required_label">date of event</label> <input style="width: 140px;" type="text" data-bind="date2: eventdate" /> </li> <li> <label class="required_label">date of lawsuit</label> <input style="width: 140px;" type="text" data-bind="date2: lawsuitdate" /> </li> /// <reference path="../../typings/moment/moment.d.ts" /> /// <reference path="../../typings/masked.input/masked.input.d.ts" /> /// <reference path="../../typings/knockout/knockout.d.ts" /> /// <reference path="../../typings/knockout.validation/knockout.validation.d.ts" /> interface knockoutbindinghandlers { date: knockoutbindinghandler; date2: knockoutbindinghandler; } // mm/dd/yyyy format ko.bindinghandlers.date = { init: (element, valueaccessor) => { $(element).mask("99/99/9999", { placeholder: "mm/dd/yyyy" }); ko.utils.registereventhandler(element, "change", () => { var value = valueaccessor(); if (moment(element.value).isvalid()) { value(element.value); } else { value(null); } }); ko.validation.makebindinghandlervalidatable("date"); }, update: (element, valueaccessor, allbindingsaccessor) => { var value = valueaccessor(); var allbindings = allbindingsaccessor(); var valueunwrapped: = ko.utils.unwrapobservable(value); var pattern = allbindings.format || "mm/dd/yyyy"; var output = null; if (valueunwrapped !== null && valueunwrapped !== undefined && valueunwrapped.length > 0) { output = moment(valueunwrapped).format(pattern); } if ($(element).is("input") === true) { $(element).val(output); } else { $(element).text(output); } } }; // mm/yyyy format ko.bindinghandlers.date2 = { init: (element, valueaccessor) => { //$(element).mask("99/99/9999", { placeholder: "mm/dd/yyyy" }); $(element).mask("99/9999", { placeholder: "mm/yyyy" }); ko.utils.registereventhandler(element, "change", () => { var value = valueaccessor(); if (moment(element.value).isvalid()) { value(element.value); } else { value(null); } }); ko.validation.makebindinghandlervalidatable("date"); }, update: (element, valueaccessor, allbindingsaccessor) => { var value = valueaccessor(); var allbindings = allbindingsaccessor(); var valueunwrapped: = ko.utils.unwrapobservable(value); //var pattern = allbindings.format || "mm/dd/yyyy"; var pattern = allbindings.format || "mm/yyyy"; var output = null; if (valueunwrapped !== null && valueunwrapped !== undefined && valueunwrapped.length > 0) { output = moment(valueunwrapped).format(pattern); } if ($(element).is("input") === true) { $(element).val(output); } else { $(element).text(output); } } }; ko.validation.rules["simpledate"] = { validator: (val: any, validate: any) => { if (val == null) homecoming true; homecoming moment(val).isvalid(); }, message: "invalid date" };

knockout.js asp.net-mvc-5

No comments:

Post a Comment