How can I set the time value of the anytime jQuery plugin?

Question

The anytime jQuery plugin by default displays with the current date/time. The current date is perfect, but I want to set the time to midnight/00:00:00 for one "DateTimePicker" and the day's ultimate second (23:59:59) for the second one. How to do that?

UPDATE

Interesting - that causes the following to display in the anytime datetimepicker:

Mon, 29 Apr 2013 07:00:00

(actually, I can't see the last zero, but I'm assuming that's what it is).

On clicking on the component (is this the correct terminology for a jQuery plugin component/control instance?), the text reverts to:

2013-04-29 15:39:33 (current local time).

I reckon the 7 am jazz shown first has something to do with the UTC differential between here and...Greenwich, I would guess (I'm in California), but the fact that it reverts to the current local time (instead of remaining at 7 am, which I'm sure could be tweaked to accommodate the hour differential) makes this only entertaining rather than exhale-inducing.

UPDATE 2

I'm awarding a bounty to Marcacci ASAP, but stil, an interesting addendum to all this: Based on that code, I was able to work out what was needed if I just want to get up to the current second (when the page was loaded), rather than up to the second before midnight of the current day, which normally would be quite a few hours in the future:

var d = new Date();
var t = new Time();
var s = ('0' + (t.getHour() + 1)).slice(-2) + ":" + 
    ('0' + (t.getMinute() + 1)).slice(-2) + ":" + 
    ('0' + (t.getSecond() + 1)).slice(-2);
return d.getFullYear() + "-" + ('0' + (d.getMonth() + 1)).slice(-2) + "-" + ('0' + d.getDate()).slice(-2) + s;

However, oddly enough, the text/anytime DateTimePicker is blank when I use this code - until I click on it! Then it populates as I would expect it to...???

The other one (the "Begin Date") component, displays its value (midnight on the first of the month):

var d = new Date();
return d.getFullYear() + "-" + ('0' + (d.getMonth() + 1)).slice(-2) + "-" + "01 00:00:00";

...just fine.

Can you share a link to anytime jQuery plugin you are using? — Vadim, Apr 29 '13 at 22:18
@Mike: Not worried about time zones at the moment; I'm mainly working on the "look and feel" for now. The nitty-gritty will come later. — B. Clay Shannon-B. Crow Raven, Apr 29 '13 at 22:32

Mike Marcacci · Accepted Answer · 2013-04-29T23:27:27.853

2

You should just be able to manually set the input's value to today at midnight, and the plugin will pick up from there.

$('#dateInput').val(function(){
  var d = new Date();
  d.setHours(0,0,0,0);
  return d.toUTCString();
});

EDIT This should put it into the format that you're using:

$('#dateInput').val(function(){
  var d = new Date();
  return d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate() + " 00:00:00";
});

EDIT 2 OK, so it's VERY stubborn about the format, but I got it working:

$('#field1').val(function(){
  var d = new Date();
  return d.getFullYear() + "-" + ('0' + (d.getMonth()+1)).slice(-2) + "-" + ('0' + d.getDate()).slice(-2) + " 00:00:00";
});

Check out the jsfiddle here.

edited Apr 29 '13 at 23:27

answered Apr 29 '13 at 22:35

Mike Marcacci

1,913
1
18
24

My answer is too long, so I'm adding it as an Update above. – B. Clay Shannon-B. Crow Raven Apr 29 '13 at 22:42
I see... that is rather strange. I will think :) – Mike Marcacci Apr 29 '13 at 22:49
Nope - no go; nothing at all displaying now until I click into it and the plugin drops down like the baggy pants of a modern-era shoplifter as he attempts to flee the scene of the crime. – B. Clay Shannon-B. Crow Raven Apr 29 '13 at 23:04
OK... got it working. It was particular about the leading zero in the month. Check out the linked fiddle. – Mike Marcacci Apr 29 '13 at 23:28
Awesome! I will bountify this after the fact ASAP. – B. Clay Shannon-B. Crow Raven Apr 29 '13 at 23:35
1

You should use a (new AnyTime.Converter()).format(dateObject) with the same format specifier as the picker, instead of trying to format the dates manually. – Andrew M. Andrews III Apr 30 '13 at 01:15

Vadim · Answer 2 · 2013-04-29T23:39:22.977

1

Try the following code:

HTML

<input type="text" id="first" />
<input type="text" id="second" />

JavaScript

  // Current date and time
  var date = new Date();

  // Set time to 00:00:00
  date.setHours(0);
  date.setMinutes(0);
  date.setSeconds(0);
  $("#first").val(date.toUTCString());

  // Set time to 23:59:59
  date = new Date(date.getTime() + 23*60*60*1000 + 59*60*1000 + 59*1000);
  $("#second").val(date.toUTCString());

  // Apply plugin
  $("#first, #second").AnyTime_picker();

edited Apr 29 '13 at 23:39

answered Apr 29 '13 at 22:52

Vadim

8,701
4
43
50

That shows in both components "Mon, 29 Apr 2013 07:00:00 GMT" but clicking them does not invoke the plugin. – B. Clay Shannon-B. Crow Raven Apr 29 '13 at 23:06
I guess it would help if I added: AnyTime.picker("first"); AnyTime.picker("second"); ...but even so, the results are the same as that for Marcacci's code above. – B. Clay Shannon-B. Crow Raven Apr 29 '13 at 23:12

How can I set the time value of the anytime jQuery plugin?

UPDATE

UPDATE 2

2 Answers2