woocommerce/plugins/woocommerce-admin/client/components/calendar
Kelly Dwan 6a82db326e SummaryNumber: Switch to dropdown display on small screens (https://github.com/woocommerce/woocommerce-admin/pull/265)
* Move isMobileViewport to a helper function in lib

* Switch SummaryList to use navigable menu to support up/down (or left/right) arrow key navigation

* Switch to a dropdown menu/button combo when on a smaller screen

* Ensure aria role & href are only added if the item is a link

* Wrap the entire SummaryNumber in a link to match non-mobile use

* Update card content to be single line on mobile

* Add label to the popover title

* Make SummaryNumbers edge-to-edge on smaller screens

* Switch to the collapsed/dropdown view on screens <1100px

* Adjust offset of arrow icon
2018-08-02 18:20:48 -04:00
..
README.md DatePicker: Hook up react-dates 2018-06-27 14:11:13 +12:00
index.js SummaryNumber: Switch to dropdown display on small screens (https://github.com/woocommerce/woocommerce-admin/pull/265) 2018-08-02 18:20:48 -04:00
input.js Datepicker: Custom: Add styles 2018-07-30 10:36:38 +12:00
phrases.js Update woo-dash naming to new wc-admin name (https://github.com/woocommerce/woocommerce-admin/pull/183) 2018-07-10 08:48:06 -04:00
style.scss Datepicker: Custom: Add styles 2018-07-30 10:36:38 +12:00

README.md

Calendar

This is wrapper for a react-dates powered calendar.

How to use:

import { DateRange } from 'components/calendar';

render: function() {
  return (
   <DateRangePicker
		start={ moment( 2018-01-01 ) }
		end={ moment( 2020-01-01 ) }
		onSelect={ this.onSelect }
		inValidDays="past"
	/>
  );
}

Props

  • start: A moment date object representing the selected start. null for no selection
  • end: A moment date object representing the selected end. null for no selection
  • onSelect: A function called upon selection of a date
  • inValidDays: Optionally invalidate certain days. past, future, none, or function are accepted. A function will be passed to react-dates' isOutsideRange prop