Is it possible to format a date with jQuery UI Datepicker as to show hours, minutes and seconds?
This is my current mockup:
$(function() {_x000D_
$('#datepicker').datepicker({ dateFormat: 'yyy-dd-mm HH:MM:ss' }).val();_x000D_
});<html>_x000D_
<head>_x000D_
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">_x000D_
<title>snippet</title>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<input type="text" id="datepicker">_x000D_
_x000D_
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>_x000D_
<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.
This question is related to
javascript
jquery
datepicker
jquery-ui-datepicker
$("#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.
Or, using datetimepicker plugin.
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"
});
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);
}
});
});
This worked fine for me:
$('#myelement').datetimepicker({
dateFormat: "yy-mm-dd",
timeFormat: "hh:mm:ss"
});
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>
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 -> str convertion
format: function (date) {
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (day < 10) day = "0" + day;
if (month < 10) month = "0" + month;
return [year, month, day].join('-');
},
// define str -> 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`
});
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);
format: 'YYYY-MM-DD HH:mm:ss',
$(function() {_x000D_
$('#datepicker').datepicker({ dateFormat: 'yy-d-m ' }).val();_x000D_
});<html>_x000D_
<head>_x000D_
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">_x000D_
<title>snippet</title>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<input type="text" id="datepicker">_x000D_
_x000D_
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>Source: Stackoverflow.com