Element-plus keep DatePicker component always open - javascript

I'm using element-plus library and I I'm struggling to achieve custom el-date-picker component behavior.
Is it possible to always keep date picker component open even after the values were selected from the calendar and applied to v-model? This is the component I'm working on: el-date-picker
I need to be able to select days from el-date-picker component and keep showing the calendar after the selected dates were submitted.

Related

All dates in Antd Datepicker are selected when value is passed

When using the DatePicker component from Ant Design and setting its value with the value prop, all dates in the pop-up calendar are highlighted in blue as if they are selected.
Moving the cursor over the pop-up calendar causes the date and month to change automatically without any click.
Clicking the "back" button also causes the year to change.
This issue does not occur when the DatePicker is not a controlled component. ( value is not passed as a prop )
DEMO
Ant-Design Version: 5.1.2
Change from moment js to dayjs
Ant Design is using Dayjs as a date library from 5.0.0.
Till 4.x it is momentjs.
The issue is because of passing a moment object as value to datepicker which expects a dayjs object internally.
We need to pass dayjs object instead of moment js object to resolve the issue.
Check this LIVE DEMO
If you want to use moment as your Date Library for your project follow this guide

Material UI Pickers with Formik for both Date and Time components with seconds

I am currently working on a React app together with Formik that requires the use date and time pickers. I am building the app using Material-UI and have been looking at Material-UI Pickers over at https://material-ui-pickers.dev/
Since I am new to React/Formik/Material-UI, I have the following questions:
Is it possible to use Material-UI Pickers together with Formik as I need to maintain state of all dates/time provided by user?
When it comes to the user input for both dates and times, I have a case when the user needs to enter both a date as well as time but in 24 hours format and also need to include seconds, i.e.
the format that I am after is: DD/MM/YYYY HH24:MI:SS
Is this possible with Material-UI Pickers as from what I could see in there demo, I didn't see the capability to add seconds?
I also have another scenario where the user input will just be a time component alone, again with seconds, just like in my previous question, i.e.:
HH24:MI:SS
I guess my main concern is, how do I allow a user to also provide the seconds SS as this is required?
Best Way to do it is using DatePicker(For setting dates) and Timepicker(Provides seconds feature also along with hour and min setting) both seperately , You can use Material UI Pickers with Formik , I have put it in a sandbox , you can refer it for implementing

How to get React-Dates DayPicker single DateController to work with custom input

How can I get the airbnb datepicker with custom input to open and close the calendar?
This is the custom date input https://airbnb.io/react-dates/?path=/story/daypickersingledatecontroller--with-custom-input
I want this to work like this example: https://airbnb.io/react-dates/?path=/story/sdp-input-props--default
The calendar should open and close for the custom input like it does with the built-in one

Modifying Angular Material Datepicker popup

I would like to use the Angular Material Datepicker in my Angular application, but I a not quite satisfied with the default behavior The datepicker normally opens the calendar as a popup under the input. Instead I would like for the calendar to be permanently opened so that the user can continue to view the calendar as he selects different dates.
I understand that there is an opened property that reflects the status of the popup:
Angular Datepicker
Could I achieve the desired behavior by permanently setting the property to true to prevent the calendar from closing? I have never rally modified the default behavior of a library before...how would I go about this?
Perhaps a different approach would be separating the input from the calendar? I wonder what the best design approach would be?

How to open default date picker by javascript?

In normal html, I use below code to define an input date picker which allow user to select date in a popup calendar. It works fine.
<input type='date'></input>
but now, I want to show the date picker on a onClick function of a button. I know that there may be some other 3rd party date picker component available. But I don't want to bring new dependencies in my application. So i am looking for a default way to support this behavior.
BTW, my web app is built on react, redux framework. And it is running on android and iOS webview. If the default date picker doesn't support this requirement, any 3rd party component which is fit for mobile device and compatible with react is also welcome.
Give id to the input tag and then on click of a button use .focus() event
For eg: onclick="document.getElementsByTagName('input').focus()"

Categories