I am trying to add functionality to jQuery Date Picker that will allow me to select a date range similar to travelocity.com and Kayak.com
I have the range selection working fine but what I am trying to do is once I select one date I want to show dates being highlighted while moving to the second date. Similar function to above mentioned sites.
The plugin I am using is jQuery Datepicker
Related
I am facing the following scenario :
I have a form array that allows to dynamically add or remove Angular Material MatDateRangePicker objects. When a specific range is selected in a dateRangePicker, I want that range to be disabled in the other dateRangePickers of the form array.
I am using the dateFilterFn method to apply the filter.
My problem is that when a range is selected in a specific dateRangePicker, it disables that specific range in all the other dateRangePickers (which is the desired behaviour), but also disables that range in the current dateRangePicker. So when I re-open that picker in which we just applied the range, the entire range is disabled which isn't convenient if I want to re-apply a new range in this picker which includes dates of the previously selected range within that same dateRangePicker.
If someone can help me figure this out, I'd be very grateful.
I created a stackBlitz project that simulates this feature of the application that I am developing :
https://stackblitz.com/edit/angular-ivy-zjpbcw?file=src/app/app.component.ts
I've been trying to figure out a way to only let the users select the last day of every month of a year (disabling the rest of the days). with the use of material ui date picker, was not able to find a proper solution to it. I would really appreciate if any one be able to show me how to implement this, thank you for your time!
Not sure what you meant say on the post, but there's prop called onMonthChange on material Ui DatePicker API docs, you can get the relevant month details with this, then you can use the shouldDisableDate prop to disable the rest of the days other than the last date of the month.
refer Material Ui DatePicker API docs here https://next.material-ui.com/api/date-picker/
Unfortunately there is no way to let the users select the last day of every month of a year (disabling the rest of the days) with material ui date picker (like DateTimePicker or KeyboardDatePicker).
You could define an interval of valid dates (using props minDate and maxDate).
Another thing you can do is allow user to select all dates and then manage valid/invalid date using onChange event.
I understand that we can disable certain dates (Jquery UI datepicker. Disable array of Dates) by manually specifying each date in array however this seems like a messy solution to a problem.
Is there a simpler method of just providing a start and end date of a period in which dates should be disabled? i.e. 07/07/2020 to 07/08/2020 rather than specifying each date between these?
I would like to able to select all Wednesdays in a given month by clicking on the day in the calendar UI. For example to schedule a meeting that occurs on every Wednesday. I would like the user to be able to just click on a day name rather than clicking every specific date.
I was wondering if anyone is aware of a Javascript date picker library that already has this feature or is this something I will have to write myself?
I've looked at a few multidate pickers available out there (http://multidatespickr.sourceforge.net/ for example) and they all have a feature to select a RANGE or the entire week however it seems that none of them support selection based on a specific week day.
I need such a form element: 3 separate drop-downs of Day, Month and Year, plus "calendar" button that shows calendar picker. Dropdowns should behave cleverly and know each other's state (e.g., no 31 February should be possible and leap years should be handled correctly). Calendar picker should show a little calendar, where user would pick a date and the pick would be passed to drop-downs.
I appreciate if you point me to an existing solution.
I intent NOT to use ExtJS or similar high-end framework, more on JQuery level.
Search for jquery demos on datepicker.
You will find a lot of datepickers along with the source code. You can select among them.
I use the jquery UI datepicker mostly.