vanillajs-datetimepicker

A fork of vanillajs-datepicker that adds time-picker support (pickTime, minuteStep) and switches the format-token convention to the Java/Moment style. Written from scratch as ECMAScript modules / Sass stylesheets, with pre-built JS/CSS for direct browser use.

It can work either standalone or with a CSS framework (e.g. Bootstrap, Foundation), and works best with Bulma — for which it was originally developed.

What's different from vanillajs-datepicker

• Time picker — opt-in via pickTime: true, with optional minuteStep. Renders 24-hour hour/minute controls (number input + range slider, with min/max scale captions toggleable via timeSliderScale and step dots on coarse-stepped sliders) below the calendar; selected dates retain their hour and minute. The controls respect the time portion of minDate/maxDate and appear only on the days view, and the today button becomes a "Now" button.
• Java/Moment format tokens — M/MM are numeric month, MMM/MMMM are month name, m/mm are minute, H/HH are 24-hour hour. This is a breaking change vs. vanillajs-datepicker / bootstrap-datepicker. See the Migration Guide.
• TypeScript types — .d.ts files are generated from JSDoc and shipped in the package; no extra @types/* install needed.
• Misc fork tweaks — softened prev/next-month cell opacity ($dp-cell-prevnext-opacity Sass var), a couple of timepicker UX fixes, DateRangePicker.setDates(start, end, options) third argument forwarded to each datepicker.

Install

npm install @hwangti/vanillajs-datetimepicker

Usage

Date only (default)

import { Datepicker } from '@hwangti/vanillajs-datetimepicker';

const input = document.querySelector('#date');
new Datepicker(input, { format: 'yyyy-MM-dd' });

Date + time

import { Datepicker } from '@hwangti/vanillajs-datetimepicker';

new Datepicker(document.querySelector('#datetime'), {
  format: 'yyyy-MM-dd HH:mm',
  pickTime: true,
  minuteStep: 15,
});

Date range with time

import { DateRangePicker } from '@hwangti/vanillajs-datetimepicker';

const wrap = document.querySelector('#range');
new DateRangePicker(wrap, {
  format: 'yyyy-MM-dd HH:mm',
  pickTime: true,
  minuteStep: 5,
});

TypeScript

Type definitions are bundled. The option types are also reachable as a separate import if you need to type your own variables.

import { Datepicker } from '@hwangti/vanillajs-datetimepicker';
import type { DatepickerOptions } from '@hwangti/vanillajs-datetimepicker/types';

const opts: DatepickerOptions = {
  format: 'yyyy-MM-dd HH:mm',
  pickTime: true,
  minuteStep: 15,
};

Features

• Date picker (input-dropdown, inline), date range picker
• Time picker (24-hour) with configurable minute step
• Keyboard operation (arrow-key navigation, in-place input editing)
• i18n (locales, CSS-based text direction detection)
• Easy CSS-framework adaptation via Sass entry points
• Dependency-free
• Modern-browser only — no IE / Edge Legacy
• Lightweight — ~35 kB minified, ~11 kB gzipped

Demo

• demo/time-picker.html — time picker walkthrough
• demo/index.html — original feature demo

Documentation

The docs site (docsify) is in docs/. Key pages:

• Overview
• Options — including pickTime and minuteStep
• API
• Date String & Format
• Migration v1 → v2

Credits

This package is a fork of vanillajs-datepicker by Hidenao Miyamoto, which itself reimagines bootstrap-datepicker. All upstream design and the bulk of the calendar implementation are theirs.

License

• MIT