How to format date with hours, minutes and seconds when using jQuery UI Datepicker?
JavascriptJqueryDatepickerJquery Ui-DatepickerJavascript Problem Overview
Is it possible to format a date with jQuery UI Datepicker as to show hours, minutes and seconds?
This is my current mockup:
$(function() {
$('#datepicker').datepicker({ dateFormat: 'yyy-dd-mm HH:MM:ss' }).val();
});
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<title>snippet</title>
</head>
<body>
<input type="text" id="datepicker">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
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.
Javascript Solutions
Solution 1 - Javascript
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 < 10) ? ("0" + h) : h ;
var m = d.getMinutes();
m = (m < 10) ? ("0" + m) : m ;
var s = d.getSeconds();
s = (s < 10) ? ("0" + s) : s ;
datetext = datetext + " " + h + ":" + m + ":" + s;
$('#datepicker').val(datetext);
}
});
});
Solution 2 - Javascript
$("#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.
Solution 3 - Javascript
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"
});
Solution 4 - Javascript
Or, using datetimepicker plugin.
Ref: https://stackoverflow.com/questions/12974697/datetimepicker-am-pm-dropdown/20794434#20794434
Solution 5 - Javascript
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);
Solution 6 - Javascript
I added this code
<input class="form-control input-small hasDatepicker" id="datepicker6" name="expire_date" type="text" value="2018-03-17 00:00:00">
<script src="/assets/js/datepicker/bootstrap-datepicker.js"></script>
<script>
$(document).ready(function() {
$("#datepicker6").datepicker({
isRTL: true,
dateFormat: "yy/mm/dd 23:59:59",
changeMonth: true,
changeYear: true
});
});
</script>
Solution 7 - Javascript
format: 'YYYY-MM-DD HH:mm:ss',
Solution 8 - Javascript
$(function() {
$('#datepicker').datepicker({ dateFormat: 'yy-d-m ' }).val();
});
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<title>snippet</title>
</head>
<body>
<input type="text" id="datepicker">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
Solution 9 - Javascript
Getting Started Install from npm:
npm install imask And import or require:
import IMask from 'imask';
or use CDN:
Solution 10 - Javascript
This worked fine for me:
$('#myelement').datetimepicker({
dateFormat: "yy-mm-dd",
timeFormat: "hh:mm:ss"
});