CODEWITHSUNDEEP
javascriptjqueryinput
Millhorn
Millhorn

Reputation: 3166

How to get custom format output from an input date?

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?

Upvotes: 2

Views: 104

Answers (4)

Rishabh Rajgarhia
Rishabh Rajgarhia

Reputation: 748

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

Upvotes: 3

Shyju
Shyju

Reputation: 218722

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.

Upvotes: 1

Shanthini
Shanthini

Reputation: 197

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

Upvotes: 0

Vishal Kamal
Vishal Kamal

Reputation: 1124

Try this

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

Upvotes: 0

Related Questions