webdevpuneet.com

Related Snippets

221 in Forms category
24–29 of 60

Flatpickr Inline Date Picker

Leaflet Location Picker (Click to Set Coordinates)

Fabric.js Signature Pad

Bootstrap CSV Import Preview

Bootstrap Timezone Selector

Bootstrap Inline Form Editing

Flatpickr Inline Date Picker — Free HTML CSS JS Snippet

Flatpickr Inline Date Picker · Forms · Plain HTML, CSS & JS · Live preview

CategoryForms
TagsTimers & ClocksForms & ValidationJS Libraries

Copy & paste

Source Code

Requires
CSS · flatpickr.min.cssJS · flatpickr.min.js
<div class="fp-wrap">
  <div class="fp-card">
    <div class="fp-head">
      <div class="fp-title">Schedule a Call</div>
      <div class="fp-sub">Weekends and past dates are disabled</div>
    </div>
    <div id="fpCalendar"></div>
    <div class="fp-selected" id="fpSelected">No date selected yet</div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Rule-based weekend disabling
One function disables Saturdays/Sundays in every month forever.
Keyword-based minDate
"today" resolves correctly on every page load, no date math.
Fully re-themed calendar
Custom CSS layered on Flatpickr's stable class names.
Real Date object in callback
onChange gets true Date instances, not just formatted strings.
Always-visible inline mode
No input or popup — the calendar is the primary UI.
Readable confirmation text
Full weekday/month/day format via toLocaleDateString.

About this UI Snippet

Flatpickr Inline Date Picker — Disabling by Rule, Not by List

Screenshot of the Flatpickr Inline Date Picker snippet rendered live

An inline calendar — always visible, no input field or popup to open first — is the right choice whenever date selection is the primary action on a screen, like booking a call or reserving a slot. Flatpickr's inline: true option renders exactly that, and its disable option is what makes "no weekends" a genuinely maintainable rule instead of a growing list of dates.

disable accepts a function, not just a date list

Flatpickr's disable array can hold literal dates, but it can also hold a function that Flatpickr calls once per candidate date, returning true to disable it. This snippet's function checks date.getDay() against 0 and 6 (Sunday and Saturday) — one rule that correctly disables every weekend forever, in any month the user navigates to, rather than a list that would need updating every time the calendar moves to a new month or year.

minDate: 'today' handles "no past dates" without manual date math

Rather than computing today's date and comparing it manually, minDate: 'today' is a Flatpickr-recognized keyword that resolves to the actual current date at render time — it stays correct every day the page is loaded, with no date object construction or timezone handling in application code.

The calendar's entire visual theme is custom CSS on Flatpickr's own classes

Flatpickr intentionally ships close to unstyled beyond layout structure — every color, radius, and weight visible here (the rounded selected-day circle, the indigo accent, the strikethrough on disabled dates) is this snippet's own CSS targeting Flatpickr's stable class names (.flatpickr-day, .selected, .flatpickr-disabled, and so on), which is the intended way to theme it rather than fighting the library's default look.

onChange reads the real Date object, not the formatted string

The callback receives both selectedDates (real JavaScript Date objects) and a pre-formatted dateStr; this snippet uses the real Date object with toLocaleDateString to produce a fuller, more readable confirmation ("Monday, September 21, 2026") than Flatpickr's own default short-format string would give.

Reusing it

Swap the weekday-based disable rule for any other availability logic — blocked-out dates from a booking API, business hours, holiday calendars — since the function form of disable can express arbitrary rules, not just a fixed weekly pattern.

Step by step

How to Use

  1. 1
    Add the Flatpickr CDNLoad flatpickr.min.css and flatpickr.min.js before the snippet's JS runs.
  2. 2
    Paste HTML, CSS, and JSAn inline calendar renders with today's date as the earliest option.
  3. 3
    Try clicking a weekendIt's struck through and cannot be selected.
  4. 4
    Click an available weekdayIt highlights and the confirmation text updates below.
  5. 5
    Navigate to a future monthWeekends stay disabled automatically in every month.
  6. 6
    Try a past dateDates before today are disabled by minDate.

Real-world uses

Common Use Cases

Appointment and call booking
Make date selection the primary action on a screen with an always-visible calendar, as for booking a call.
Reservation systems
Disable weekends and past dates through a real weekday-checking function, with minDate: 'today' resolving correctly on every page load.
Range pairing
Pair with the date range presets variant for event registration deadlines or any other window with a start and end.
Delivery date selection
Offer business-day-only delivery scheduling, with onChange receiving true Date objects rather than only a formatted string to parse.
Availability calendars and theming
Use for any UI where picking a date is central, and learn how custom CSS can restyle Flatpickr through its stable class names.

Got questions?

Frequently Asked Questions

The disable option is given a function rather than a fixed list of dates. Flatpickr calls this function once for every candidate date it renders, including dates in months the user hasn't navigated to yet, and the function returns true whenever date.getDay() is 0 (Sunday) or 6 (Saturday). Because it's a rule evaluated per-date rather than a precomputed list, it correctly disables weekends in any month, indefinitely, with no maintenance.

'today' is a special string Flatpickr recognizes and resolves internally to the actual current date whenever the calendar renders — it is always accurate for whatever day the page happens to load on. Computing and passing a literal Date object for "today" would require constructing it correctly (including handling timezones) in application code, which the built-in keyword avoids entirely.

Flatpickr ships with minimal built-in visual styling beyond layout structure, by design, so that sites can theme it to match their own design system. Every visual detail here — rounded day cells, the indigo selected-day color, the strikethrough on disabled dates — is CSS in this snippet targeting Flatpickr's own stable class names like .flatpickr-day and .selected, not a separate custom calendar implementation.

selectedDates is an array of real JavaScript Date objects representing the current selection, while dateStr is a string already formatted according to Flatpickr's own dateFormat option. This snippet uses the real Date object with the browser's toLocaleDateString method to produce a fuller, more human-readable confirmation than Flatpickr's default short-format string would give.

Add more entries to the disable array — a literal date string or Date object disables that one specific date, alongside or instead of the weekday-checking function. For dynamic availability data (like blocked-out slots from a booking API), build the disable array from that data before initializing Flatpickr, potentially combining specific blocked dates with the general weekend rule in the same array.