I need to implement the following:
2 Datepickers with 2 consecutive months. The user can select a start- and an end-date.
Here is the tricky part that I can't figure out:
After selecting the start date I must enable/disable various dates.
From what I understand the disabled date are only fired once and the min-max only lets me select one range. However I need to disable/enable a multitude of dates.
I am very new to angular so I can't quite make heads or tails of the source yet.
I hope this is clear enough.
Also open to suggestions for a different datepicker directive that let's me do this. (Needs to able to default to open)
Related
I'm working on a calendar view that will allow user to make a reservation for a specific day and time. My problem is current behaviour of selectAllow function.
I want to restrict the user to be able to select max 2 slots (60 minutes in that example), and if he selects more, the selection should stay at the maximum possible time range, instead of disappearing and showing the not-allowed cursor. Would that be possible?
A fiddle for better visualization:
https://codesandbox.io/s/fullcalendar-forked-vm3k5y
Try to select more than 2 slots in a single day.
I have a requirement of implementing Multiple Month View which shows two months calendar side by side exactly like RangePicker but to be able to choose only single date, not a range.
I have made a Sandbox
If anyone has worked on such solution, please help.
Thanks.
I worked on something similar recently. I made an override to the Ant CMS for the range selection blue background. I just kept the styling for the dates that are clicked, and I just kept the two selected dates instead of the entire range.
It's a hack, but it worked fine and I've yet to run into any issues with it.
Set allowEmpty={[false, true]} disabled={[false, true]}
Demo
i have a scenario in which i'm using jquery datetimepicker http://trentrichardson.com/examples/timepicker/ but i wanna do some customization for the UI. I don't want any dropdowns or sliders instead i wanna combine the hour:minute and show them as input checkboxes in order to let the user select which time they want to book.
I found the following option in the plugin:
controlType: myControl
but since i'm not that good at jquery/javascript therefore i couldn't figure out how to use hour and minute objects and combine them as hour:minute and show them as checkboxes. I would appreciate some direction or suggestions here.
I want to show the calendar like this on my college project website. How can I do this with CSS and javascript? I want that when the user hovers the mouse over date it should show all the dates of the month and the same way with month and year option which should give a choice to user to choose the specified year or month.
I'm a completely new scholar to this field so how can I make it easy? Thnaks.
Well it sounds like you need help with your school project, so I'm just going to point you in a few directions and let you piece it together.
(1) You can make divs invisible.
JavaScript object.style.display:
object.style.display="inline"
(don't confuse CSS "display" for CSS "visibility")
or jQuery .css().
(2) You can change text inside an element.
JavaScript object.innerHTML:
document.getElementById("p1").innerHTML="New text!";
or jQuery .html().
EDIT: (3) You can bind an "onChange" event to the select if you plan on using dropdowns for the dates/etc.
JavaScript onChange
onchange="SomeJavaScriptCode"
or jQuery .bind("change").
I am looking for a Javascript-based date picker that would allow me to display one week only (instead of the current month).
Ideally it should be one that can be expanded to a full month view if necessary and back again.
Also, (css based?) design customizability would be a plus.
A jQuery solution would be preferred. I've had a brief look at the jQuery datepicker, but it seemed to me that it can only display full months. Please let me know if I am wrong.
The jQuery UI datepicker, as has been noted, can not easily be configured to display only one week. You can however use the maxDate and minDate configuration options to constrain the user's input. Here is an example of this functionality.
To answer your specific question, I am not aware of any datepicker control which will only display one week.
I'm not sure, but maybe you can customize this http://jqueryui.com/demos/datepicker/
Ones that show just one week I know none :(
Edit: After inspect, it shows to be CSS based, I've run through it's options but couldn't find anything just to show one week. Rather there is one which allows you to select only one week though, dunno what the supposed effect is though.
A date picker widget is overkill if you only have seven options. Just use a dropdown. A neat JavaScript trick is that you can add 1 day to any date and it will handle month/year rollovers automatically. The following code will always give you the next 7 days (starting with today):
var dates = [new Date()];
for (var i = 1; i < 7; i++) dates.push(new Date(dates[0].getYear(), dates[0].getMonth(), dates[0].getDate() + i));