DayPilotDayPilot
Products
Support
DayPilot Code
JavaScript
Angular
React
Vue
ASP.NET
ASP.NET Core
PHP
Spring Boot
Open-Source

JavaScript Date Picker

The JavaScript Date Picker component lets you choose a date visually using a mini calendar. The following tutorials show how to integrate the date picker with the JavaScript and Angular scheduling and calendar components.

JavaScript Date Picker: Using Diagonal Cell Split to Show Partial Free/Busy State
JavaScript Date Picker: Using Diagonal Cell Split to Show Partial Free/Busy State
How to use diagonal cell overlays in a JavaScript date picker to highlight full and partial day occupancy, common in hospitality reservation and availability views.
javascript date-picker reservation navigator open-source
Nov 16, 2025
JavaScript Scheduler: How to Integrate a Date Picker
JavaScript Scheduler: How to Integrate a Date Picker
How to link the JavaScript Scheduler component to a date picker that can change the visible date.
javascript scheduler navigator date-picker open-source
Oct 10, 2025
Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
HTML5/JavaScript event calendar with day, week, and month views and integrated date navigator. Includes a sample PHP backend with MySQL database.
html5 javascript event-calendar php mysql day week month sqlite open-source date-picker
Oct 6, 2025
React Calendar with Date Picker (Open-Source)
React Calendar with Date Picker (Open-Source)
How to use a popup date picker to select a date displayed by the React Calendar component.
react date-picker event-calendar javascript open-source react19
Sep 12, 2025
Angular Date Picker with Drag & Drop Range Selection (Open-Source)
Angular Date Picker with Drag & Drop Range Selection (Open-Source)
How to activate the free-hand date range selection mode in the Angular date picker component (Navigator).
date-picker navigator open-source angular angular20 typescript
Sep 9, 2025
Vue Date Picker with Free/Busy Highlighting (Open-Source)
Vue Date Picker with Free/Busy Highlighting (Open-Source)
Use the Vue date picker component (Navigator) to change the current date. The date picker can highlight dates that already have events or are not available.
vuejs navigator date-picker open-source javascript free-busy composition-api vue3
Sep 3, 2025
Angular Calendar: Date Switching
Angular Calendar: Date Switching
How to integrate Angular event calendar component with a date picker and navigation buttons for changing the visible week.
angular angular20 event-calendar navigator date-picker open-source typescript
Sep 2, 2025
JavaScript Calendar: Blocking Selected Dates
JavaScript Calendar: Blocking Selected Dates
Block access to past dates in the JavaScript Calendar component. Past dates are not accessible using the date picker and drag and drop operations are disabled.
javascript calendar navigator disable date-picker
Jul 14, 2024
Angular Scheduler: Integration with a Date Picker
Angular Scheduler: Integration with a Date Picker
Angular 14 application that uses DayPilot Navigator component as a date picker for the Scheduler.
angular angular14 scheduler typescript navigator date-picker
Oct 10, 2022
Articles 1-9 of 9

Products

Resources

Tools

About Us

DayPilot Pro

HTML5 event calendar/scheduling components. Available for JavaScript/Angular/React/Vue, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.