How to format date using jquery from the output

Question

I'm trying to display date format as I wanted but none of the solutions did not work for me.

$(document).ready(function() {

  var html = '';
  var startDate = '07/04/2017';
  var chunks = startDate.split('/');
  var startformattedDate = chunks[1] + '-' + chunks[0] + '-' + chunks[2];

  var endDate = '15/04/2017';
  var chunks1 = endDate.split('/');
  var endformattedDate = chunks1[1] + '-' + chunks1[0] + '-' + chunks1[2];

  var start = new Date(startformattedDate);
  var end = new Date(endformattedDate);
  var data = [];

  while (start <= end) {
    data.push(new Date(start));
    start.setDate(start.getDate() + 1);
  }
  for (i = 0; i < data.length; i++) {
    html += '<tr><td>' + data[i] + '</td></tr>';
  }
  $('.Dates').append(html);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="Dates">
</table>

I want to display the date either of below formats. How do I do that?

Fri Apr 07 2017 or Fri 7th Apr 2017

I tried using below formats but none of them does not match my desired output

new Date().toISOString()

new Date().toISOString().split('T')[0];

new Date().toISOString().replace('-', '/').split('T')[0].replace('-', '/');

new Date().toLocaleString().split(',')[0]

Any suggestions, please!

Carsten Løvbo Andersen · Accepted Answer · 2017-08-01 06:19:29Z

1

U can use new Date().toString().substring(0,15)

new Date().toString() will return a format like this: Tue Aug 01 2017 08:14:20 GMT+0200 (Romance Daylight Time)

Then by adding .substring(0,15) we can take this part out Tue Aug 01 2017

console.log(new Date().toString().substring(0,15))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Here is your code and working example

$(document).ready(function() {

  var html = '';
  var startDate = '07/04/2017';
  var chunks = startDate.split('/');
  var startformattedDate = chunks[1] + '-' + chunks[0] + '-' + chunks[2];

  var endDate = '15/04/2017';
  var chunks1 = endDate.split('/');
  var endformattedDate = chunks1[1] + '-' + chunks1[0] + '-' + chunks1[2];

  var start = new Date(startformattedDate);
  var end = new Date(endformattedDate);
  var data = [];

  while (start <= end) {
    data.push(new Date(start));
    start.setDate(start.getDate() + 1);
  }
  for (i = 0; i < data.length; i++) {
    html += '<tr><td>' + data[i].toString().substring(0,15) + '</td></tr>';
  }
  $('.Dates').append(html);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="Dates">
</table>

answered Aug 1, 2017 at 6:19

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Milan Chheda Over a year ago

Oops. Same as mine and I didn't saw this while I was coding it in the code-editor. Difference of 30 seconds :)

Carsten Løvbo Andersen Over a year ago

@06011991 No problem, happy to help

Milan Chheda · Accepted Answer · 2017-08-01 06:20:41Z

1

You can use substring to get your required date format:

$(document).ready(function() {

  var html = '';
  var startDate = '07/04/2017';
  var chunks = startDate.split('/');
  var startformattedDate = chunks[1] + '-' + chunks[0] + '-' + chunks[2];

  var endDate = '15/04/2017';
  var chunks1 = endDate.split('/');
  var endformattedDate = chunks1[1] + '-' + chunks1[0] + '-' + chunks1[2];

  var start = new Date(startformattedDate);
  var end = new Date(endformattedDate);
  var data = [];

  while (start <= end) {
    data.push(new Date(start));
    start.setDate(start.getDate() + 1);
  }
  for (i = 0; i < data.length; i++) {

    html += '<tr><td>' + data[i].toString().substring(0, 15) + '</td></tr>';
  }
  $('.Dates').append(html);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="Dates">
</table>

answered Aug 1, 2017 at 6:20

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

1 Comment

06011991 Over a year ago

Thank you for the solution :)

harsh zalavadiya · Accepted Answer · 2017-08-01 06:23:55Z

0

Insted of appending data[i] in loop you can use it like

for (i = 0; i < data.length; i++) {
   html += '<tr><td>' + data[i].toString().split(" 00")[0] + '</td></tr>';
}

answered Aug 1, 2017 at 6:23

harsh zalavadiya

3852 silver badges9 bronze badges

Comments

Earlee · Accepted Answer · 2017-08-01 06:28:53Z

0

If you are using jQuery UI, then you may do so with the following:

var formatted_date = $.datepicker.formatDate('D M dd yy', new Date());
// Fri Apr 07 2017

var formatted_date = $.datepicker.formatDate('D M dth yy', new Date());
// Fri Apr 7th 2017

Note: for the second one, it doesn't work well with 1st, 2nd, 3rd... because it will output 1th, 2th, 3th, but you can try creating an if condition before returning a format.

answered Aug 1, 2017 at 6:28

Earlee

3684 silver badges18 bronze badges

Comments

Sohel Rana · Accepted Answer · 2017-08-01 06:33:45Z

0

var formateJsonDateToSimpleDateFormate=function(jsondate){
var datePart=jsondate.split('T')[0];
datePart=datePart.substring(0,10);
var dateNew=datePart.split('-');
var date=dateNew[2]+'/'+dateNew[1]+'/'+dateNew[0];
return date;
}

I did this. and it worked for me. and

 var formateJsonDateToSimpleDateFormate=function(jsondate){
  var d=new Date(parseInt(jsondate.slice(6,-2)));
 var hour=d.getHours()==0?12:(d.getHours()>12?d.getHours()-12:d.getHours());
var min=d.getMinutes<10?'0'+d.getMinutes():d.getMinutes();
var ampm=d.getHours()<12?'AM':'PM';
hour=hour<10?'0'+hour:hour;
var time=hour+':'+min+' '+ampm;
var date=d.getDate()+'-'+getMonthNameInShortForm(1+d.getMonth())+'-'d.getFullYear()+ " "+time;
return date;

}

var getMonthNameInShortForm=function(monthNumber){
var months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
return months[monthNumber+1];
}

edited Aug 1, 2017 at 6:33

answered Aug 1, 2017 at 6:22

Sohel Rana

1912 silver badges14 bronze badges

1 Comment

Sohel Rana Over a year ago

you should split by "/" and append with "-"

Shailendra Mishra · Accepted Answer · 2017-08-01 06:37:19Z

0

You can use jquery-dateFormat without jQuery. You just need to import the dateFormat.js above and instead of formatting with $.format(...) you should use DateFormat.format('D M dth yy').

For more check the document..

edited Aug 1, 2017 at 6:37

answered Aug 1, 2017 at 6:29

Shailendra Mishra

7110 bronze badges

Collectives™ on Stack Overflow

How to format date using jquery from the output

6 Answers 6

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related