DerekAllard.com

Adding time to jQuery UI Datepicker

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

Comments

Pascal wrote on

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

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

Vince Stross wrote on

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

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

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

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

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

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

Mike McNally wrote on

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

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());