A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/JSLancerTeam/react-google-flight-datepicker below:

Telsho/react-google-flight-datepicker: React date picker inspired by Google Flight

react-google-flight-datepicker

Google flight date picker implemented in ReactJS

Upload.from.GitHub.for.iOS.MOV 
import { RangeDatePicker } from 'react-google-flight-datepicker';
import 'react-google-flight-datepicker/dist/main.css';

<RangeDatePicker
  startDate={new Date()}
  endDate={new Date()}
  onChange={(startDate, endDate) => onDateChange(startDate, endDate)}
  minDate={new Date(1900, 0, 1)}
  maxDate={new Date(2100, 0, 1)}
  dateFormat="D"
  monthFormat="MMM YYYY"
  startDatePlaceholder="Start Date"
  endDatePlaceholder="End Date"
  disabled={false}
  className="my-own-class-name"
  startWeekDay="monday"
/>
import { SingleDatePicker } from 'react-google-flight-datepicker';
import 'react-google-flight-datepicker/dist/main.css';

<SingleDatePicker
  startDate={new Date()}
  onChange={(startDate) => onDateChange(startDate)}
  minDate={new Date(1900, 0, 1)}
  maxDate={new Date(2100, 0, 1)}
  dateFormat="D"
  monthFormat="MMM YYYY"
  startDatePlaceholder="Date"
  disabled={false}
  className="my-own-class-name"
  startWeekDay="monday"
/>
Prop name Prop type Default value Description startDate Date null Selected start date endDate Date null Selected end date dateFormat String D Display format for date. Check momentjs doc for information (https://momentjs.com/docs/#/displaying/) monthFormat String MMM YYYY Display format for month. Check momentjs doc for information (https://momentjs.com/docs/#/displaying/) onChange Function null Event handler that is called when startDate and endDate are changed onFocus Function null Return a string (START_DATE, END_DATE) which indicate which text input is focused minDate Date 1900 Jan 01 Minimum date that user can select maxDate Date 2100 Jan 01 Maximum date that user can select className String Custom CSS className for datepicker disabled String false Disable the datepicker startDatePlaceholder String Start Date Placeholder text for startDate text input endDatePlaceholder String End Date Placeholder text for endDate text input startWeekDay String (monday or sunday) monday Determine the start day for a week (monday or sunday) highlightToday Bool false Hightlight "today" date singleCalendar Bool false Only applicable on SingleDatePicker. When this prop is actived, the datepicker will display 1 calendar instead of 2 calendar in the the container tooltip String, React Component, Function Display the tooltip when hovering on day element, you can pass string, component, or a function. The function will receive a Date object, so you can generate the content of tooltip. subTextDict Dict null Each key of the dict is a date in format YYYY-MM-DD, and the value is the text you want to display. You can see an example in dev/index.js. The text shouldn't be too big expandDirection String "right" if "right" the calendar will expand from the top left to the right if "left" it will expand from the top right to the left locale string "fr", "it" .. You can specify the locale, it should follow the locale formats from dayjs.

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4