@10xjs/date-input-controller

    0.1.6 • Public • Published

    @10xjs/date-input-controller

    A helper component for creating datetime inputs in React.

    Build Status Coverage Status

    import DateInputController from '@10xjs/date-input-controller';
     
    const range = (start, end) => {
      return Array(...Array(1 + end - start)).map((_, i) => start + i);
    }
     
    const DateInput = ({value, min, max, onChange}) => (
      <DateInputController value={value} min={min} max={max} onChange={onChange}>
        {(props) => (
          <div>
            year{" "}
            <select value={props.year} onChange={(e) => props.setYear(e.target.value)}>
              {range(props.yearMin, props.yearMax).map((value) => (
                <option key={value} value={value}>{value}</option>
              ))}
            </select>{" "}
     
            month{" "}
            <select value={props.month} onChange={(e) => props.setMonth(e.target.value)}>
              {range(props.monthMin, props.monthMax).map((value) => (
                <option key={value} value={value}>
                  {new Date(1970, value, 1).toLocaleString(
                    'en-US',
                    { month: "long" }
                  )}
                </option>
              ))}
            </select>{" "}
     
            day{" "}
            <select value={props.day} onChange={(e) => props.setDay(e.target.value)}>
              {range(props.dayMin, props.dayMax).map((value) => (
                <option key={value} value={value}>{value}</option>
              ))}
            </select>{" "}
     
            <br/>
     
            time{" "}
            <select value={props.hour} onChange={(e) => props.setHour(e.target.value)}>
              {range(props.hourMin, props.hourMax).map((value) => (
                <option key={value} value={value}>
                  {value.toLocaleString('en-US', {minimumIntegerDigits: 2})}
                </option>
              ))}
            </select>
            :
            <select value={props.minute} onChange={(e) => props.setMinute(e.props.target.value)}>
              {range(props.minuteMin, props.minuteMax).map((value) => (
                <option key={value} value={value}>
                  {value.toLocaleString('en-US', {minimumIntegerDigits: 2})}
                </option>
              ))}
            </select>
            :
            <select value={props.second} onChange={(e) => props.setSecond(e.target.value)}>
              {range(props.secondMin, props.secondMax).map((value) => (
                <option key={value} value={value}>
                  {value.toLocaleString('en-US', {minimumIntegerDigits: 2})}
                </option>
              ))}
            </select>
          </div>
        )}
      <DateInputController>
    );

    Keywords

    none

    Install

    npm i @10xjs/date-input-controller

    DownloadsWeekly Downloads

    105

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    83.1 kB

    Total Files

    20

    Last publish

    Collaborators

    • 10xjs