Date picker
Simple date picker (though it doesn't actually pick the date, more like calls back and you deal with the date)
by ninty9notout
HTML
<script src="https://moment.github.io/luxon/global/luxon.min.js"></script>
<div class="calendar">
<!-- intentionally empty -->
</div>
JavaScript
const DateTime = luxon.DateTime;
const default_options = {
container: '.calendar',
first_date: null,
last_date: null,
selected_date: null,
disabled_dates: [],
timezone: null,
// Callbacks
onSelect: null,
};
let now = DateTime.local();
if (default_options.timezone) {
now = now.setZone(default_options.timezone);
}
if (!default_options.first_date) {
default_options.first_date = now;
}
if (!default_options.last_date) {
default_options.last_date = now;
}
const start_of_calendar = default_options.first_date.startOf('month');
const end_of_calendar = default_options.last_date.endOf('month');
function draw_month(start_of_calendar, end_of_calendar, first_date, last_date) {
const container = document.createElement('div');
container.className = 'picker__month picker-month';
const header = document.createElement('div');
header.className = 'picker-month__header';
const previous = document.createElement('button');
previous.className = 'picker-month__previous';
const next = document.createElement('button');
next.className = 'picker-month__next';
const title = document.createElement('h2');
title.className = 'picker-month__title';
}