How to get custom format output from an input date?

Question

Please view the fiddle here.

I have a text box that inputs a date (in the format 12/11/2015) directly into the 'msg' placeholder of a paragraph.

The date displays just fine. But, I'm trying to get it to display in the following format -

$("#get").click(function (e) {
    e.preventDefault();
    $('#msg').html( $('input:text').val());   
    dateFormat: 'DD, MM d'
});

So, inputting today's date, as 12/11/2015 would yield a result of Friday, December 11

...but it's not working.

Where am I going wrong?

Take a look at [`toLocaleString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString), it can accomplish what you're looking for with the right options. See [this](http://stackoverflow.com/a/21748457/798634) SO answer for usage. — Matt K, Dec 11 '15 at 16:06

score 3 · Accepted Answer · answered Dec 11 '15 at 16:14

You can use Javascript Date Methods to get the desired output format.. Here is the w3schools page for reference, and here is code which gets the output you want:

$("#get").click(function (e) {
    e.preventDefault(); 
    var d = new Date( $('input:text').val() );
    var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
        var day = days[d.getDay()];
    var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var month = months[d.getMonth()];
    var date = d.getDate();
    var output = day+", "+month+" "+date;
     $('#msg').html( output ); 
});

JSFiddle

Shyju · Answer 2 · 2015-12-11T16:08:21.927

1

There is no direct way to get the stringified version of the month name and day name from the native Date object. You need to keep arrays of Month names and day names and query from that.

$(function(){
    $("#get").click(function (e) {
       e.preventDefault();
       var fDate = getDateFormatted($('input:text').val());
       $('#msg').html(fDate);   
   });

});    

function getDateFormatted(dateString)
{
  date = new Date(dateString);
  var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

 var monthNames = ["January", "February", "March", "April", "May", "June", "July",
                   "August", "September", "October","November", "December"];

  var day=date.getDay();
  var dayName = days[day+1];
  var monthIndex = date.getMonth();
  var year = date.getFullYear();

 return dayName + ', ' + monthNames[monthIndex+1] + ' ' +  date.getDate();

}

Here is a working sample.

edited Dec 11 '15 at 16:08

answered Dec 11 '15 at 15:45

Shyju

214,206
104
411
497

But, I want to display the output as (example) **Friday, December 11**, so would I just add another variable and list days of the week and then call it in the return string? – Millhorn Dec 11 '15 at 15:52
I saw your update on jsbin. It's interesting, but it's making sense. – Millhorn Dec 11 '15 at 15:56
My only question is why, when I enter today's date, **12/11/2015**, it returns a date string of **Friday, December 5** – Millhorn Dec 11 '15 at 16:01

score 0 · Answer 3 · answered Dec 11 '15 at 15:36

0

Try this

var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();

answered Dec 11 '15 at 15:36

Vishal Kamal

1,104
2
10
35

I updated the question. I'm trying to get the output to display as **DD, MM d** – Millhorn Dec 11 '15 at 15:37

score 0 · Answer 4 · edited May 23 '17 at 12:32

0

You have to add dateformat plugin for jquery. have a look at jQuery date formatting

edited May 23 '17 at 12:32

Community

1
1

answered Dec 11 '15 at 15:45

Shanthini

187
3
10

How to get custom format output from an input date?

4 Answers4