Formatting Date

Question

I am on MVC.

In my model i got a variable Datetime

In my view I am trying to give this a format when the page loads.

Control

 @Html.TextBoxFor(m => m.RequestedLaunchDate, new { @class = "dateselector", @style = "float:left;" })

my JS is like

            var now = new Date();//Today's date
            now.format("dd/MM/yyyy");
            $(".dateselector").datepicker("setDate", now);

But still when the page loads i get the display as

18/03/2014 00:00:00

Why ?

What did I do wrong ?

now.format("dd/MM/yyyy"); -> TypeError: Object [object Date] has no method 'format'. I'd recommend using [moment.js](http://momentjs.com/). — Nicolae Olariu, Mar 18 '14 at 07:59
and if `format` does exits, I'd expect it to return a new value, not mutate the original date. — Jamie Dixon, Mar 18 '14 at 07:59
Have you considered changing the type of `RequestedLaunchDate` to `string`, and formatting it server-side? — Richard Ev, Mar 18 '14 at 08:12
What is wrong is that you are feeding a string to your datepicker while it expects a date. Set the formatting on the datepicker like Emil H's answer. — Peter, Mar 18 '14 at 08:46

Emil L · Accepted Answer · 2014-03-18T08:20:54.783

Date in javascript has no format method defined (by default). What you probably want is to pass the formatting to jQuery UI datepicker as documented here. Something along the lines of:

var now = new Date();//Today's date
$(".dateselector").datepicker( "option", "dateFormat", "dd/MM/yyyy" );
$(".dateselector").datepicker("setDate", now);

This will set change how the datepicker formats your date. If you add it somewhere else on your page you can use:

var dateString = $.datepicker.formatDate( "dd/MM/yyyy", date );

This will give you a string representation of the date formatted as you wish.

Another, more robust way, would be to set the locale you want:

var locale = 'de'; // Use the locale you want.
$.datepicker.setDefaults( $.datepicker.regional[ locale ] );

Setting this will localize your datepicker along with the date format displayed in it.

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

Date object in JavaScript has no format method by default. You might use some plugin such as moment.js.

However, you can do that without any JavaScript, but using the following data annotation on server side:

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]

Put this line of code to right above the RequestedLaunchDate property of your Model

Or you can refer to this post for more options about formatting date with JavaScript.

edited May 23 '17 at 10:25

Community

1
1

answered Mar 18 '14 at 08:18

Zafar

3,394
4
28
43

I downvoted because he is using a datepicker and the datepicker should be responsible for displaying the correct format. – Peter Mar 18 '14 at 08:47

score 0 · Answer 3 · edited Mar 18 '14 at 09:24

0

  var now = new Date();//Today's date 
  $(".dateselector").datepicker("setDate", now);

Solved my problem.

edited Mar 18 '14 at 09:24

Emil L

20,219
3
44
65

answered Mar 18 '14 at 08:48

Nishant Rambhojun

77
1
2
10

2

Emil H. has said the same thing, only more elaborate, hasn't he? – Peter Mar 18 '14 at 09:08

score 0 · Answer 4 · answered Mar 18 '14 at 09:30

var now = new Date();//Today's date
var day = now.getDate();
var month = now.getMonth()+1;
var year = now.getFullYear();
if (month < 10) { month = '0' + month; }
var newDate=(day + '/' + month + '/' + year); // This will give "dd/mm/yyyy"

$(".dateselector").datepicker("setDate", newDate);

score -1 · Answer 5 · answered Mar 18 '14 at 08:09

please try to this solution to formate date.

It will help you:

var format_date = function(date){
    return  ("0"+date).slice(-2)
}
var format_month = function(month){
   return  ("0"+month).slice(-2)
}
var now = new Date();

formate_complete_date = format_date(now.getDate())+"/"+format_month(now.getMonth())+"/"+now.getFullYear() +" "+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();

console.log(formate_complete_date)

Formatting Date

5 Answers5