All dates in Antd Datepicker are selected when value is passed - javascript

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

Related

Element-plus keep DatePicker component always open

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.

How to have date in mm/dd/yyyy format on typing in date picker textfield in nuxtjs?

I implemented a date picker in a nuxtjs with the vuetify app. It's working fine when selecting any date from the calendar. I need to enable the same functionality while typing also. If I am typing like 12122021, it should be formatted to 12/12/2021 on typing itself. Here is what I have tried so far.
https://stackblitz.com/edit/github-fms71e?file=pages/index.vue
I am getting an undefined error when I lose focus. How can I implement the functionality?
Check this codesandbox I made, I'm not using Nuxt but you can make yourself an idea to implement it on your project: https://codesandbox.io/s/stack-70724804-sryk8?file=/src/components/custom/CustomDatePicker.vue
This is a custom date picker component that I made for one of my projects. You can customize it to your needs but the component already come with multiple customization options that you can enable/modify through props.
The date picker can display dates in 3 formats. It use vue-the-mask library to control manual date inputs and some auxiliary functions to control date convertions that I import as a mixin.
dd/MM/yyyy
MM/dd/yyyy (Using "month-first" prop)
yyyy/MM (using "month" prop)
Regardless of the format you choose to display to the end user, the custom date picker will always work internally with yyyy-MM-dd or yyyy-MM date format

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

Antd DatePicker setValue form Issue

I was trying to set a form Date Value for DatePicker using
this.prop.form.setValue
it sets but when i try to change the date and submit it shows the same set date it doesn't change the date.
Using antd DatePicker
have tried it on this link (Do change the antd version to 3.16 as some features are deprecated in the new antd releases )
https://codesandbox.io/s/dry-waterfall-3fhkt?fontsize=14
I found a work around it apperently antd saves the value into ._d and not into the main key value
the below code solved it for me
moment(values.dtReading._d).format()

Angular UI Bootstrap datepicker popup timezone

I understand that the inlnie Angular UI Bootstrap datepicker allows you set the timezone via ng-model-options. I'm using the datepicker-popup (ui.bootstrap.datepickerPopup) and would like to do the same, but ng-model-options doesn't appear to work.
My api returns the model in UTC time and need to ensure that the date displayed by the datepicker is also displayed in UTC.
Anybody know how to configure this?

Categories