Pikaday date formatting without Moment.js
If you want to use only format YYYY-MM-DD, you can build the date string using native Date methods:
const picker = new Pikaday({
field: document.getElementById('datepicker')
,onSelect: date => {
const year = date.getFullYear()
,month = date.getMonth() + 1
,day = date.getDate()
,formattedDate = [
year
,month < 10 ? '0' + month : month
,day < 10 ? '0' + day : day
].join('-')
document.getElementById('datepicker').value = formattedDate
}
})
Demo
const picker = new Pikaday({
field: document.getElementById('datepicker')
,onSelect: date => {
const year = date.getFullYear()
,month = date.getMonth() + 1
,day = date.getDate()
,formattedDate = [
year
,month < 10 ? '0' + month : month
,day < 10 ? '0' + day : day
].join('-')
document.getElementById('datepicker').value = formattedDate
}
})@import url("https://rawgit.com/dbushell/Pikaday/master/css/pikaday.css");<script src="https://rawgit.com/dbushell/Pikaday/master/pikaday.js"></script>
<input type="text" id="datepicker">I wrote a small formatter a while ago after seeing the date-formatter.js formatter and parser, maybe it will suit. It's pretty much self–documenting:
function formatDate(date, format) {
var tokens = ['d', // day number, e.g. 3, 12
'dd', // day number padded to two digits, e.g. 03, 12
'ddd', // day name abbreviated, e.g. Mon, Tue
'dddd', // day name in full, e.g. Monday, Tuesday
'M', // month number, e.g. 5, 10
'MM', // month number padded to two digits, e.g. 05, 10
'MMM', // month name abbreviated, e.g. May, Oct
'MMMM', // month name in full, e.g. May, October
'y', // Year, e.g. 71, 2011
'yy', // Year as two digits, e.g. 71, 11
'yyy', // Year as three digits, e.g. 071, 011
'yyyy', // Year padded to 4 digits, e.g. 0071, 2011
'h', // Hour, e.g. 1, 12
'hh', // Hour padded to two digits, e.g. 01, 12
'm', // Minute, e.g. 1, 23
'mm', // Minute padded to two digits, e.g. 01, 23
's', // Second, e.g. 1, 15
'ss', // Second padded to two digits, e.g. 01, 15
'ap', // 12 hour time lower case, e.g. 1:45 am, 12:30 pm
'AP', // 12 hour time upper case, e.g. 1:45 AM, 12:30 PM
'z', // Return values and "z" timezone
'Z', // Return values and "Z" timezone
'tz', // Append timezone as +/-00:00
'TZ']; // Append timezone as +/-00:00
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var days = ['Sunday','Monday','Tuesday','Wednesday',
'Thursday','Friday','Saturday'];
// Generate all the parts as strings
var parts = {d : '' + date.getDate(),
dd : ('0' + date.getDate()).slice(-2),
ddd : days[date.getDay()].slice(0,3),
dddd : days[date.getDay()],
M : '' + (date.getMonth() + 1),
MM : ('0' + (date.getMonth() + 1)).slice(-2),
MMM : months[date.getMonth()].slice(0,3),
MMMM : months[date.getMonth()],
y : '' + date.getFullYear(),
yy : ('0' + date.getFullYear()).slice(-2),
yyy : ('00' + date.getFullYear()).slice(-3),
yyyy : ('000' + date.getFullYear()).slice(-4),
h : '' + date.getHours(),
hh : ('0' + date.getHours()).slice(-2),
m : '' + date.getMinutes(),
mm : ('0' + date.getMinutes()).slice(-2),
s : '' + date.getSeconds(),
ss : ('0' + date.getSeconds()).slice(-2)};
// Parse format character by character and build string
var b = format.split('');
var formattedString = '';
var token = '';
for (var i = 0, iLen = b.length; i < iLen; i++) {
token += b[i];
if (tokens.indexOf(token + b[i+1]) == -1) {
if (tokens.indexOf(token) != -1) {
formattedString += parts[token];
} else {
formattedString += token;
}
token = '';
}
// console.log(token + ' : ' + formattedString);
}
return formattedString;
}
['yyyy-MM-ddThh:mm:ss',
'yyyyMMTddhhmm',
'dddd, d MMMM, yyyy at hh:mm:ss'
].forEach(function (s) {
document.write('<br>' + formatDate(this, s));
}, new Date());