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(), it can accomplish what you're looking for with the right options. See this SO answer for usage. — Matt K
– Matt K, Commented Dec 11, 2015 at 16:06

Rishabh Rajgarhia · Accepted Answer · 2015-12-11 16:14:42Z

3

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

answered Dec 11, 2015 at 16:14

Rishabh Rajgarhia

7485 silver badges11 bronze badges

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

Comments

Shyju · Accepted Answer · 2015-12-11 16:08:21Z

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, 2015 at 16:08

answered Dec 11, 2015 at 15:45

Shyju

220k106 gold badges420 silver badges499 bronze badges

3 Comments

Millhorn Over a year ago

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 Over a year ago

I saw your update on jsbin. It's interesting, but it's making sense.

Millhorn Over a year ago

My only question is why, when I enter today's date, 12/11/2015, it returns a date string of Friday, December 5

Vishal Kamal · Accepted Answer · 2015-12-11 15:36:33Z

0

Try this

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

answered Dec 11, 2015 at 15:36

Vishal Kamal

1,1242 gold badges10 silver badges35 bronze badges

1 Comment

Millhorn Over a year ago

I updated the question. I'm trying to get the output to display as DD, MM d

Community · Accepted Answer · 2017-05-23 12:32:35Z

0

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

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Dec 11, 2015 at 15:45

Shanthini

1973 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to get custom format output from an input date?

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related