Skip to main content
100%

DatePicker

✓ Published0🌍 Public
Aabonello
Last edited Dec 30, 2021
Created on Dec 30, 2021

A React-based date picker component that supports both single-date selection and date-range selection. The DatePicker button displays the selected date or date range, and clicking it opens a modal dialog containing an interactive calendar. The calendar is built with date-fns utilities and displays a month grid with weekday headers, highlighting today, selected dates, and range intervals. Users can navigate between months and select dates, with validation against optional min and max date constraints. The range picker shows a continuous highlighted range between the start and end dates, with distinct styling for the range endpoints.

AI-generated description

DatePicker

The DatePicker component allows you to pick a single date, or date range (from -> to).

This component is built on top of my Dialog as a promise component and uses Bulma.

It uses the SASS from Bulma Calendar, converted to SCSS.

The Javascript has been rewritten from scratch for use in React and uses the date-fns library.

Required Props

  • onChange - When you select a date or a date range, this returns the selection (see below).

Optional Props

  • name - The data name value which will be included in the onChange callback (see below)
  • startDate - The date that you want to be pre-selected in a single date or range. The default is today.
  • isRange - If you want the DatePicker to act as a range picker, include this boolean prop (see below).
  • endDate - If the component is a range picker, this is the end date you want to be pre-selected. The default is tomorrow.
  • minDate - Optional minimum threshold for only allowing dates from this date or after.
  • maxDate - Optional maximum threshold for only allowing dates from this date or before.
  • dateFormat - What is displayed on the button, as per the date-fns format documentation. The default is YYYY-MM-DD.
  • className - A custom className for styling.
const onChange = ({name, startDate, endDate}) => {
    console.log({name, startDate, endDate});
};

<DatePicker
    name="availabilityWindow"
    startDate={new Date(2018, 2, 5)} // March 5th, 2018
    endDate={new Date(2018, 3, 12)} // April 12th, 2018
    minDate={new Date(2018, 1, 1)} // Feb 1st, 2018
    maxDate={new Date(2018, 4, 31)} // May 31st, 2018
    onChange={onChange}
    isRange 
/>

Similar vizzes

Loading thumbnail…

Gist e4feca46f5a47e079e65b8fc7f1905a2

This example shows a React app that routes between a home page with a date picker and a results page, while also fetching historical Bitcoin price data. The code uses `react-datepicker` and `moment` for date selection, and `axios` to request data from the Cryptocompare API endpoint for BTC prices in USD and EUR. A simple switch statement in `routingSystem` controls which component renders, and clicking a "Data" button triggers the API call to populate the app state. The visualization itself is not implemented in the provided code, as it only handles data fetching and basic navigation.

Aangel-cs
62% match
Loading thumbnail…

Input Range with react

This example demonstrates a React component that combines a range slider and a dropdown menu to control a numeric value. It shows how React state manages the selected value, which is displayed as text. The code uses React's `useState` hook to store the input value and passes it back to the `RangeInput` component via props. The `RangeInput` component renders an HTML `<input type="range">` element, while the `Dropdown` component renders a `<select>` element, both triggering state updates through `onSelectedValueChange`. ReactDOM renders the main `App` component to the root element.

AAdriana Rodriguez Sanabria
60% match
Loading thumbnail…

React Dropdown Menus

This example demonstrates a simple React dropdown menu for selecting a pet, with a large, readable interface optimized for demonstration purposes. The code uses React 16.9.0 and ReactDOM to render a single `<select>` element containing seven options, including a placeholder prompt. Styling is applied via inline CSS in the HTML file, adjusting font sizes for the label and select controls. The application mounts to a root `<div>` element, and the implementation is minimal, showing basic form control composition without any external data sources or event handling logic.

AAlex Gomes
58% match
Loading thumbnail…

redux-form example - http://insin.github.io/redux-form-example/

This example demonstrates a travel-add form built with React and redux-form, styled using React-Bootstrap. It validates user input—start and end dates, origin, destination, hotel, and car access—with client-side rules like date range checks, and includes a fake submit flow that displays the submitted data as formatted JSON. The visualization highlights redux-form's declarative field binding, validation, and state management through a multi-field form, with a loading state simulated during submission.

AAbhay-Joshi-Git
58% match
Loading thumbnail…

React-select

A React interface demonstrates a pet-selection dropdown menu using the `useState` hook to manage user input. The example shows how to split components across files with ES6 modules, exporting a reusable `Dropdown` component that receives options, an identifier, and a callback for value changes. The component renders an HTML `<select>` element with `<option>` children, styling the label and select with CSS. Initialized with "hamster," the app logs each selected value to the console, illustrating state-driven interactivity within a ReactDOM-rendered application.

CCatalina Vajiac
57% match
Loading thumbnail…

Slider Practice

This example demonstrates a React-based interactive control featuring a single slider input for selecting a year. The interface presents a range slider from 1966 to 2016, with a label indicating the current selection. The selected year updates the component’s state using React’s `useState` hook, and the displayed value changes accordingly. The slider is implemented as a controlled component, where user interactions trigger the `onSelectedYearChange` callback. The code imports React and ReactDOM from the standard library, with no external data sources or visualization layers beyond the basic HTML input element.

RRudy Shayganfar
57% match
Loading thumbnail…

React First Steps (Date animation?)

This example demonstrates a live-updating digital clock built with React. It displays the current date and time in three formats: a full string, a localized time, and an ISO date with hyphens replaced by bullet characters. The clock updates every second using `setInterval` in the component lifecycle methods. The code uses React state and lifecycle methods like `componentDidMount` and `componentWillUnmount`, along with `setState` to trigger re-renders.

RRussell Watson
56% match
Loading thumbnail…

Gist 3332902

This visualization demonstrates how to integrate a Google Calendar date picker into a Yii PHP application using the GCalendar extension widget. It shows the widget configured to bind to a model attribute named `date_of_birth`, with the date format set to `dd/mm/yyyy`. The code instantiates the GCalendar widget, passing the model and input field parameters to enable date selection within a form. The extension handles the calendar UI and populates the specified input field with the formatted date value.

Aallyraza
56% match