Bind Date Using Knockoutjs

Question

I had a problem when binding a date to a text box using a knockout, as shown in the image below

When the page loads for the first time, I use ajax to get the AccountStatements data.

function AccountStatementViewModel(companyID) { var self = this; ... var AccountStatement = { AccountStatementID: self.AccountStatementID, CompanyID: self.CompanyID, Description: self.Description, Amount: self.Amount, ReceiptDate: self.ReceiptDate, Type: self.Type } self.AccountStatement = ko.observable(); self.AccountStatements = ko.observableArray(); $.ajax({ url: webroot + 'AccountStatement/GetAccountStatements', contentType: 'application/json; charset=utf-8', data: { id: self.CompanyID }, cache: false }).done(function (data) { self.AccountStatements(data); }); ... self.edit = function (accountStatement) { $('#lnkAddAccountStatement').hide('blind', 1000); $('#pnlAddEditAccountStatement').show('blind', 1000); self.AccountStatement(accountStatement); } ... } 

The controller returns the result in json:

 public JsonResult GetAccountStatements(int id) { var accountStatementsVM = db.AccountStatements .Where(a => a.CompanyID == id) .Select(a => new AccountStatementViewModel { AccountStatementID = a.AccountStatementID, CompanyID = a.CompanyID, Description = a.Description, Amount = a.Amount, ReceiptDate = a.ReceiptDate, Type = a.Type }) .ToList(); return Json(accountStatementsVM, JsonRequestBehavior.AllowGet); } 

ant result:

 [{"AccountStatementID":2,"CompanyID":1,"Description":"test","Amount":1000,"ReceiptDate":"/Date(1447261200000)/","Type":"Payment"}] 

In the view, I show it with this code:

 <tbody data-bind="foreach: AccountStatements, visible: AccountStatements().length > 0"> <tr> <td data-bind="attr: { id: AccountStatementID }"> <a href="#" class="btn btn-primary btn-xs" data-bind="click: $root.edit"><i class="glyphicon glyphicon-pencil"></i></a> <a href="#" class="btn btn-danger btn-xs" data-bind="click: $root.delete"><i class="glyphicon glyphicon-remove"></i></a> </td> <td data-bind="text: Description"></td> <td data-bind="text: Amount"></td> <td data-bind="date: ReceiptDate"></td> </tr> </tbody> 

Here is the code for formatting the date:

 ko.bindingHandlers.date = { update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor()); var textContent = moment(valueUnwrapped).format("DD/MM/YYYY"); ko.bindingHandlers.text.update(element, function () { return textContent; }); } }; 

At this point, the date is displayed in the correct format, and then, if I clicked the edit button, ReceiptDate is not formatted in the text box.

Code for ReceiptDate TextBox:

 <input type="text" placeholder="Enter Receipt Date" class="form-control fdatepicker" readonly="readonly" data-bind="value: AccountStatement().ReceiptDate" /> 

If I go to data-bind="date: AccountStatement().ReceiptDate" , the text box will be empty.

How to format a date in a text box?

UPDATE

I changed the date binding handler as in this link

and the date of receipt in the table becomes empty:

 <td data-bind="date: ReceiptDate"></td> 

Answer 1

Fulfilling custom bets is redundant. Your custom binding does nothing worthy of a custom binding.

All you need is a computed case that returns the text format of the current date.

Let's say you have this variable somewhere:

 var myDate = ko.observable(); 

And somewhere you have code that puts some kind of date object in it:

 myDate( input ); // where input is some date object you got somehow from somewhere 

Now you only need the following:

 myDate.formatted = ko.pureComputed(function() { return moment(myDate()).format("DD/MM/YYYY"); }); 

Now you can just use plain text binding:

(suppose you have myDate in the view model associated with this view)

 <td data-bind="text: myDate.formatted"></td> 

Note:

There is nothing special about myDate.formatted . If you think about it, myDate is just a function, and functions are objects, so you can attach arbitrary fields to them.

Absolutely no different from creating a new variable:

 var myFormattedDate = ko.pureComputed(function() { return moment(myDate()).format("DD/MM/YYYY"); }); 

And using it in binding:

 <td data-bind="text: myFormattedDate"></td> 

Answer 2

In your update, $root.ReceiptDate does not exist. ReceiptDate is a member of the AccountStatement data. It is important to monitor the level of context.

Your date binding will be set to value , so you won’t be able to use it for anything that takes a text binding (for example, td in your update example).

You don’t need a binding for this, you just need a formatting function that you can use in whatever desire you choose. If you want to edit the value, you must be write-based based on your date value and use it in the value binding. I do not show it here.

 ajaxData = [{ "AccountStatementID": 2, "CompanyID": 1, "Description": "test", "Amount": 1000, "ReceiptDate": "/Date(1447261200000)/", "Type": "Payment" }]; vm = { AccountStatements: ko.observableArray(ajaxData), formatDate: function(textValue) { return moment(textValue).format("DD/MM/YYYY"); } }; ko.applyBindings(vm); // Add a row setTimeout(function() { vm.AccountStatements.push({ "AccountStatementID": 2, "CompanyID": 1, "Description": "test", "Amount": 1000, "ReceiptDate": "/Date(1448271200000)/", "Type": "Payment" }) }, 2500); 

 <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <table border=1> <tbody data-bind="foreach: AccountStatements, visible: AccountStatements().length > 0"> <tr> <td data-bind="attr: { id: AccountStatementID }"> <a href="#" class="btn btn-primary btn-xs" data-bind="click: $root.edit"><i class="glyphicon glyphicon-pencil"></i></a> <a href="#" class="btn btn-danger btn-xs" data-bind="click: $root.delete"><i class="glyphicon glyphicon-remove"></i></a> </td> <td data-bind="text: Description"></td> <td data-bind="text: Amount"></td> <td data-bind="text: $parent.formatDate(ReceiptDate)"></td> <td> <input type="text" class="form-control fdatepicker" readonly="readonly" data-bind="value: $parent.formatDate(ReceiptDate)" /> </td> </tr> </tbody> </table>