Is there a way to show the antd datepicker inline style on mobile screen in react

Question

I want to show the datepicker in inline style on mobile screen so that the datepicker should display full on mobile screeen using all the mobile screen width and should show normally on the desktop screen is there any way to do this

I am new to the react that is why i am facing issues

 `function ShowWithPopOver() { if(window.innerWidth>700) { } else { const el = document.getElementById('MobileDatePickerOverlay'); el.classList.add('mlk-drawer-open'); i want to show the datepicker in a div that will open before the datepicker will show } }` ` `

 <DatePicker placeholder='EndDate'onClick={ShowWithPopOver} onChange={onChange} name='EndDatePicker' id='EndDatePicker' style={{ border: "transparent", boxShadow: "none" }} />

Answer 1

You can use bootstrap for doing it. It will adjust the component's width based on the screen size. You can define how much width a component should take for screen of a particular size. Suppose your component is

                            <dateTimePicker>Date<dateTimePicker/>

you can simply do is this

                    <dateTimePicker class="col-sm-12">Date<dateTimePicker/> 

which tells browser that if the site is opened in small device like mobile it should take full width of screen and no other component should be placed alongside it.

You can use this tutorial for reference. I hope this will help you