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));
Related
I want to be able to switch between a month and dates within a month in my application using the FullCalendar plugin. How can I achieve that? I am attaching the screenshot of the UI of how I want it to somewhat look like so that the user can switch between a given month or a date within a month.
Any suggestions/guidance will be highly appreciated :)
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
As the image shows, how can I remove the month name on the day. Looking for some help. Can't find it in API.
I removed those pieces of code from fullCalendar.js, found no api option to hide it.
I need to create a jQuery ui datepicker that will let users choose a start week of the year, and an ending week of the year. IE: Always Sunday - Saturday. Is this possible?
DatePicker can restrict a user's selection, but only as far as restricting the user between two dates (minDate and maxDate options). As far as I'm aware, there's no built in functionality that can restrict selection to only Sundays or Saturdays.
DatePicker does however have a means of calculating the week of a user's selection with the following snippet of code:
$.datepicker.iso8601Week(new Date(dateText))
You can see how this could be utilised in the following jsFiddle (read below, first).
The only problem with this is that the ISO-week always starts with a Monday. So even though in the demo above I have set Sunday to be the first day of the week, if you try selecting the date Wed 7th March 2012 you'll see in the datapicker it shows as week 9, where the ISO-week will return 10. I left it in on purpose to show you this pitfall.
Although this doesn't provide a direct solution to your problem, hopefully it'll help in determining if you should use DatePicker at all to produce your desired functionality.
edit
Actually, just found this question which might be of use to you, looks like it's possible : Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?
I'm doing a website for an hotel, and I'm trying to do a datepicker to book the days that somebody wants to stay there.
http://jsfiddle.net/newpatriks/PmPGV/
Here you have that I have done, but I've some problems:
I don't know why, but when the users select the range days, the calendar starts from the month that contains the "end day" choosen.
The css run ok for the .temp_1, but not going well for the .temp_2 and .date_selected (I'm going crazy about this...)
Thanks a lot :)
JQuery Datepicker has a built in range select: datepicker/date-range.
Here is an example from the following question: jQuery datepicker- 2 inputs/textboxes and restricting range