css Question posted in
Some basic documentation can be found here.

Css – react-datepicker anchorDirection="bottom" not working

I am using react-datepicker to display a time picker component but I want the time list to be displayed in the bottom of input component but it’s currently showing on top of the input field.

code :

<DatePicker
    selected={end_time}
    onChange={(date) => {
        setEndtime(date);
    }}
    showTimeSelect
    showTimeSelectOnly
    timeIntervals={30}
    timeCaption="Time"
    dateFormat="h:mm aa"
    minTime={moment().toDate()}
    maxTime={moment().endOf("day").toDate()}
    anchorDirection="bottom"
/>

Problem screenshot

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found a workaround

    <DatePicker
                  selected={end_time}
                  onChange={(date) => {
                    setTime(date);
                  }}
                  showTimeSelect
                  showTimeSelectOnly
                  timeIntervals={30}
                  timeCaption="Time"
                  dateFormat="h:mm aa"
                  minTime={moment().toDate()}
                  maxTime={moment().endOf("day").toDate()}
                  popperPlacement="bottom-start"
                  popperProps={{
                    positionFixed: true,
                  }}
                  popperModifiers={[
                    {
                      name: "preventOverflow",
                      options: {
                        altAxis: true,
                        altBoundary: true,
                        tether: false,
                      },
                    },
                    {
                      name: "flip",
                      options: {
                        fallbackPlacements: [],
                      },
                    },
                    {
                      name: "offset",
                      options: {
                        offset: [0, 0],
                      },
                    },
                  ]}
                />

  2. 0

    You need to use the popperPlacement="bottom"

    So, it will be

     <DatePicker
    selected={end_time}
    onChange={(date) => {
       setEndtime(date);
    }}
    showTimeSelect
    showTimeSelectOnly
    timeIntervals={30}
    timeCaption="Time"
    dateFormat="h:mm aa"
    minTime={moment().toDate()}
    maxTime={moment().endOf("day").toDate()}
    popperPlacement="bottom"
  />

    these are it’s parameters that you can play with

    'auto', 'auto-left', 'auto-right', 'bottom', 'bottom-end', 'bottom-start', 'left', 'left-end', 'left-start', 'right', 'right-end', 'right-start', 'top', 'top-end', 'top-start'

    Hope this help

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search