react-feather#Calendar JavaScript Examples

The following examples show how to use react-feather#Calendar. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Filter.js    From dashboard with MIT License 4 votes vote down vote up 
function Filter({
  timeseries,
  setTimeseries,
  date,
  dateOnChange,
  dates,
  datesOnChange,
  maxDate,
  floating,
  filterFacilityTypes,
  setFilterFacilityTypes,
  content,
}) {
  const [facilityTypesFilterOptions, setFacilityTypesFilterOptions] =
    useState(FACILITY_TYPES);
  const [_filterFacilityTypes, _setFilterFacilityTypes] =
    useState(filterFacilityTypes);
  const [facilityTypeFilterOpen, setFacilityTypeFilterOpen] = useState(false);
  const resetFacilityTypeFilter = () => {
    setFacilityTypeFilterOpen(false);
    setFacilityTypesFilterOptions(FACILITY_TYPES);
  };

  return (
    <div
      className={clsx(
        floating ? " mt-10 flex-shrink-0 " : "mb-8 rounded-lg",
        "flex flex-col items-center justify-between px-1 py-1 dark:bg-gray-800 bg-white shadow-md sm:px-4 sm:py-2 md:flex-row"
      )}
    >
      <p className="inline-flex dark:text-gray-400">Filters</p>
      <div className="inline-grid gap-1 grid-rows-none w-full sm:grid-flow-col-dense sm:grid-rows-1 sm:place-content-end">
        {![CONTENT.COVID, CONTENT.LSG].includes(content) && (
          <div className="relative h-10 dark:bg-gray-900 bg-white rounded-lg">
            <Button
              layout="link"
              onClick={() => setFacilityTypeFilterOpen(true)}
              iconRight={ChevronDown}
              className="w-full shadow-xs"
              disabled={facilityTypeFilterOpen}
            >
              Facility Type
            </Button>
            <Dropdown
              isOpen={facilityTypeFilterOpen}
              align="right"
              onClose={() => resetFacilityTypeFilter()}
              className="z-40"
            >
              <Label className="mb-2">
                <div className="inline-grid gap-1 grid-rows-none w-full xl:grid-flow-col-dense xl:grid-rows-1 xl:place-content-end">
                  <Input
                    className="dark:bg-gray-900"
                    placeholder="Search facility types"
                    onChange={(e) => {
                      setFacilityTypesFilterOptions(
                        e.target.value
                          ? fuzzysort
                              .go(e.target.value, facilityTypesFilterOptions)
                              .map((v) => v.target)
                          : FACILITY_TYPES
                      );
                    }}
                  />
                  <Button
                    layout="link"
                    onClick={() => _setFilterFacilityTypes([])}
                    className="dark:bg-gray-900 shadow-xs"
                  >
                    Clear
                  </Button>
                  <Button
                    layout="link"
                    onClick={() => {
                      _setFilterFacilityTypes(GOVT_FACILITY_TYPES);
                    }}
                    className="whitespace-no-wrap dark:bg-gray-900 shadow-xs"
                  >
                    All Govt.
                  </Button>
                  <Button
                    layout="link"
                    onClick={() => _setFilterFacilityTypes(FACILITY_TYPES)}
                    className="dark:bg-gray-900 shadow-xs"
                  >
                    All
                  </Button>
                </div>

                <HelperText className="ml-1">
                  {`Selected ${_filterFacilityTypes.length} items`}
                </HelperText>
              </Label>

              <Card className="flex flex-col mb-2 p-2 h-64 overflow-y-auto">
                {facilityTypesFilterOptions.map((d, i) => (
                  <Label key={i} check>
                    <Input
                      onChange={() => {
                        const _t = _filterFacilityTypes.indexOf(d);
                        const _tmp = [..._filterFacilityTypes];
                        if (_t > -1) {
                          _tmp.splice(_t, 1);
                        } else {
                          _tmp.push(d);
                        }
                        _setFilterFacilityTypes(_tmp);
                      }}
                      type="checkbox"
                      checked={_filterFacilityTypes.includes(d)}
                    />
                    <span className="ml-2">{d}</span>
                  </Label>
                ))}
              </Card>
              <div className="flex justify-end space-x-2">
                <Button
                  onClick={() => setFilterFacilityTypes(_filterFacilityTypes)}
                  className="shadow-xs"
                >
                  Apply
                </Button>
                <Button
                  onClick={() => resetFacilityTypeFilter()}
                  className="shadow-xs"
                >
                  Cancel
                </Button>
              </div>
            </Dropdown>
          </div>
        )}

        <div className="flex justify-evenly dark:text-gray-700 dark:bg-gray-900 bg-white rounded-lg">
          <Button
            layout="link"
            onClick={() => setTimeseries(false)}
            className="rounded-r-none shadow-xs"
            disabled={!timeseries}
          >
            <span className="capitalize">Single</span>
          </Button>
          <Button
            layout="link"
            onClick={() => setTimeseries(true)}
            className="rounded-l-none shadow-xs"
            disabled={timeseries}
          >
            <span className="capitalize">Range</span>
          </Button>
        </div>
        {!timeseries ? (
          <DatePicker
            // eslint-disable-next-line jsx-a11y/no-autofocus
            autoFocus={false}
            calendarIcon={
              <Calendar className="dark:text-gray-400 text-gray-600" />
            }
            clearIcon={null}
            tileClassName="font-sans rounded-lg p-2"
            value={date}
            onChange={dateOnChange}
            maxDate={maxDate}
            format="dd/MM/yyyy"
            className="h-10"
          />
        ) : (
          <DateRangePicker
            // eslint-disable-next-line jsx-a11y/no-autofocus
            autoFocus={false}
            calendarIcon={
              <Calendar className="dark:text-gray-400 text-gray-600" />
            }
            clearIcon={null}
            tileClassName="font-sans rounded-lg p-2"
            value={dates}
            onChange={datesOnChange}
            maxDate={maxDate}
            format="dd/MM/yyyy"
          />
        )}
      </div>
    </div>
  );
}