Permalink
Browse files

udpate custom JavaScript for Pikaday support

  • Loading branch information...
blackfalcon committed Dec 27, 2016
1 parent 8accd03 commit eb10eb8a8e83e02a10a566da82a53c977e170904
Showing with 65 additions and 53 deletions.
  1. +65 −53 index.html
@@ -31,21 +31,21 @@
function utcMonthString(i) {
var month;
switch(i) {
case 1: month="January"; break;
case 2: month="February"; break;
case 3: month="March"; break;
case 4: month="April"; break;
case 5: month="May"; break;
case 6: month="June"; break;
case 7: month="July"; break;
case 8: month="August"; break;
case 9: month="September"; break;
case 10: month="October"; break;
case 11: month="November"; break;
case 12: month="December"; break;
case 0: month="January"; break;
case 1: month="February"; break;
case 2: month="March"; break;
case 3: month="April"; break;
case 4: month="May"; break;
case 5: month="June"; break;
case 6: month="July"; break;
case 7: month="August"; break;
case 8: month="September"; break;
case 9: month="October"; break;
case 10: month="November"; break;
case 11: month="December"; break;
}
return month;
}
};
// modulo expressions to parse date value and return ordinal indicator for date
function ordinalSuffix(i) {
@@ -61,46 +61,41 @@
return i + "rd";
}
return i + "th";
}
};
// parse date value and apply ordinal values
function displayOrdinalDate(date) {
var dateArray = date.split('-'),
year = dateArray[0],
month = dateArray[1],
day = dateArray[2],
var dateArray = date,
dateFormat = 'YYYY-MM-DD',
year = moment( dateArray, dateFormat ).year(),
month = moment( dateArray, dateFormat ).month(),
day = moment( dateArray, dateFormat ).date(),
// updates date value to that of value with ordinal indicator
ordinalDay = ordinalSuffix(Number(day)),
// updates date value to that of value with ordinal indicator,
ordinalDay = ordinalSuffix(day),
// updates month value to that of month name
displayMonth = utcMonthString(Number(month));
displayMonth = utcMonthString(month);
// uncomment the console log to see the returned array
//console.log(dateArray);
// uncomment the console.log to see the returned array
// console.log(dateArray);
return displayMonth + " " + ordinalDay + "," + " " + year;
}
};
// HTML 5 Calendar input
// Addresses time-zone support
Date.prototype.setDateInputValue = (function() {
var localDate = new Date(this);
localDate.setMinutes(this.getMinutes() - this.getTimezoneOffset());
// Uncomment console log to see value returned in this function
//console.log(localDate.toJSON().slice(0,10));
return localDate.toJSON().slice(0,10);
});
function setCurrentInputDate() {
var currentDate = moment().format('YYYY-MM-DD');
return currentDate;
};
function getSetCurrentDate () {
// Set var for HTML5 calendar; target DOM element inject HTML content
var calendarInput = document.getElementById('event-date'),
displayCalValue = document.getElementById('display-cal-value');
// Set input value to current date
calendarInput.value = new Date().setDateInputValue();
calendarInput.value = setCurrentInputDate();
// write value to DOM with ordinal date conversion
displayCalValue.innerHTML = displayOrdinalDate(calendarInput.value);
@@ -114,33 +109,50 @@
// change event to set new value to DOM;
calendarInput.onchange = function() {
var calendarInputDate = calendarInput.value,
defaultValue = new Date().setDateInputValue();
// additional support for NaN if user clears date value
if(isNaN(calendarInputDate)) {
displayCalValue.innerHTML = displayOrdinalDate(calendarInputDate);
} else {
calendarInput.value = defaultValue;
displayCalValue.innerHTML = displayOrdinalDate(defaultValue);
}
}
defaultValue = setCurrentInputDate();
// applied hide class to DOM element when user removes focus on the input element
calendarInput.onblur = function() {
calendarInput.className = "hide";
displayCalValue.innerHTML = displayOrdinalDate(calendarInputDate);
}
// sets focus on input element when user interacts with displayed date
displayCalValue.onclick = function() {
var mq = window.matchMedia('(min-width: 769px)');
if(mq.matches) {
calendarInput.className = "";
};
calendarInput.focus();
}
};
// function to instantiate the Pickaday functionality
function makeItPikaday() {
// only want function to fire on desktop devices
var mq = window.matchMedia('(min-width: 769px)');
if(mq.matches) {
var dateFormat = 'YYYY-MM-DD';
var currentDate = setCurrentInputDate();
var myMomentDate = moment(currentDate, dateFormat);
var thisYear = moment(moment(currentDate, dateFormat ).year());
var maxYear = thisYear + 10;
var picker = new Pikaday(
{
// input filed with date value
field: document.getElementById('event-date'),
// click event trigger to open calendar
trigger: document.getElementById('display-cal-value'),
// Sets calendar to start on Sunday
firstDay: 0,
// sets minimum date of calendar to be TODAY
minDate: new Date(myMomentDate),
// sets maximum calendar date
maxDate: new Date(maxYear, 12, 31),
// sets range of year drop-down option
yearRange: [thisYear, maxYear],
// sets container for where calendar will be rendered
container: document.getElementById('cal-container'),
});
}
};
makeItPikaday();
getSetCurrentDate();
updateDisplayDateEvent();
</script>

0 comments on commit eb10eb8

Please sign in to comment.