Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Knockout js Date format problem in Bootstrap table

Posted on 2014-02-05
2
Medium Priority
?
945 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 
LVL 82

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 82

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

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

705 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