Accessible Customizable Date/Time/Date Picker for Modern Web App – FDatepicker

Preview:

Description:

fdatepicker is a lightweight Vanilla JS date/time/date range picker that creates feature-rich date selection interfaces without framework dependencies like jQuery.

You can get it running in seconds using simple HTML data- attributes directly in your markup, or you can use its straightforward JavaScript API for more complex configurations.

Features:

• Flexible Date Selection: Supports single date, multiple dates, and date range picking.
• Time Picker: Includes a fully configurable time selector with 12-hour or 24-hour formats.
• Customization & Theming: Provides clean CSS classes for easy styling to match your application’s look and feel.
• Localization: Comes with built-in support for over 25 languages and allows for custom language configurations.
• Accessibility: Full keyboard navigation support is included out of the box.

How to use it:

1. Include the FDatepicker’s JavaScript and Stylesheet on the web page.

<link href="dist/css/fdatepicker.min.css" rel="stylesheet" type="text/css">
<script src="dist/js/fdatepicker.min.js"></script>

2. You’ll also need to include a language file:

• fdatepicker.ar.js – Arabic
• fdatepicker.cs.js – Czech
• fdatepicker.da.js – Danish
• fdatepicker.de.js – German
• fdatepicker.el.js – Greek
• fdatepicker.en.js – English (default)
• fdatepicker.es.js – Spanish
• fdatepicker.fi.js – Finnish
• fdatepicker.fr.js – French
• fdatepicker.hu.js – Hungarian
• fdatepicker.hy.js – Armenian
• fdatepicker.it.js – Italian
• fdatepicker.ka.js – Georgian
• fdatepicker.ko.js – Korean
• fdatepicker.nl.js – Dutch
• fdatepicker.nl-BE.js – Dutch (Belgium)
• fdatepicker.pl.js – Polish
• fdatepicker.pt.js – Portuguese
• fdatepicker.pt-BR.js – Portuguese (Brazil)
• fdatepicker.ro.js – Romanian
• fdatepicker.ru.js – Russian
• fdatepicker.si.js – Slovenian
• fdatepicker.sk.js – Slovak
• fdatepicker.sv.js – Swedish
• fdatepicker.th.js – Thai
• fdatepicker.tr.js – Turkish
• fdatepicker.uk.js – Ukrainian
• fdatepicker.zh.js – Chinese

<script src="dist/js/i18n/fdatepicker.en.js"></script>

3. Create an input field for your date picker.

<input type="text" class="fdatepicker-input" id="example" >

4. Initialize the date picker with default options.

const myElement = document.getElementById('example');
const datepicker = new FDatepicker(myElement, {
  // options here
});

5. You can customize the date picker by passing configuration options via JavaScript or HTML Data attributes.

• format: Sets the date display format in the input field. (Default: 'm/d/Y')
• altFormat: Defines the format for the altField, typically a machine-readable format like 'Y-m-d'.
• altField: Specifies the ID of an alternative (often hidden) input to store the date in the altFormat.
• startView: Determines the initial view when the picker opens. Options are 'days', 'months', or 'years'. (Default: 'days')
• minDate: The earliest date a user can select. Can be a Date object or a string like '2025-01-01'.
• maxDate: The latest date a user can select.
• disabledDates: An array of date strings (e.g., ['2025-12-25']) to make specific dates unselectable.
• range: Set to true to enable date range selection. (Default: false)
• multiple: Set to true to allow selecting multiple, non-consecutive dates. (Default: false)
• multipleSeparator: The character used to separate dates in the input field when multiple is true. (Default: ',')
• altFieldMultipleDatesSeparator: The separator for multiple dates in the alternative field. (Default: ',')
• multipleDisplaySelector: A CSS selector for an element where information about multiple selected dates will be displayed.
• timepicker: Set to true to enable the time selection interface. (Default: false)
• ampm: Set to true for a 12-hour clock with an AM/PM toggle; false for a 24-hour clock. (Default: true)
• timepickerDefaultNow: If true, the time picker defaults to the current time. (Default: true)
• hoursStep: The increment value for the hours input. (Default: 1)
• minutesStep: The increment value for the minutes input (e.g., 15 for 15-minute intervals). (Default: 1)
• minHours: The earliest hour that can be selected.
• maxHours: The latest hour that can be selected.
• minMinutes: The earliest minute that can be selected.
• maxMinutes: The latest minute that can be selected.
• autoClose: If true, the datepicker closes automatically after a date is selected. (Default: true)
• firstDayOfWeek: Sets the starting day of the week, where 0 is Sunday and 1 is Monday. (Default: 0)
• todayButton: Set to true to display a button that jumps to today’s date. (Default: true)
• clearButton: Set to true to show a button that clears the selected date. (Default: true)
• closeButton: Set to true to display a button that closes the datepicker. (Default: true)

<input type="text" class="fdatepicker-input" id="example" data-format="m/d/Y" data-auto-close="false">

// OR
const datepicker = new FDatepicker(myElement, {
  format: '',
  startView: 'days',
  minDate: null,
  maxDate: null,
  disabledDates: [],
  altField: null,
  altFormat: 'Y-m-d',
  range: true,
  multiple: true,
  multipleSeparator: ',',
  altFieldMultipleDatesSeparator: ',',
  multipleDisplaySelector: '.selected-dates-display',
  autoClose: true,
  firstDayOfWeek: 0, // 0 = Sunday, 1 = Monday, etc.
  timepickerDefaultNow: true,
  todayButton: true,
  clearButton: true,
  closeButton: true,
  timepicker: false,
  timeOnly: false,
  ampm: false,
  hoursStep: 1,
  minutesStep: 1,
  minHours: null,
  maxHours: null,
  minMinutes: 0,
  maxMinutes: 59,
});

6. API methods.

• FDatepicker.setMessages(customMessages): Sets or overrides global localization strings (e.g., month names, button labels) for all subsequent datepicker instances.
• FDatepicker.destroyAll(): Destroys all active fdatepicker instances on the page and removes their associated event listeners. This is useful for cleanup in single-page applications.
• FDatepicker.formatDate(date, format, locale): A utility function to format a JavaScript Date object into a string based on a given format, using the specified locale if provided.
• instance.open(): Opens the datepicker pop-up.
• instance.close(): Closes the datepicker pop-up.
• instance.toggle(): Toggles the visibility of the datepicker pop-up (opens it if closed, closes it if open).
• instance.destroy(): Removes a single datepicker instance, cleans up its DOM elements, and detaches all event listeners.
• instance.update(option, value) or update({option: value}): Changes one or more configuration options on an already initialized datepicker.
• instance.render(): Re-renders the datepicker’s internal state. This is useful after manually changing options to ensure the UI reflects the changes.

FAQs:

Q: How do I handle form validation with FDatepicker?
A: FDatepicker updates the input value on selection, triggering standard form validation events. For custom validation, listen to the ‘change’ event on the input element. When using altField, validate against the hidden field value for consistent server-side processing.

Q: How does FDatepicker handle timezone considerations?

A: FDatepicker works with local browser time and doesn’t perform timezone conversions. For applications requiring timezone handling, process the selected date values server-side or use a separate timezone library like moment-timezone.

Q: How do I implement server-side date validation?
A: When using altField with altFormat, validate against the alternative field value since it uses a consistent format. For direct input validation, parse the display format on the server side matching your client-side format configuration.

Changelog:

09/03/2025

• v3.0.22: AM/PM also in the correct case on the buttons

08/22/2025

• v3.0.16: bugfix

08/15/2025

• v3.0.14: bugfix

08/13/2025

• v3.0.13: better year nav

08/11/2025

• v3.0.12: make today work as expected and force dayview if value is present

08/08/2025

• v3.0.11: CSS finetuning

08/07/2025

• v3.0.10: better focus for timepicker