react-datetime-picker icon indicating copy to clipboard operation
react-datetime-picker copied to clipboard

<Fit />'s child needed to have its height decreased to 251px.

Open rasel-stacklearner opened this issue 1 year ago • 0 comments
trafficstars

this is my codes

 <ReactDateTimePicker
                {...field}
                amPmAriaLabel="Select AM/PM"
                calendarAriaLabel="Toggle calendar"
                clearAriaLabel="Clear value"
                dayAriaLabel="Day"
                hourAriaLabel="Hour"
                maxDetail="second"
                minuteAriaLabel="Minute"
                monthAriaLabel="Month"
                nativeInputAriaLabel="Date and time"
                secondAriaLabel="Second"
                yearAriaLabel="Year"
                format="MM/dd/yyyy hh:mm a"
                isClockOpen={false}
                disableClock={true}
                id="custom_datetime-picker"
                calendarIcon={<Icon size={18} />}
              />
              <style jsx global>{`
                #custom_datetime-picker .react-datetime-picker__wrapper {
                  border: 1px solid #e4e4e7;
                  padding: 5px;
                  border-radius: 5px;
                }

                #custom_datetime-picker
                  input.react-datetime-picker__inputGroup__input.react-datetime-picker__inputGroup__year
                  + .react-datetime-picker__inputGroup__divider {
                  width: 2px;
                  background: #e4e4e7;
                  border-radius: 5px;
                  margin: 0 5px 0 5px;
                }

                #custom_datetime-picker .react-calendar {
                  background: #ffffff;
                  border: 1px solid #e4e4e7;
                  border-radius: 5px;
                  padding: 5px;
                }
                #custom_datetime-picker
                  .react-calendar
                  .react-calendar__tile--active,
                #custom_datetime-picker
                  .react-calendar
                  .react-calendar__tile--now {
                  background-color: #18181b;
                  color: #fff;
                }
                #custom_datetime-picker .react-calendar .react-calendar__tile {
                  border-radius: 5px;
                }
                #custom_datetime-picker
                  .react-calendar
                  .react-calendar__tile--hasActive {
                  background: #18181be3;
                  color: #fff;
                }
              `}</style>

rasel-stacklearner avatar May 31 '24 23:05 rasel-stacklearner