wix-style-react/src/Range/docs/Range.demo.js

wix-style-react

import React from 'react';
import Range from '..';
import DatePicker from '../../DatePicker';
import FormField from '../../FormField';

export default () => {
  const [fromValue, setFromValue] = React.useState(new Date());
  const [toValue, setToValue] = React.useState('');

  return (
    <FormField
      label="Valid between"
      infoContent="Set when coupon code is valid from and when it expires."
    >
      <Range>
        <DatePicker
          placeholderText="From"
          id="fromDate"
          dateFormatV2="PP"
          value={fromValue}
          onChange={setFromValue}
        />
        <DatePicker
          placeholderText="To"
          id="toDate"
          dateFormatV2="PP"
          value={toValue}
          onChange={setToValue}
        />
      </Range>
    </FormField>
  );
};