jQuery UI DatePicker - Change Date Format

Question

I am using the UI DatePicker from jQuery UI as the stand alone picker  I have this code    lt div id  datepicker  gt  lt  div gt    And the following JS       datepicker   datepicker      When I try to return the value with this code   var date       datepicker   datepicker  getDate      I am returned this   Tue Aug 25 2009 00 00 00 GMT 0100  BST    Which is totally the wrong format  Is there a way I can get it returned in the format DD-MM-YYYY

User · Answer

You can add and try this way   HTML file    lt p gt  lt input type  text  id  demoDatepicker    gt  lt  p gt    JavaScript file     function               demoDatepicker   datepicker           dateFormat   dd mm yy           changeMonth  true          changeYear  true          constrainInput  false

User · Answer

Try to use the        selector    datepicker   dateFormat   dd mm yy          and there is lots of option available For the datepicker you can find it Here  http   api jqueryui com datepicker    This is the way we call the datepicker with the parameter    function               selector   datepicker               dateFormat   dd mm yy               changeMonth  true              numberOfMonths  1              buttonImage   contact calendar calendar gif               buttonImageOnly  true              onSelect  function selectedDate                        we can write code here

User · Answer

datepicker   datepicker  getDate   returns a date object  not a string   var dateObject       datepicker   datepicker  getDate       get the date object var dateString   dateObject getFullYear      -     dateObject getMonth     1     -    dateObject getDate      Y-n-j in php date   format

User · Answer

This works too       datepicker   datepicker       dateFormat  d-m-yy

User · Answer

Here is an out of the box future proof date snippet  Firefox defaults to jquery ui datepicker  Otherwise HTML5 datepicker is used  If FF ever support HTML5 type  date  the script will simply be redundant  Dont forget the three dependencies are needed in the head tag    lt script gt    src  http   ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt   lt  script gt   lt link rel  stylesheet href    code jquery com ui 1 12 1 themes base jquery-ui css  gt     lt script src  https   code jquery com ui 1 12 1 jquery-ui js  gt  lt  script gt    lt  --Form element uses HTML 5 type  date -- gt   lt div class  form-group row  gt       lt label for  date  class  col-sm-2 col-form-label Date lt  label gt       lt div class  col-sm-10  gt                    lt input type  date  class  form-control  name  date  id  date  placeholder  date  gt       lt  div gt   lt  div gt    lt  --if the user is using FireFox it           autoconverts type  date  into type  text   If the type is text the  script below will assign the jquery ui datepicker with options-- gt   lt script gt    function        var elem   document createElement  input      elem setAttribute  type    date       if   elem type      text                 date   datepicker             date    datepicker   option    dateFormat    yy-mm-dd

User · Answer

The getDate method of datepicker returns a date type  not a string   You need to format the returned value to a string using your date format  Use datepicker s formatDate function   var dateTypeVar       datepicker   datepicker  getDate      datepicker formatDate  dd-mm-yy   dateTypeVar     The full list of format specifiers is available here

User · Answer

Below code might help to check if form got more than 1 date field    lt  doctype html gt    lt html lang  en  gt   lt head gt       lt meta charset  utf-8    gt       lt title gt jQuery UI Datepicker - Display month  amp amp  year menus lt  title gt       lt link rel  stylesheet  href  jquery-ui css    gt       lt script src  jquery-1 8 3 js  gt  lt  script gt       lt script src  jquery-ui js  gt  lt  script gt       lt link rel  stylesheet  href  style css    gt       lt script gt      function pickDate DateObject           alert DateObject name           function                          DateObject name  datepicker   dateFormat   dd mm yy     val                             function                  datepicker    datepicker               changeMonth  true              changeYear  true                             lt  script gt   lt  head gt   lt body gt    lt p gt From Date   lt input type  text  name  FromDate  id  FromDate  size  9  onfocus  pickDate this    gt  lt  p gt   lt p gt To Date   lt input type  text  name  ToDate  id  ToDate  size  9  onfocus  pickDate this     gt  lt  p gt     lt  body gt   lt  html gt

User · Answer

This is what worked for me     fn datepicker defaults format    yy-mm-dd

User · Answer

I use this   var strDate       dateTo   datepicker  getDate   format  yyyyMMdd      Which returns a date of format like  20120118  for Jan 18  2012

User · Answer

inside the jQuery script code just paste the code         selector    datepicker   dateFormat   yy-mm-dd        this should work

User · Answer

If you setup a datepicker on an input type  text   element you may not get a consistently formatted date  particularly when the user doesn t follow the date format for data entry   For example  when you set the dateFormat as dd-mm-yy and the user types 1-1-1   The datepicker will convert this to Jan 01  2001 internally but calling val   on the datepicker object will return the string  1-1-1  -- exactly what is in the text field   This implies you should either be validating the user input to ensure the date entered is in the format you expect or not allowing the user to enter dates freeform  preferring instead the calendar picker    Even so it is possible to force the datepicker code to give you a string formatted like you expect   var picker       datepicker     picker datepicker   dateFormat   dd-mm-yy       picker val   1-1-1         simulate user input  alert  picker val           1-1-1   var d   picker datepicker   getDate     var f   picker datepicker   option    dateFormat     var v     datepicker formatDate  f  d     alert  v                    01-01-2001    Be aware however that while the datepicker s getDate   method will return a date  it can only do so much with user input that doesn t exactly match the date format   This means in the absence of validation it is possible to get a date back that is different from what the user expects  Caveat emptor

User · Answer

lt script gt        function                   datepicker   datepicker                 datepicker   datepicker  option    dateFormat   d MM y                      startDate   datepicker  dateFormat   d MM y       lt  script gt

User · Answer

datepicker   datepicker   dateFormat   yy-mm-dd     val

User · Answer

you can simply use this format in you function  just like          function                    datepicker    datepicker               dateFormat   dd mm yy             changeMonth  true            changeYear  true                         lt input type  text  id  datepicker  gt  lt  p gt

User · Answer

I think the correct way to do this would be something like this   var picker       date-picker    var date     datepicker formatDate      picker datepicker  option    dateFormat        picker datepicker  getDate       This way you make sure the format string is defined only once and you use the same formatter to translate the format string into the formatted date

User · Answer

My option is given below    x000D   x000D    document  ready function      x000D    var userLang   navigator language    navigator userLanguage  x000D   x000D    var options     extend     x000D        datepicker regional  ja      x000D        dateFormat   yy mm dd   x000D        changeMonth  true  x000D        changeYear  true  x000D        highlightWeek  true x000D        x000D       x000D   x000D        japaneseCalendar   datepicker options   x000D      x000D   ui-datepicker-div   x000D    font-size  14px  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D       lt meta charset  UTF-8  gt  x000D       lt link rel  stylesheet  type  text css  x000D            href  https   cdnjs cloudflare com ajax libs jqueryui 1 12 1 themes smoothness jquery-ui min css  gt  x000D       lt script src  https   code jquery com jquery-3 2 1 min js  gt  lt  script gt  x000D       lt script src  https   code jquery com ui 1 12 1 jquery-ui min js  gt  lt  script gt  x000D       lt script src  https   cdnjs cloudflare com ajax libs jqueryui 1 11 1 i18n jquery-ui-i18n min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt h3 gt Japanese JQuery UI Datepicker lt  h3 gt  x000D   lt input type  text  id  japaneseCalendar   gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

getDate function returns a JavaScript date  Use the following code to format this date   var dateObject       datepicker   datepicker  getDate    var dateString     datepicker formatDate  dd-mm-yy   dateObject     It uses a utility function which is built into datepicker        datepicker formatDate  format  date  settings   -    Format a date into a string value with a specified format    The full list of format specifiers is available here

User · Answer

Here s one specific for your code   var date       datepicker   datepicker   dateFormat   dd-mm-yy     val      More general info available here    http   api jqueryui com datepicker  option-dateFormat http   api jqueryui com datepicker  utility-formatDate

User · Answer

you should use data-date-format  yyyy-mm-dd  in your input field html and initial data picker in JQuery just like simple       issue date   datepicker        dateFormat   yy-mm-dd       changeMonth  true      changeYear  true

User · Answer

lt script type  text javascript  gt      function              date    datepicker   minDate   0   dateFormat   yy-dd-mm              lt  script gt

User · Answer

Finally got the answer for datepicker date change method       formatdate   change function            datpicker   datepicker  option   dateFormat   yy-mm-dd

User · Answer

If you need the date in yy-mm-dd format you can use this -      datepicker   datepicker   dateFormat   yy-mm-dd        You can find all the supported format  https   jqueryui com datepicker  date-formats  I was in need of 06 Dec 2015 I did this -      datepicker   datepicker   dateFormat   d M y

User · Answer

Here complete code for date picker with date format  yy mm dd    Copy link below and paste in head tag          lt link href  http   ajax googleapis com ajax libs jqueryui 1 8 themes base jquery-ui css  rel  stylesheet  type  text css   gt        lt script src  http   ajax googleapis com ajax libs jquery 1 5 jquery min js  gt  lt  script gt        lt script src  http   ajax googleapis com ajax libs jqueryui 1 8 jquery-ui min js  gt  lt  script gt        lt script type  text javascript  gt           function                        datepicker   datepicker   dateFormat   yy-mm-dd     val                  lt  script gt    Copy below code and paste between body tag           Date   lt input type  text  id  datepicker  size  30   gt        If you would like two 2  input type text like Start Date and End Date then use this script and change date format       lt link href  http   ajax googleapis com ajax libs jqueryui 1 8 themes base jquery-ui css  rel  stylesheet  type  text css   gt        lt script src  http   ajax googleapis com ajax libs jquery 1 5 jquery min js  gt  lt  script gt        lt script src  http   ajax googleapis com ajax libs jqueryui 1 8 jquery-ui min js  gt  lt  script gt        lt script type  text javascript  gt           function                        startdate   datepicker   dateFormat   dd-mm-yy     val                      enddate   datepicker   dateFormat   dd-mm-yy     val                   lt  script gt      Two input text like          Start Date   lt input type  text  id  startdate  size  30   gt            End Date   lt input type  text  id  enddate  size  30   gt

User · Answer

This works smoothly  Try this   Paste these links in your head section    lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt   lt script type  text javascript          src  https   cdnjs cloudflare com ajax libs bootstrap-datepicker 1 4 1 js bootstrap-datepicker min js  gt  lt  script gt   lt link rel  stylesheet        href  https   cdnjs cloudflare com ajax libs bootstrap-datepicker 1 4 1 css bootstrap-datepicker3 css   gt   lt link rel  stylesheet  href  css bootstrap min css  gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0 js bootstrap min js  gt  lt  script gt   lt script src  http   code jquery com ui 1 11 0 jquery-ui js  gt  lt  script gt   lt link rel  stylesheet  href  http   code jquery com ui 1 12 1 themes base jquery-ui css  gt    Following is the JS coding     lt script gt             document  ready function                      completionDate   datepicker                   dateFormat   yy-mm-dd      enter date format you prefer  e g  2018-10-09                  changeMonth  true                  changeYear  true                  yearRange   -50  10                   clickInput  true                   onSelect  function  date                        loadMusterChit                                                         lt  script gt

User · Answer

I am using jquery for datepicker These jqueries are used for that   lt script src  jqueryCalendar jquery-1 6 2 min js  gt  lt  script gt   lt script src  jqueryCalendar jquery-ui-1 8 15 custom min js  gt  lt  script gt   lt link rel  stylesheet  href  jqueryCalendar jqueryCalendar css  gt    Then you follow this code    lt script gt       jQuery function          jQuery    date    datepicker   dateFormat   dd mm yy                           lt  script gt

User · Answer

dateFormat      The format for parsed and displayed dates  This attribute is one of   the regionalisation attributes  For a full list of the possible   formats see the formatDate function       Code examples Initialize a datepicker with the dateFormat option   specified        selector    datepicker   dateFormat   yy-mm-dd            Get or set the dateFormat option  after init     getter var dateFormat        selector    datepicker   option    dateFormat       setter      selector    datepicker   option    dateFormat    yy-mm-dd

User · Answer

Just run this HTML page  You can see several formats    lt html lang  en  gt   lt head gt   lt meta charset  utf-8    gt   lt title gt jQuery UI Datepicker - Format date lt  title gt   lt link rel  stylesheet  href  http   code jquery com ui 1 10 3 themes smoothness jquery-ui css    gt   lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt   lt script src  http   code jquery com ui 1 10 3 jquery-ui js  gt  lt  script gt   lt link rel  stylesheet  href   resources demos style css    gt   lt script gt    function              datepicker    datepicker             format    change function                  datepicker    datepicker   option    dateFormat      this   val                   lt  script gt   lt  head gt   lt body gt    lt p gt Date   lt input type  text  id  datepicker  size  30    gt  lt  p gt    lt p gt Format options  lt br   gt   lt select id  format  gt       lt option value  mm dd yy  gt Default - mm dd yy lt  option gt       lt option value  yy-mm-dd  gt ISO 8601 - yy-mm-dd lt  option gt       lt option value  d M  y  gt Short - d M  y lt  option gt       lt option value  d MM  y  gt Medium - d MM  y lt  option gt       lt option value  DD  d MM  yy  gt Full - DD  d MM  yy lt  option gt       lt option value   day  d  of  MM  in the year  yy  gt With text -  day  d  of  MM  in the year  yy lt  option gt   lt  select gt   lt  p gt     lt  body gt   lt  html gt

User · Answer

So I struggled with this and thought I was going mad  the thing is bootstrap datepicker was being implemented not jQuery so teh options were different       dateInput   datepicker    format   dd mm yyyy

[jquery] jQuery UI DatePicker - Change Date Format

Examples related to jquery

Examples related to jquery-ui

Examples related to date

Examples related to jquery-ui-datepicker