Related Snippets

60 by shared tags
7–12 of 61
CurrentFlatpickr Inline Date Picker

Flatpickr Inline Date Picker

Leaflet Location Picker (Click to Set Coordinates)

Leaflet Location Picker (Click to Set Coordinates)

Leaflet Draw-a-Radius Area Selector

Leaflet Draw-a-Radius Area Selector

Scroll Canvas Generative Flow Field

Scroll Canvas Generative Flow Field

Scroll Canvas Particle Text Formation

Scroll Canvas Particle Text Formation

Bootstrap Table Column Visibility Toggle

Bootstrap Table Column Visibility Toggle

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Flatpickr Inline Date Picker — Free HTML CSS JS Snippet

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

TagsJS LibrariesForms & Validation

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.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to work out recurring availability rules from scratch. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how passing a function to Flatpickr's disable option lets one rule correctly disable weekends across every month the calendar can navigate to, compared to disabling a fixed list of specific dates. The same assistant can help optimize it — ask whether combining the weekday rule with a second array of specific holiday dates in the same disable array is the cleanest way to handle both kinds of unavailability together. It's also useful for extending the effect: ask it to add a way to fetch already-booked dates from an API and disable those too, support selecting a time slot after the date is chosen, or add a "next available date" quick-jump button. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build an inline, always-visible date picker calendar using the Flatpickr library (load Flatpickr's CSS and JS from a CDN, no other library), in plain HTML, CSS, and JavaScript.

Requirements:
- Render the calendar inline (always visible on the page, not behind a text input or popup trigger).
- Prevent selecting any date before today, using the library's built-in relative-date keyword for "today" rather than manually constructing or comparing Date objects.
- Disable every Saturday and Sunday across all months the calendar can navigate to, implemented as a single reusable rule that checks a candidate date's day of the week (not a fixed, manually maintained list of specific weekend dates).
- Visually style disabled dates (for example with a strikethrough and muted color) so they're clearly distinguishable from selectable dates, and give the currently selected date a distinct highlighted appearance — achieved by writing custom CSS that targets the library's own generated class names for day cells, disabled days, and the selected day, not a separately built calendar UI.
- When a date is selected, display a confirmation message below the calendar showing the full selected date in a readable format (including the day of the week, e.g. "Monday, September 21, 2026"), derived from the real Date object the library provides in its change callback, not from any pre-formatted string.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

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>

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 scheduling
Exactly this pattern for booking a meeting slot.
Reservation and booking systems
Restaurant, rental, or service availability pickers.
Event registration deadlines
Pair with the date range with presets snippet elsewhere in this collection.
Delivery date selection
Business-day-only delivery scheduling.
Availability calendars
Any UI where picking a date is the main task, not a side field.
Learning Flatpickr
A clear reference for inline mode, disable rules, and theming.

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.