I have a ReactJS application with a large form. It has many input fields requiring filling dates from a calendar. Now, I need to choose a date picker/ calendar library which supports following date formats:
1. only year (e.g. 2012)
2. only month and year (e.g. March 2012)
3. date picker (e.g.2012/03/15)
4. date range picker (e.g. 2012/03/15 - 2013/03/15)
5. date range picker for month and year (e.g. March 2012 - March 2013)
6. frequencies (e.g. daily, weekly, monthly)
Can anyone suggest me which package/library is the best date picker considering the above criteria ? you can suggest 5 libraries.
I prefer React DatePicker
npm i react-datepicker
You can try MUI date/time picker I have used it before and it's easy to use ,
you can have a look at their demo here
https://codesandbox.io/s/c4u1jf?file=/demo.js
docs : https://mui.com/components/pickers/
Related
I need to use a date range picker in which I need to implement the logic
Start date can be upto 6 months from today well end date will can be up to 6 months from a start date in a single date range selector
Well I played with different packages but I can able to set a limit on any one date.
Suggestions are appreciated
You can use react-calendar with moment, it supports some props two of which are minDate and maxDate.
Render two instances of react-calendar, pass minDate={moment().subtract(6, 'months')} and maxDate={moment()}.
Disable the second instance by default or render it only when user select a date in the first instance of the calendar.
Then pass minDate={dateSelectedInFirstInstance.add(1, 'day')} and maxDate={dateSelectedInFirstInstance.add(6, 'month')}.
UI date picker is showing incorrect date when, short date is selected from the format and any date in previous years like 1921 is selected, the date selected will be shown as in year 2021, ideally it should be shown as 1921.
Below is the official implementation, where it can be checked.
https://angular-ui.github.io/bootstrap/#!#datepickerPopup
Steps to reproduce.
Change Format dropdown to shortDate.
Select date as in year 1921 or 1962 etc.
The selected date year would be 2021 or 2062.
Does anyone has any idea about this. Is this a bug in plugin?
I think it's about how ui-bootstrap developers have designed the shortformat.
As you see, there is only 2 digit for the year. I think the two digit are for the actual century. You should open an issue on github and see what they reply.
I want to support the dates in the following formats in my angular bootstrap input: YYYY, MM.YYYY and DD.MM.YYYY. At the same time I want to send to the server the dates in the following formats: YYYY, YYYY-MM, YYYY-MM-DD. The user enters the date from the keyboard, no datepicker is needed. Is there an easy way to do that? I saw uib-dateparser, but it seems that it doesn't support optional MM and DD.
I have an ExtJS datepicker where I disable some dates so the user can't select them.
After the calendar is renderer I send to the server the current date and the server sends back an array of days to disable, so the visual result is the following:
The problem I have is that I don't know the first and last day showed in the datepicker.
In this image the first day is 08/31/2014 and the last day is 09/11/2014. How can I get those dates, so I can tell my server to check if within that range I have to disable any date.
In the calendar example the "yellow marked dates" have to been disabled.
Any clue? Appreciate in advance.
Check this fiddle: https://fiddle.sencha.com/#fiddle/8ms
this uses minDate, maxDate with disabledDates, disabledDays combination..to enable particular days and disable all other days.
You could arbitrarily set the minValue to this month's first day and maxValueto this month's last day and then assume this on the backend side.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Date-cfg-minValue
Here's how to get current month's first and last day
Get first and last date of current month with javascript or jquery
How do i force the sencha datepicker field to show dates only from current date. And not show the previous dates?
Thanks
As Rob said, its not possible because If i would disable the month january and februari (because it's march) and then proceed to select next year, january and februari should be enabled again. If i have to still achieve it, i have to solve it either programmatically or by validation.