jQuery date formatting

Question

How can I format the date using jQuery  I am using below code but getting error        txtDate   val   format date new Date     dd M yy       Please suggest a solution

User · Answer

Take a look here   https   github com mbitto jquery i18Now  This jQuery plugin helps you to format and translate date and time according to your preference

User · Answer

This worked for me with slight modification and without any plugin  Input   Wed Apr 11 2018 00 00 00 GMT 0000    date   function orginaldate         var date   new Date orginaldate       var day   date getDate        var month   date getMonth     1      var year   date getFullYear        if  day  lt  10            day    0    day            if  month  lt  10            month    0    month            var date    month         day         year       return date        date  Wed Apr 11 2018 00 00 00 GMT 0000     Output  04 11 2018

User · Answer

You can add new user jQuery function  getDate   JSFiddle  getDate jQuery  Or you can run code snippet  Just press  Run code snippet  button below this post    x000D   x000D     Create user jQuery function  getDate  x000D   function       x000D       fn getDate   function format    x000D   x000D   var gDate    new Date    x000D   var mDate      x000D    S   gDate getSeconds    x000D    M   gDate getMinutes    x000D    H   gDate getHours    x000D    d   gDate getDate    x000D    m   gDate getMonth     1  x000D    y   gDate getFullYear    x000D     x000D   x000D      Apply format and add leading zeroes x000D   return format replace    SMHdmy   g  function key  return  mDate key   lt  10    0          mDate key      x000D   x000D   return getDate str   x000D         x000D      jQuery    x000D   x000D   x000D     Usage  example  1  Write to   date  div x000D      date   html     getDate  y-m-d H M S     x000D   x000D     Usage  ex2  Simple clock  Write to   clock  div x000D  function clock    x000D       clock   html     getDate  H M S  m d y    x000D    x000D  clock    x000D  setInterval clock  1000      One second x000D   x000D     Usage  ex3  Simple clock 2  Write to   clock2  div x000D  function clock2    x000D   x000D   var format    H M S      Date format x000D   var updateInterval   1000     1 second x000D   var clock2Div       clock2       Get div x000D   var currentTime       getDate format      Get time x000D    x000D   clock2Div html currentTime      Write to div x000D   setTimeout clock2  updateInterval      Set timer 1 second x000D    x000D    x000D     Run clock2 x000D  clock2    x000D   x000D     Just for fun x000D     Usage  ex4  Simple clock 3  Write to   clock3  span x000D   x000D  function clock3    x000D   x000D   var formatHM    H M       Hours  minutes x000D   var formatS    S      Seconds x000D   var updateInterval   1000     1 second x000D   var clock3SpanHM       clock3HM       Get span HM x000D   var clock3SpanS       clock3S       Get span S x000D   var currentHM       getDate formatHM      Get time H M x000D   var currentS       getDate formatS      Get seconds x000D    x000D   clock3SpanHM html currentHM      Write to div x000D   clock3SpanS fadeOut 1000  html currentS  fadeIn 1      Write to span x000D   setTimeout clock3  updateInterval      Set timer 1 second x000D    x000D    x000D     Run clock2 x000D  clock3    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 2 3 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  date  gt  lt  div gt  lt br gt  x000D   lt div id  clock  gt  lt  div gt  lt br gt  x000D   lt span id  clock3HM  gt  lt  span gt  lt span id  clock3S  gt  lt  span gt  x000D   x000D   x000D    Enjoy

User · Answer

you can use the below code without the plugin    x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   code jquery com ui 1 12 1 jquery-ui js  gt  lt  script gt  x000D   lt link rel  stylesheet  href    code jquery com ui 1 12 1 themes base jquery-ui css  gt  x000D   lt script gt  x000D     function     x000D        call the function on page load x000D        datepicker    datepicker    x000D        set the date format here x000D           datepicker    datepicker  option     dateFormat    dd-mm-yy    x000D    x000D         you also can use  x000D         yy-mm-dd x000D         d M  y x000D         d MM  y x000D         DD  d MM  yy x000D          amp apos day amp apos  d  amp apos of amp apos  MM  amp apos in the year amp apos  yy  With text -  day  d  of  MM  in the year  yy  x000D        x000D    lt  script gt  x000D   x000D  Pick the Date   lt input type  text  id  datepicker  gt  x000D   x000D   x000D

User · Answer

ThulasiRam  I prefer your suggestion  It works well for me in a slightly different syntax context   var dt to     datepicker formatDate  yy-mm-dd   new Date       If you decide to utilize datepicker from JQuery UI  make sure you use proper references in your document s  lt  head   section    lt link rel  stylesheet  href  http   code jquery com ui 1 9 2 themes base jquery-ui css    gt    lt script src  http   code jquery com jquery-1 8 3 js  gt  lt  script gt   lt script src  http   code jquery com ui 1 9 2 jquery-ui js  gt  lt  script gt

User · Answer

I m using Moment JS  Is very helpful and easy to use   var date   moment      Get the current date date format  YYYY-MM-DD      2014-07-10

User · Answer

jQuery dateFormat is a separate plugin  You need to load that explicitly using a  lt script gt  tag

User · Answer

Here is the full code example I have show on browser  Hope you also helpful thanks    lt  doctype html gt   lt html lang  en  gt      lt head gt         lt meta charset  utf-8  gt         lt title gt jQuery UI Datepicker functionality lt  title gt         lt link href  http   code jquery com ui 1 11 3 themes smoothness jquery-ui css  rel  stylesheet  gt         lt script src  http   code jquery com jquery-1 10 2 js  gt  lt  script gt         lt script src  http   code jquery com ui 1 10 4 jquery-ui js  gt  lt  script gt         lt  -- Javascript -- gt         lt script gt             function                      datepicker    datepicker                   minDate  -100                  maxDate    0D                   dateFormat   yy-dd-mm                   onSelect  function datetext                         this  val datetext                                                          lt  script gt      lt  head gt      lt body gt         lt  -- HTML -- gt          lt p gt Enter Date   lt input type  text  id  datepicker  gt  lt  p gt      lt  body gt   lt  html gt

User · Answer

add  jquery ui plugin in your page         txtDate   val   datepicker formatDate  dd M yy   new Date

User · Answer

If you are using jquery ui then you may use it like below  you can specify your own date format    datepicker formatDate   D dd-M-yy   new Date       Output  Fri 08-Sep-2017

User · Answer

You can try http   www datejs com        idInput   val  Date parse  Jun 18  2017 7 00 00 PM   toString  yyyy-MM-dd       BR

User · Answer

I hope this code will fix your problem   var d   new Date     var curr day   d getDate    var curr month   d getMonth    var curr year   d getFullYear     var curr hour   d getHours    var curr min   d getMinutes    var curr sec   d getSeconds     curr month        In js  first month is 0  not 1 year 2d   curr year toString   substring 2  4       txtDate   val curr day         curr month         year 2d

User · Answer

Add this function to your  lt script gt  lt  script gt  and call from where ever you want in that  lt script gt  lt  script gt     lt script gt   function GetNow        var currentdate   new Date         var datetime   currentdate getDate      -                 currentdate getMonth   1      -                 currentdate getFullYear                         currentdate getHours                         currentdate getMinutes                        currentdate getSeconds        return datetime     window alert GetNow       lt  script gt    or you may simply use the Jquery which provides formatting facilities also -  window alert Date parse new Date    toString  yyyy-MM-dd H i s       I love the second option  It resolves all issues in one go

User · Answer

Use dateFormat option when creating date picker       startDate   datepicker                       changeMonth  true                      changeYear  true                      showButtonPanel  true                      dateFormat   yy mm dd

User · Answer

u can use this coding       name  tgllahir     val   datepicker formatDate  dd-mm-yy   new Date data tgllahir

User · Answer

Here s a really basic function I just made that doesn t require any external plugins     date   function dateObject        var d   new Date dateObject       var day   d getDate        var month   d getMonth     1      var year   d getFullYear        if  day  lt  10            day    0    day            if  month  lt  10            month    0    month            var date   day         month         year       return date       Use     date yourDateObject     Result   dd mm yyyy

User · Answer

Simply we can format the date like   var month   date getMonth     1  var day   date getDate    var date1          day  length  lt  2    0          day                month  length  lt  2    0          month         date getFullYear        txtDate   val   datepicker formatDate  dd mm yy   new Date date1       Where  date  is a date in any format

User · Answer

An alternative would be simple js date   function  if you don t want to use jQuery jQuery plugin   e g    var formattedDate   new Date  yourUnformattedOriginalDate    var d   formattedDate getDate    var m    formattedDate getMonth    m    1      JavaScript months are 0-11 var y   formattedDate getFullYear         txtDate   val d         m         y     see  10 ways to format time and date using JavaScript  If you want to add leading zeros to day month  this is a perfect example  Javascript add leading zeroes to date   and if you want to add time with leading zeros try this  getMinutes   0-9 - how to with two numbers

User · Answer

Just use this   var date str   0  date getDate    substr -2 2        0  date getMonth    substr -2 2        0  date getFullYear    substr -2 2

User · Answer

You could make use of this snippet   x000D   x000D      datepicker   datepicker   x000D    changeMonth  true  x000D    changeYear  true  x000D    yearRange   1900  0   x000D    defaultDate   01 JAN 1900   x000D    buttonImage   http   www theplazaclub com club images calendar outlook calendar gif   x000D    dateFormat   dd mm yy   x000D    onSelect  function     x000D          datepicker   val   this  datepicker   x000D        dateFormat   dd mm yy  x000D         val     x000D      x000D      x000D   lt link rel  stylesheet  href    code jquery com ui 1 11 4 themes smoothness jquery-ui css  gt  x000D   lt script src    code jquery com jquery-1 10 2 js  gt  lt  script gt  x000D   lt script src    code jquery com ui 1 11 4 jquery-ui js  gt  lt  script gt  x000D   x000D   lt p gt  x000D    selector   lt input type  text  class  datepicker  gt  x000D   lt  p gt  x000D   lt p gt  x000D    output   lt input type  text  id  datepicker  gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

Though this question was asked a few years ago  a jQuery plugin isn t required anymore provided the date value in question is a string with format mm dd yyyy  like when using a date-picker    var birthdateVal       birthdate   val      birthdateVal  11 8 2014  var birthdate   new Date birthdateVal     birthdate  Sat Nov 08 2014 00 00 00 GMT-0500  Eastern Standard Time

User · Answer

I m not quite sure if I m allowed to answer a question that was asked like 2 years ago as this is my first answer on stackoverflow but  here s my solution   If you once retrieved the date from your MySQL database  split it and then use the splitted values      document  ready function          var datefrommysql       date-from-mysql   attr  date        var arraydate   datefrommysql split           var yearfirstdigit   arraydate 2  2       var yearlastdigit   arraydate 2  3       var day   arraydate 0       var month   arraydate 1           formatted-date   text day         month         yearfirstdigit   yearlastdigit         Here s a fiddle

[jquery] jQuery date formatting

Examples related to jquery