Knockout not sending updated value - regex

Question

I have a knockout page where I am formatting the input with regex. It makes the input field to a MM/dd/yyyy format. So if a user inputs "1111" it will change the input vbox to show "01/01/2011" or for "01111" it will show "01/01/2011".
The problem I am facing is that my observable only returning the keystroke entered by user and not the fully formatted item. For example , if user is entering "1111" I get back "1111" instead of the "01/01/2011"
Here is the Html segment
<input id="inpEventDt" placeholder="MM/DD/YYYY" class="input-small" data-date-blur="true" data-regex="^((\d{0,2})|(\d{1,2}/?\d{0,2})|(\d{1,2}/?\d{1,2}/?\d{0,4}))$"
type="text" data-bind="textInput: dateofevent"/>
And this is how I have the knockout binding
var ViewModel = function (eventdt ) {
var self = this;
self.dateofevent = ko.observable(eventdt);
}
viewModel = new ViewModel("");
ko.applyBindings(viewModel);
Trying to figure out what I am doing wrong.

Answer 1

I would not try to format the text input while the user is typing, because it makes a hard to understand user interface and non intuitive typing experience.
In addition, it's more complicated, because while typing, the input is likely invalid.
Try instead to format your input on some event (blur for example), while validating it on keystroke:
var viewModel = function() {
var self = this;
var regex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
this.isValid = ko.observable(false);
this.date = ko.observable("");
this.format = function() {
self.validate(self.date());
// TODO: something else
}
this.validate = function(newVal) {
var matches = newVal.match(regex);
if (!matches || matches.length != 4) {
self.isValid(false);
} else {
self.isValid(true);
}
};
this.date.subscribe(function(newVal) {
self.validate(newVal);
});
this.style = ko.computed(function() {
return self.isValid() ? "valid" : "invalid";
}, this);
};
var vm = new viewModel();
ko.applyBindings(vm);
.invalid {
border: 1px solid red;
}
.valid {
border: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input id="inpEventDt" placeholder="MM/DD/YYYY" class="input-small" data-date-blur="true" type="text" data-bind="textInput: date, event: { blur: format }, css: style" />
<div data-bind="visible: isValid">OK</div>

Answer 2

You should try using a read/write computed for this. Check out the example 3 in the knockout documentation for computed observables.
Also, here is a jsfiddle using moment.js to help with date formatting.
var ViewModel = function (eventdt ) {
var self = this;
self.dateofevent = ko.observable(eventdt);
self.formattedDate = ko.pureComputed({
read: function () {
return moment(self.dateofevent()).format("MM/DD/YYYY");
},
write: function (value) {
self.dateofevent(moment(value).toDate()); // Write to underlying storage
}
});
}
viewModel = new ViewModel(new Date("03/25/2015"));
ko.applyBindings(viewModel);