Adding time to jQuery UI Datepicker : DerekAllard.com

Adding time to jQuery UI Datepicker

October 21^st, 2008

For some work I’m doing right now I needed the current time output into the input field that the (excellent) jQuery datepicker uses, but I don’t need it selectable by the user. The default format is


mm/dd/yyyy

but can be formatted using the formatDate parameter. The list of formatting options is considerable, including predefined setups for ATOM, COOKIE, ISO_8601, various RFC dates, RSS, TIMESTAMP and even W3C. Unfortunately none of the predefined formats, nor the large list of date components includes time.

As I sat for a moment reading over the list I noticed

‘...’ - literal text

Aha! Those jQuery folks… gotta love them. If only javascript date manipulation wasn’t so crumby. The current solution, while nicely functional, offends the sense of javascript elegance that jQuery has blessed/cursed me with. If anyone has solutions for improvements to this code, I’d be all ears! I mean really… an if statement to get AM or PM?

date_obj = new Date();
date_obj_hours = date_obj.getHours();
date_obj_mins = date_obj.getMinutes();

if (date_obj_mins < 10) { date_obj_mins = "0" + date_obj_mins; }

if (date_obj_hours > 11) {
    date_obj_hours = date_obj_hours - 12;
    date_obj_am_pm = " PM";
} else {
    date_obj_am_pm = " AM";
}

date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+date_obj_am_pm+"'";

$("#entry_date").datepicker({dateFormat: $.datepicker.W3C + date_obj_time}); 

jQuery datepicker

This entry was made on October 21^st, 2008 @ 11:49 and filed into How-To, Javascript.

Comments

Pascal wrote on October 21^st, 2008 @ 12:09

I think some clever use of everyones favorite mod() function could solve your if problem.

date_obj_am_pm = (date_obj_hours < 12) ? 'AM': 'PM';

// This turns midnight into 12 AM, so ignore if it's already 0
if (date_obj_hours != 0) {
    date_obj_hours = ((date_obj_hours + 11) % 12) + 1;
} 

That should do it.

Pogung177 wrote on October 21^st, 2008 @ 17:59

I’m looking Jquery Form Validation for my CI project, I not found any solution from CI forum. Any suggestion ?

Vince Stross wrote on October 23^rd, 2008 @ 6:05

I assume you’re using php? I always append the time after the form post. I only mention this because you said the time is not selectable. your solution is elegant enough though… don’t worry bout it.

Jared wrote on October 23^rd, 2008 @ 16:42

Is there any explanation as to why the time is there, if the time is selected? I would think that would be meaningful; if not, use PHP. I’m guessing you need the time in there, because the PHP is not accessible?

Derek wrote on October 23^rd, 2008 @ 20:50

Is there any explanation as to why the time is there…

Its how ExpressionEngine currently allows for granular control of entries. The current time is pre-populated when a user chooses a date, but they can set the time to anything they want. A full-blown “time picker” would be gross overkill since most people only care about the day. PHP generated time isn’t useful in this case since a user may want to set it to a future time. Also, EE utilizes a localization system that wouldn’t allow server-based timestamps to work in those cases.

Jared wrote on October 24^th, 2008 @ 5:06

How about something like so?

date = new Date();
datetime = date.toLocaleString().substr(date.toLocaleString().length-11);
datetime = datetime.substr(0,5)+datetime.substr(8); 

GD wrote on October 29^th, 2008 @ 17:06

I like pascal’s solution with modulus. (Pascal, should date_obj_am_pm not be set after the modulus part?)

As a side-question Derek, can users also choose a 24-hours notation or is the AM/PM notation a hard choice?

GD wrote on October 29^th, 2008 @ 17:07

oops, (slaps self w. beer-bottle) scrap that date_obj_am_pm remark…

Mike McNally wrote on November 18^th, 2008 @ 15:31

Here’s a “javascripty” version that may or may not be preferred:

date_obj_time = (function(date) {
  return (function(hr, mn) {
    return '' +
      ('0' + ((hr % 12) || 12)).replace(/.*(\d\d)$/, '$1') + ':' +
      ('0' + mn).replace(/.*(\d\d)$/, '$1') +
      (hr > 11 ? ' PM' : ' AM');
  })(date.getHours(), date.getMinutes());
})(new Date()); 

Jackson wrote on November 26^th, 2008 @ 7:59

changing a little bit of code, we can show the time already in the AM and PM, without need to show the acronyms. worked well on my app.

date_obj_time = (function(date) { return (function(hr, mn) { return ‘’ + (‘0’ + ((hr % 24) || 12)).replace(/.*(\d\d)$/, ‘$1’) + ‘:’ + (‘0’ + mn).replace(/.*(\d\d)$/, ‘$1’); //+ (hr > 11 ? ’ PM’ : ’ AM’); })(date.getHours(), date.getMinutes()); })(new Date());

DerekAllard.com : CodeIgniter, ExpressionEngine, and the World of Web Design

Adding time to jQuery UI Datepicker

Comments

Post a Comment