$ npm install easyepoch
Examples
Current theme: dark
const picker = new EasyEpoch({ theme: 'dark' });
picker.setTheme('light');
picker.setTheme('dark');
picker.setTheme({
bg: '#0a0a0a',
primary: '#ff6b6b',
secondary: '#ffd93d',
accent: '#ff6b6b',
text: '#f0f0f0',
});
Click the button to select a date...
const picker = new EasyEpoch();
picker.on('submit', (date, readableDate) => {
console.log(readableDate);
});
document.querySelector('button').addEventListener('click', () => {
picker.open();
});
const picker = new EasyEpoch('#my-container', {
zIndex: 10
});
picker.on('submit', (date, readableDate) => {
document.querySelector('input').value = readableDate;
});
Click the button to try compact mode...
const picker = new EasyEpoch({
compactMode: true
});
picker.on('submit', (date, readableDate) => {
console.log(readableDate);
});
Click the button to pick a date without time...
const picker = new EasyEpoch({
disableTimeSection: true
});
picker.on('submit', (date, readableDate) => {
console.log(readableDate);
});
Opens with Dec 31, 2026 pre-selected...
const picker = new EasyEpoch({
selectedDate: new Date(2026, 11, 31, 23, 59)
});
picker.on('submit', (date, readableDate) => {
console.log(readableDate);
});
const startPicker = new EasyEpoch('#start-container');
const endPicker = new EasyEpoch('#end-container');
startPicker.on('submit', (date, readableDate) => {
document.querySelector('#start').value = readableDate;
});
endPicker.on('submit', (date, readableDate) => {
document.querySelector('#end').value = readableDate;
});
Event log appears here...
picker.on('submit', (date, readableDate) => {
log.append(`Selected: ${readableDate}`);
});
picker.on('close', () => {
log.append('Picker was closed/cancelled');
});
