Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
I've been looking around for a decent jQuery plugin that can handle both dates and times. The core UI DatePicker is great, but unfortunately I need to be able to take time in as well.
I've found a few hacks for the DatePicker to work with times, but they all seem pretty inelegant and Google isn't turning up anything nice.
Is there a good jQuery plugin for selecting dates and times in a single UI control with a usable interface?
By far the nicest and simplest DateTime picker option is http://trentrichardson.com/examples/timepicker/.
It is an extension of the jQuery UI Datepicker so it will support the same themes as well it works very much the same way, similar syntax, etc. This should be packaged with the jQuery UI imo.
#David, thanks for the recommendation! #fluid_chelsea, I've just released Any+Time(TM) version 3.x which uses jQuery instead of Prototype and has a much-improved interface, so I hope it now meets your needs:
http://www.ama3.com/anytime/
Any problems, please let me know via the comment link on my website!
In my view, dates and times should be handled as two separate input boxes for it to be most usable and efficient for the user to input. Let the user input one thing at a time is a good principle, imho.
I use the core UI DatePicker, and the following time picker.
This one is inspired by the one Google Calendar uses:
jQuery timePicker:
examples: http://labs.perifer.se/timedatepicker/
project on github: https://github.com/perifer/timePicker
I found it to be the best among all of the alternatives. User can input fast, it looks clean, is simple, and allows user to input specific times down to the minute.
PS:
In my view: sliders (used by some alternative time pickers) take too many clicks and require mouse precision from the user (which makes input slower).
My best experience with a datepicker is with the prototype-based AnyTime. I know that's not jQuery, but it may still be worth the compromise for you. I know absolutely no prototype, and it's still easy enough to work with.
One caveat I've found: it is not forward compatible on some browsers. That is, it did not work with a newer version of prototype on Chrome.
Just to add to the info here, The Fluid Project has a nice wiki write-up overviewing a large number of date and/or time pickers here.
I researched this just recently and have yet to find a decent date picker that also includes a decent time picker. What I ended up using was eyecon's awesome DatePicker, with two simple dropdowns for time. I was tempted to use Timepickr.js though, looks like a really nice approach.
I have ran into that same problem. I actually developed my using server side programming, but I did a quick search to try and help you out and found this.
Seems alright, didn't look at the source too much, but seems to be purely JavaScript.
Take look:
http://www.rainforestnet.com/datetimepicker/datetimepicker.htm
Here is the demo page link:
http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm
good luck
This is some code I use to have a user select one
datetimepicker, set the datetime, and have the
other datetimepicker add One Minute to that time.
I needed this for a custom medication control....
Anyway, thought it might help someone else since I could
not find the answer any where online...
(at least not a complete answer)
Keep in mind that the 60000 added, adds one minute.
(60 * 1000 milliseconds)
$('.frdtPicker').datetimepicker({
onClose: function(dateText, inst) {
var endDateTextBox = $('.todtPicker');
if (endDateTextBox.val() != '') {
var testStartDate = new Date(dateText);
var testEndDate = new Date(endDateTextBox.val());
if (testStartDate > testEndDate) {
var testStartDate = new Date(dateText).getTime() + 60000;
var testStartDate2 = new Date(testStartDate);
endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
}
}
else {
var testStartDate = new Date(dateText).getTime() + 60000;
var testStartDate2 = new Date(testStartDate);
endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
}
$('.frdtPicker').val(dateText); //endDateTextBox.val());
},
onSelect: function(selectedDateTime) {
var start = $(this).datetimepicker('getDate');
$('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
}
});
Take a look at the following JavaScript plugin.
Javascript Calendar with date and time
I've made it to be simple as possible. but it still in its early days.
Let me know the feedback so I could improve it.
Not jQuery, but it works well for a calendar with time: JavaScript Date Time Picker.
I just bound the click event to pop it up:
$(".arrival-date").click(function() {
NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});
I make one function like this:
function getTime()
{
var date_obj = new Date();
var date_obj_hours = date_obj.getHours();
var date_obj_mins = date_obj.getMinutes();
var date_obj_second = date_obj.getSeconds();
var date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+":"+date_obj_second+"'";
return date_obj_time;
}
Then I use the jQuery UI datepicker like this:
$("#selector").datepicker( "option", "dateFormat", "yy-mm-dd "+getTime()+"" );
So, I get the value like this: 2010-10-31 12:41:57
We had trouble finding one that worked the way we wanted it to so I wrote one. I maintain the source and fix bugs as they arise plus provide free support.
http://www.yart.com.au/Resources/Programming/ASP-NET-JQuery-Date-Time-Control.aspx
I hate dates, I can never get them to behave.
I have a javascript variable that looks like this:
var currentDate = new Date();
I pass this to a C# Web API controller as a parameter.
My local time was 12:43 but when I put a breakpoint in my action it shows 11:43. The problem is, that if I do this at 00:43 then my controller would take the date as yesterday. I need it to pick out the right day. If I select the currentDate as 02/09/2015 12:43 then I need my controller to use the same date.
I know this has something to do with local times etc, but how can I get them all to use the same one?
Any help would be greatly appreciated.
I am fairly new to the JSP scene, but have been programming in other languages for a few years. I am writing an application where I am passing a different variable to java based on a selection option. My main question was where to do the variable checking to see which value to pass?
Here is my current state of value checking (I am currently rewriting it in JSTL as I found sciplets are bad practice).
if (request.getParameter("Freq").equals("Minutes")) {
runOn = request.getParameter("numberOfMinutes");
} else if (request.getParameter("Freq").equals("Weekly")) {
runOn = request.getParameter("dayOfWeek");
} else if (request.getParameter("Freq").equals("Monthly")) {
runOn = request.getParameter("dayOfMonth");
} else {
runOn = "-1";
}
Should this sort of check be done on the jsp page, in javascript, or somewhere else? Looking for a best practice kind of answer.
Side question: Right now, I create a number of different drop down boxes and hide/unhide them using an onChange function in javascript. Would it be better to have one list box where the options change in javascript or keep the current system? Essentially the list boxes are asking the user what day they want their process to run. So if frequency is weekly, a list box with the days of the week would show, but if they have month selected, a list of numbers from 1 to 31 shows. It could all be done with one list box that changes its options when the 'frequency' drop down changes. Again, I'm looking for a best practice answer?
Thank you in advance!
In my app I have two date strings:
Say that they are:
date1 = "2014-03-14 18:25:15";
date2 = "2014-03-14 16:26:15";
I get these date strings based on two events that the customer selects. Now I need to show the difference between these two strings in HH:MM:DD format.
What I am currently doing is, posting to PHP using AJAX and then doing the calcuation in the server:
$rDate = new DateTime($date1);
$tDate = new DateTime($date2);
$interval = date_diff($rDate,$tDate);
echo $interval->format('%h:%i:%s');
Then in the AJAX response handler I print it to a div
My problem is that server trip is just too much an overkill for this. How can I achieve the same thing from browser itself? (Javascript/Jquery/MomentJS)...
Any help is greatly appreciated!
I'd suggest looking into Moment.js, which is a very well featured date handling library for Javascript.
Here's the relevant manual link for Moment.js for what you're wanting to do: http://momentjs.com/docs/#/displaying/difference/
Hope that helps.
i have been busy with a home-made calendar for understanding certain javascript stuff, and i encountered something which for me is very odd.
I have two functions linked to buttons which go to one year before, and one year after the current year.
I also have a function which opens a prompt so you can select any year you want.
The calendar works fine, the buttons work fine, except for one little thing.
Here is the code first:
year = 2014;
function last_year(year,month) {
parseInt(window.year -= 1);
yeartype(window.year,0);
}
function next_year(year,month) {
parseInt(window.year += 1);
yeartype(window.year,0);
}
function chooseYear(year,month) {
window.year = prompt("Which year do you want to see?");
yeartype(window.year,0);
}
yeartype is a function which checks if it's a leap year or not, and then makes the calendar for that specific year.
When i added the function chooseYear, it started to mess things up.
When i enter a year, it loads it. For example, 2020. When i press last_year after i used the chooseYear function, it goes to 2019 (which should happen), but if i press next_year after i used chooseYear, it goes from 2020 to 20201. And if i press last_year after that, it goes back to 20200. For some reason, if i use chooseYear, followed by next_year, it ADDS a number after the existing numbers. Going back a year doesn't give problems though.
It's a really long question, but it's a weird situation to explain. Does anyone know how i canmake it work properly?
Thanks in advance :)