How to format date with hours minutes and seconds when using jQuery UI Datepicker

Question

Is it possible to format a date with jQuery UI Datepicker as to show hours  minutes and seconds   This is my current mockup    x000D   x000D    function     x000D          datepicker   datepicker   dateFormat   yyy-dd-mm HH MM ss     val    x000D      x000D   lt html gt  x000D   lt head gt  x000D     lt link rel  stylesheet  href  http   code jquery com ui 1 9 2 themes base jquery-ui css  gt  x000D     lt title gt snippet lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D     lt input type  text  id  datepicker  gt  x000D   x000D     lt script src  https   code jquery com jquery-1 12 4 min js  gt  lt  script gt  x000D     lt script src  https   code jquery com ui 1 9 2 jquery-ui min js  gt  lt  script gt  x000D   x000D   x000D    When I call  datepicker   dateFormat   yyy-dd-mm HH MM ss     the returned value is      201313-07-03 HH July ss   Here is a JSFiddle

User · Answer

Using jQuery UI in combination with the excellent datetimepicker plugin from http://trentrichardson.com/examples/timepicker/

You can specify the dateFormat and timeFormat

$('#datepicker').datetimepicker({
    dateFormat: "yy-mm-dd",
    timeFormat:  "hh:mm:ss"
});

User · Answer

datepicker   datepicker  option    dateFormat    yy-mm-dd       For the time picker  you should add timepicker to Datepicker  and it would be formatted with one equivalent command   EDIT  Use this one that extend jQuery UI Datepicker  You can pick up both date and time   http   trentrichardson com examples timepicker

User · Answer

Getting Started Install from npm  npm install imask And import or require  import IMask from  imask   or use CDN   var dateMask   IMask element      mask  Date      enable date mask       other options are optional   pattern   Y- m- d       Pattern mask with defined blocks  default is  d    m    Y       you can provide your own blocks definitions  default blocks for date mask are    blocks        d          mask  IMask MaskedRange        from  1        to  31        maxLength  2             m          mask  IMask MaskedRange        from  1        to  12        maxLength  2             Y          mask  IMask MaskedRange        from  1900        to  9999                  define date - gt  str convertion   format  function  date        var day   date getDate        var month   date getMonth     1      var year   date getFullYear         if  day  lt  10  day    quot 0 quot    day      if  month  lt  10  month    quot 0 quot    month       return  year  month  day  join  -              define str - gt  date convertion   parse  function  str        var yearMonthDay   str split  -        return new Date yearMonthDay 0   yearMonthDay 1  - 1  yearMonthDay 2               optional interval options   min  new Date 2000  0  1       defaults to  1900-01-01    max  new Date 2020  0  1       defaults to  9999-01-01     autofix  true      defaults to  false        also Pattern options can be set   lazy  false        and other common options   overwrite  true     defaults to  false

User · Answer

I added this code    lt input class  form-control input-small hasDatepicker  id  datepicker6  name  expire date  type  text  value  2018-03-17 00 00 00  gt    lt script src   assets js datepicker bootstrap-datepicker js  gt  lt  script gt   lt script gt            document  ready function                     datepicker6   datepicker                   isRTL  true                  dateFormat   yy mm dd 23 59 59                   changeMonth  true                  changeYear  true                               lt  script gt

User · Answer

format   YYYY-MM-DD HH mm ss

User · Answer

Try this fiddle    function             datepicker   datepicker           dateFormat   yy-dd-mm           onSelect  function datetext                var d   new Date       for now              var h   d getHours                h    h  lt  10      0    h    h                var m   d getMinutes                m    m  lt  10      0    m    m                var s   d getSeconds                s    s  lt  10      0    s    s                datetext   datetext         h         m         s                   datepicker   val datetext

User · Answer

x000D   x000D    function     x000D          datepicker   datepicker   dateFormat   yy-d-m      val    x000D      x000D   lt html gt  x000D   lt head gt  x000D     lt link rel  stylesheet  href  http   code jquery com ui 1 9 2 themes base jquery-ui css  gt  x000D     lt title gt snippet lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D     lt input type  text  id  datepicker  gt  x000D   x000D     lt script src  https   code jquery com jquery-1 12 4 min js  gt  lt  script gt  x000D     lt script src  https   code jquery com ui 1 9 2 jquery-ui min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

This worked fine for me              myelement   datetimepicker               dateFormat   quot yy-mm-dd quot               timeFormat    quot hh mm ss quot

User · Answer

If don t like to add time picker  we can use just javascript for time part     var dateObj new Date      var date     datepicker formatDate  dd M yy   dateObj     var time    dateObj getHours       dateObj getMinutes       dateObj getSeconds        console log date     time

User · Answer

Or  using datetimepicker plugin   Ref  DateTimePicker AM PM Dropdown  Ref  http   xdsoft net jqplugins datetimepicker

[javascript] How to format date with hours, minutes and seconds when using jQuery UI Datepicker?

Examples related to javascript

Examples related to jquery

Examples related to datepicker

Examples related to jquery-ui-datepicker