Are there any existing AJAX/Javascript Date picker widgets/libraries that also allow you to select a time range? That is, after picking a date, an existing UI pops-up/becomes available to select a time range for the same.
I'm looking for example of things like this. UI Libraries that offer some form of date picking, followed by a step to pick a time range.
Yes, I know, a dozen different ways this could be implemented myself. I'm interesting in knowing what kind of preexisting libraries exist for this problem domain.
Here are some of the MANY choices:
Fancy Time Picker
NoGray Time Picker
This JQuery Plugin
Any+Time
Another JQuery Plugin
JQuery pt.TimeSelect
Clock Pick
Clock Picker
TimePickr
-
John Resig (The J IN JQuery) has this to say about it.
You'll need to combine a DATE Plugin with a Time Plugin, don't try to cram both into one dialog
Related
I'm looking for suggestions/recommendations for a JQuery/Javascript calendar that can display multiple months at once (ie. previous month, current month, next month) like so:
(The attached mockup shows a 4-month view, but I think we'll actually be doing a 3-month view).
I DO NOT need a date picker. This is basically meant to display a user's schedule, with no ability to choose a specific month/year (beyond the side-scrolling). We'll pull events out of our database, hook them into the calendar somehow, and then on a day click/hover (or both), display additional information. Events will not be editable from this view - it is display only.
I've looked into general JQuery calendar plugins (Ion Calendar, CLNDR), but none seem to have the basic multiple-month functionality I need. Multi-lingual support (or the ability to add multi-lingual text) is also important to us. I was really hoping to find a ready-made plugin for this - can't be the first time someone's tried to do it!
In case it's any use/help, we use ColdFusion and MSSQL Server. We've also got JQuery 1.9.1, JQueryUI 1.10.0 and Bootstrap 2.3.2.
Edit: I did look at the JQuery UI datepicker, but it won't work for the functionality I need. I can't see any way to attach data to a specific date, or to be able to style certain days differently than others. I think the primary issue w/ it is that it's a datepicker, not a display calendar.
Like Sean said in the comments, the best option you have is probably FullCalendar. Although multi-month isn't supported out of the box, you might be able to achieve it by adding multiple calendars. Check out Issue #199, which describes a possible solution.
Regarding the multi-lingual problem: although it isn't multi-lingual by itself, FullCalendar does support modifying the days, months, etc. See Text/Time Customization. You could use ColdFusion's MonthAsString and DayOfWeekAsString functions to make it multi-lingual yourself.
I have faced a little problem while trying to use this two jquery plugins. Hope someone can help me out with this.
The first plugin (DatePicker) I have used is the default one that comes with the jqueryui.
The second plugin (DateTimePicker) is the DateTimePicker from http://trentrichardson.com/examples/timepicker/
What I am trying to achieve is to have a user-defined date range like the sample provided in the jqueryui, with two textboxes (specify start date and end date) http://jqueryui.com/demos/datepicker/date-range.html
While having another datetimepicker to allow user to select a datetime within the date specified above.
Here's a sample: http://jsfiddle.net/uyB52/1/
However, the issue here is that whenever I try to add in the datetimepicker javascript, the datepicker will not function properly. It will not be able to set the minimum date range as what it is suppose to be.
Have anyone encountered the same issue before? Can some one please advice me? I am still new to programming. Thanks in advance!
It looks like your datetimepicker plugin interferes with jQuery UI (although it is supposed to be a working jQuery UI plugin). There may are possibilities to fix this issue, but I would recommend to use no or another plugin for picking the time (which works).
If you want to use a datetimepicker, you will have to search for different plugins and find out which one fits your needs best. I can not really recommend a plugin because it depends on your requirements.
But you could also go without a datetimepicker plugin and only use jQuery UI instead? Have a look at this fiddle: http://jsfiddle.net/uyB52/7/
The idea is to use jQuery UI's datepicker for picking dates, and use dropdown boxes for choosing the time. You could also let the user input the time in an input field and validate it. Or, instead of dropdown boxes, use the jQuery UI slider.
Got it. You should convert string into Date as minDate and maxDate options take Date object.
$("#from").datepicker("option", "maxDate", new Date(selected_date))
jsfiddle
I am using Selenium to test out a web site. The web site contains a date field, which when clicked, opens a popup from wherein I can choose the date.
My issue is that I wish to select a particular date using the Selenium IDE or Selenese. I have tried various methods, but have not been able to get a correct solution or been able to resolve it, except by manually specifying a date to the field in Selenese script. I am using Java to implement the test case.
An example could be checked by going to any airlines site and clicking on the date field for departure. The popup which comes up, I wish to capture a date on that. This could be a future date or the present date.
You need to implement some code that will navigate calendar to the desired date. Depending on the calendar appearance it may be required to navigate to the next month or year, so you need the code that will determine what needs to be done and then emulate required events for Selenium.
We had the same task in our tests and we end up with either selecting today's date or by entering the date into the field directly. We also made a code that will allow to select any date on the calendar by we did this only because we needed to test the calendar widget and we were the authors of the widget so we knew how it was made. However it resulted in writing a lot of code
Selenium IDE is limited in its ability to handle javascript. I've worked around it at times
by putting custom links in that do customized GETs, but it's a hack.
You could look at Sahi, which can do it. I haven't tried it though.
http://sahi.co.in/w/
I'm having trouble finding an elegant way to allow for date/time input in an html form. I am thinking of having drop down menus for year, month, day, hour, minute, second, millisecond that are populated with valid entries only. I could do this by hard coding values for each drop down menu, but I'm thinking there must be a more elegant way to do this, perhaps with some already existing javascript library that I have not found yet. Any tips for getting this done?
edit: Second, and if possible, millisecond precision is needed for what I'm working on.
edit#2: After reading some of the comments, I have come to the realization that it is probably a bad idea to have drop down menus for the large range of values required by hours/minutes/seconds and especially milliseconds. I think will go with having the DatePicker prototype date chooser, along with a simple textfield for time input.
This can be done quite elegantly with a Jquery plug-in called Datepicker
There are many calendars which can do this, with both date and time :
Calendar Date Select
Control.DatePicker (based on PrototypeJS) my favourite, I made an enhanced version, with more features, I can share it
Dynarch calendar but I find it too heavy
and others
I think a very easy way to do this is by using PHP i.e. for making choosing a day and a month:
Use the select command for the form, then insert a PHP line to initiate a for loop. So for the days the loop would go from 1 -> 31 and for the month from 1 -> 12. So instead of hard coding it for all the days months etc, you can neatly fit it into one line of code with a small bit of PHP added.
You could expand on on this plugin since you want second/millisecond
http://www.jnathanson.com/index.cfm?page=jquery/clockpick/ClockPick
I want to be able to make an HTTP call updating some select boxes after a date is selected. I would like to be in control of updating the textbox so I know when there has been a "true" change (in the event the same date was selected). Ideally, I would call a function to pop-up the calendar and be able to evaluate the date before populating the text box...so I can do my validation before making a server call.
JQuery's datepicker is an extremely flexible tool. With the ability to attach handlers prior to opening or after date selection, themes, range selection and a variety of other incredibly useful options, I've found that it meets all my needs.
The fact that I sit next to one of its maintainers here at work is also fairly useful...
I've been playing with the jquery datePicker script - you should be able to do everything you need to with this.
YUI and ExtJs both have very nice looking and flexible calendars.
If you ever end up considering a JavaScript library/toolkit, Dijit, a widget system which layers on top of Dojo, has a calendar (Dijit calendar test page). I found it relatively simple to implement.
//Disclaimer: I'm in the middle of a love-hate relationship w/ Dojo at the moment, as I am in the process of learning and using it better.
I don't like the MS ASP.NET ajax, but their datepicker is superb. Otherwise, jQuery datepicker.
Check out the ASP.NET AJAX Calendar Extender or Steve Orr's drop down Calendar control.
I'm using the JSCalendar from Dynarch for a project I'm currently working on. It is LGPL licensed and really flexible (easy to customize to your needs). It has lots of features and looks good, too.
http://www.dynarch.com/projects/calendar/