Breaking News: Grepper is joining You.com. Read the official announcement!

DatePicker with month and year separate

Adventurous Albatross answered on June 16, 2023 Popularity 7/10 Helpfulness 1/10

answer DatePicker with month and year separate

DatePicker with month and year separate

Comment

import React, { useState } from "react";
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import "./styles.css";

const DatepickerCustom = () => {
  function range(start, end) {
    return Array.apply(0, Array(end - start + 1)).map(
      (element, index) => index + start
    );
  }

  const [startDate, setStartDate] = useState(new Date());
  const [selectedYear, setSelectedYear] = useState(new Date());
  const [selectedMonth, setSelectedMonth] = useState(new Date());

  const years = range(1990, new Date().getFullYear());
  const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ];

  const CustomInput = React.forwardRef(({ value, onClick }, ref) => (
    <button className="custom-input" onClick={onClick} ref={ref}>
      {value}
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        id="calendar"
        width={18}
      >
        <path d="M12,14a1,1,0,1,0-1-1A1,1,0,0,0,12,14Zm5,0a1,1,0,1,0-1-1A1,1,0,0,0,17,14Zm-5,4a1,1,0,1,0-1-1A1,1,0,0,0,12,18Zm5,0a1,1,0,1,0-1-1A1,1,0,0,0,17,18ZM7,14a1,1,0,1,0-1-1A1,1,0,0,0,7,14ZM19,4H18V3a1,1,0,0,0-2,0V4H8V3A1,1,0,0,0,6,3V4H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V7A3,3,0,0,0,19,4Zm1,15a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V10H20ZM20,8H4V7A1,1,0,0,1,5,6H19a1,1,0,0,1,1,1ZM7,18a1,1,0,1,0-1-1A1,1,0,0,0,7,18Z" />
      </svg>
    </button>
  ));

  return (
    <div>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DatePicker
          customInput={<CustomInput />}
          value={startDate}
          onChange={date => setStartDate(date)}
          openTo="month"
          views={["year", "month"]}
          format="MM/yyyy"
          renderCustomHeader={params => (
            <div className="custom-date-header">
              <button
                onClick={params.decreaseMonth}
                disabled={params.prevMonthButtonDisabled}
                className="date-navigation"
              >
                {"<"}
              </button>
              <select
                value={selectedYear}
                onChange={({ target: { value } }) => {
                  params.changeYear(value);
                  setSelectedYear(value);
                }}
              >
                {years.map(option => (
                  <option key={option} value={option}>
                    {option}
                  </option>
                ))}
              </select>

              <select
                value={selectedMonth}
                onChange={({ target: { value } }) => {
                  params.changeMonth(months.indexOf(value));
                  setSelectedMonth(value);
                }}
              >
                {months.map(option => (
                  <option key={option} value={option}>
                    {option}
                  </option>
                ))}
              </select>

              <button
                onClick={params.increaseMonth}
                disabled={params.nextMonthButtonDisabled}
                className="date-navigation "
              >
                {">"}
              </button>
            </div>
          )}
        />
      </MuiPickersUtilsProvider>
    </div>
  );
};

export default DatepickerCustom;

Popularity 7/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: datepicker javascript

Link to this answer
Share Copy Link

Contributed on Jun 16 2023

Adventurous Albatross

0 Answers Avg Quality 2/10

DatePicker with month and year separate

Contents

More Related Answers

DatePicker with month and year separate

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.