wix-style-react/src/DatePicker/docs/DatePicker.examples.js

wix-style-react

export const _size = `
<StorybookComponents.Stack flexDirection="column">
  <DatePicker placeholderText="Large" size="large" />
  <DatePicker placeholderText="Medium" size="medium" />
  <DatePicker placeholderText="Small" size="small" />
</StorybookComponents.Stack>;
`;

export const _status = `
<StorybookComponents.Stack flexDirection="column">
  <DatePicker
    value={new Date()}
    status="error"
    width="160px"
  />
  <DatePicker
    value={new Date()}
    status="warning"
    width="160px"
  />
  <DatePicker
    value={new Date()}
    status="loading"
    width="160px"
  />
</StorybookComponents.Stack>
`;

export const _statusMessage = `
<DatePicker
  value={new Date()}
  status="error"
  statusMessage="This is an error message"
  width="160px"
/>;
`;

export const _readOnlyAndDisabled = `
<StorybookComponents.Stack flexDirection="column">
  <DatePicker
    value={new Date()}
    placeholderText="Select Date"
    readOnly
  />
  <DatePicker
    placeholderText="Select Date"
    disabled
  />
</StorybookComponents.Stack>;
`;

export const _clearButton = `() => {
  const [value, setValue] = React.useState(new Date());

  return (
    <DatePicker
      placeholderText="Select Date"
      value={value}
      clearButton
      onClear={() => setValue(null)}
      onChange={setValue}
      width="160px"
    />
  );
};
`;

export const _localeAndDateStyle = `
<StorybookComponents.Stack flexDirection="column">
  <DatePicker value={new Date()} locale="en" dateStyle="short" />
  <DatePicker value={new Date()} locale="en" dateStyle="medium" />
</StorybookComponents.Stack>;
`;

export const _firstDayOfTheWeek = `
<StorybookComponents.Stack flexDirection="column">
  <DatePicker
    placeholderText="First day is Sunday"
    firstDayOfWeek={0}
    width="240px"
  />
  <DatePicker
    placeholderText="First day is Monday"
    firstDayOfWeek={1}
    width="240px"
  />
</StorybookComponents.Stack>;
`;

export const _numberOfMonths = `
<DatePicker value={new Date()} numOfMonths={2} />;
`;

export const _yearAndMonthSelections = `
<DatePicker
  value={new Date()}
  showMonthDropdown
  showYearDropdown
/>;
`;

export const _excludingDates = `
<StorybookComponents.Stack flexDirection="column">
  <DatePicker
    placeholderText="Select future date only"
    excludePastDates
    width="50%"
  />
  <DatePicker
    placeholderText="Select past date only"
    filterDate={date => date < new Date()}
    width="50%"
  />
</StorybookComponents.Stack>;
`;

export const _togetherWithTimeInput = `
() => {
  const [startDate, setStartDate] = React.useState(new Date());
  const [endDate, setEndDate] = React.useState(new Date());

  return (
    <Layout cols={12}>
      <Cell span={6}>
        <FormField label="Start Time" width="100%">
          <Box gap="12px">
            <DatePicker
              value={startDate}
              onChange={setStartDate}
              placeholderText="Select Date"
              width="100%"
            />
            <TimeInput />
          </Box>
        </FormField>
      </Cell>
      <Cell span={6}>
        <FormField label="End Time" width="100%">
          <Box gap="12px">
            <DatePicker
              value={endDate}
              onChange={setEndDate}
              placeholderText="Select Date"
              width="100%"
            />
            <TimeInput />
          </Box>
        </FormField>
      </Cell>
    </Layout>
  );
};
`;