Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Knockout js Date format problem in Bootstrap table

Posted on 2014-02-05
2
Medium Priority
?
965 Views
Last Modified: 2014-02-08
I am new to knockout js:

I am trying to display a Date in a Bootstrap table using knockout js data binding

The Json data coming across from the server includes a CreatedDate

[{"Id":"000eb141-cb55-4582-a4f9-0f428e77ae1f","CreatedDate":"\/Date(1391628264240)\/","Reference":"8888","Notes":"bddddd","TotalAmount":96.00,"Status":"Draft","CostCentre":"Science","NextStatus":"Sent For Approval","NextActionText":"Send For Approval","CanDelete":true,"CanAuthorise":false,"CanExecuteNextAction":true

When I bind the date in my bootstrap table
 <td data-bind="text: CreatedDate"></td>

I get:  /Date(1391628264240)/  displayed in the CreatedDate column.

What do I have to do to get the date to display in dd/MM/yyyy format?
0
Comment
Question by:ccravenbartle
  • 2
2 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 39838859
Format the date on the server side :
I know you do a query from the database and just apply json_encode to the full result but you need to loop over each resulted row and do something similar to :

	$CreatedDate = '/Date(1391628264240)/';
	preg_match("/[0-9]+/", $CreatedDate, $matches);
	$CreatedDate = date("d-m-Y", $matches[0]/1000);

Open in new window

0
 
LVL 83

Expert Comment

by:leakim971
ID: 39839560
Test page if you're able to loop over data on the client side : http://jsfiddle.net/mX28D/

var arr = [
  {
    "CreatedDate": "\/Date(1391628264240)\/",
    "Reference": "8888",
    "Notes": "bddddd",
    "TotalAmount": 96.00,
    "Status": "Draft",
    "CostCentre": "Science",
    "NextStatus": "Sent For Approval",
    "NextActionText": "Send For Approval",
    "CanDelete": true,
    "CanAuthorise": false,
    "CanExecuteNextAction": true
  }
];

var ViewModel = function(first, last) {
    this.CreatedDate = ko.observable("06/02/2014");
};

var m = new ViewModel();
ko.applyBindings(m);

var date = arr[0].CreatedDate;
date = date.replace(/\D/g,""); // remove parentheses
date = date * 1; // It's now a number
date = new Date(date);
var d2 = function(n) { return n>9?n:"0"+n; };
date = d2(date.getDate()) + "/" + d2(date.getMonth()+1) + "/" + date.getFullYear();
m.CreatedDate(date); // 05/02/2014

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question