wix-style-react/dist/es/stories/DatePicker.story.js

wix-style-react

import DatePicker from 'wix-style-react/DatePicker';

import format from 'date-fns/format';

var defaultValue = new Date('2017/05/01');
var today = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);

export default {
  category: '3. Inputs',
  storyName: '3.6 DatePicker',
  component: DatePicker,
  componentPath: '../src/DatePicker',

  componentProps: function componentProps(setState) {
    return {
      onChange: function onChange(value) {
        return setState({ value: value });
      },
      dateFormat: 'YYYY/MM/DD',
      dataHook: 'storybook-datepicker',
      placeholderText: 'Select Date',
      value: defaultValue,
      shouldCloseOnSelect: true,
      showYearDropdown: false,
      showMonthDropdown: false,
      locale: 'en',
      twoMonths: false
    };
  },

  exampleProps: {
    onChange: function onChange(date) {
      return format(date, 'YYYY/MM/DD');
    },
    value: [{ label: '2017/05/01', value: defaultValue }, { label: 'Today', value: today }, { label: 'Tomorrow', value: tomorrow }],
    dateFormat: [{ label: 'YYYY/MM/DD', value: 'YYYY/MM/DD' }, { label: 'MM/DD/YYYY', value: 'MM/DD/YYYY' }, {
      label: 'custom function (date.getDate())',
      value: function value(date) {
        return date.getDate();
      }
    }]
  }
};