jQuery UI DateTimePicker Spit to individual Elements

Question

( Being a JS rookie as I am, I am really tempted to just use ONE input field and handle all of that in one quick swift in PHP which is much my element . But I also want to try and learn living with JS. )

Using the jquery-ui-timepicker-addon.js , I need to divide the input to the respective fields year,month,day,hour,minutes..

I found some other similar questions here on SE , but they involve only the normal UI time picker ,which provides only the year,month,day triple ( never really understood why)..

However, using those resources , I "hacked" something that almost works, but the problem is that the field that is being clicked to trigger the picker is always getting filled with ALL the values ...

DEMO : http://jsfiddle.net/obmerk99/9Tk69/2/

Now, going a bit further, I have managed to divide also the hour:minute pair ..

DEMO : http://jsfiddle.net/obmerk99/9Tk69/3/

But still some problems remain ..

1 - This must be the ugliest code in human history ( or at least JS ) - there must be a better ways of doing it .. If someone presented me an equivalent PHP code I would be mortified.

2 - the Input field that is getting triggered still get ALL the input ..

3 - It work ok only if TIME is touched . if the DATE alone is set , the timesplit[0] will be undefined...

4 - I can not get BOTH to work, the minute a DATE Or Hours OR second is clicked - the focus is lost .

EDIT I

Better working Demo

This is basically @Steve Wellens answer,

getYear() should be changed to getFullYear..

The problem of the first field trigger still remains ( get full values ) on blur, and also - it works only if ALL values are touched .. ( if you do not change the hour, it will be blank)

At this point, I think that using ONE field and split with PHP will be my best option ( along with HTML5 for the few who have it ).

Ended up considering this ..

Would it be easier to use HTML5's date and time inputs (either the datetime one for a single input, or separate date and time ones) and rely on the native pickers? May not be an option if you have to support a lot of older browsers, although you could use Modernizr to detect support for the input types and use jQuery UI as a fallback. Splitting your elements in this kind of way seems like a recipe for an awful lot of unnecessary grief. — Matthew Daly, Feb 02 '14 at 17:23
hmmm.. Good point :-) But unfortunately I DO need to support old(ish) browsers. at least as a fallback like you said . To be honest , my FIREFOX ( 26 ) is not even fully supporting that .. — Obmerk Kronen, Feb 02 '14 at 17:27
I would just go ahead and use the HTML5 inputs, unless there's a really pressing reason why you need it to be split in this way. That way, you know it will work on modern mobile devices, and if you need to implement a fallback, it should be quite easy - use Modernizr to detect support for the HTML5 inputs using the inputtypes attribute, and if it isn't present, apply the date picker of your choice. I did this before in a Phonegap app and it worked absolutely fine. I would avoid splitting the inputs like the plague, unless it's absolutely necessary. — Matthew Daly, Feb 02 '14 at 17:37
Right .. It would also be easier, at least for me, to split it later in PHP . But that is not the scope of the question. and agai, you are talking about a fallback with ddatepicker - which is exactly what I asked .. — Obmerk Kronen, Feb 02 '14 at 17:44
The point I'm making is that by taking this approach you're creating a lot of unnecessary grief for yourself. Most of the JS date pickers aren't really set up to handle this kind of splitting, and it makes sense (it avoids issues with people selecting days that don't exist, like 31 February, for example). I personally wouldn't want to do it this way at all because it's a lot of grief to do so, and if a client wanted to do so I would push back against it. If you really needed to have separate fields, it strikes me the best way would be to implement a picker from scratch. — Matthew Daly, Feb 02 '14 at 17:55
@MatthewDaly - I would greatfull to see a working example that use HTML5 time element for the TIME ( not date ) without some JS splitting. — Obmerk Kronen, Feb 03 '14 at 01:50
http://www.html5tothepoint.com/input_date.htm includes examples of date, time and datetime. Most modern browsers should use their own picker for these automatically. — Matthew Daly, Feb 03 '14 at 10:12

score 0 · Answer 1 · answered Feb 02 '14 at 18:25

You could try it this way (I only did a few fields):

jQuery(document).ready(function () {

    jQuery('.countdown-timepicker').datetimepicker({
        onSelect: function (dateText, inst) {
            var FullDate = new Date(dateText);

            jQuery('.mydate_date_day').val(FullDate.getDate());
            jQuery('.mydate_date_month').val(FullDate.getMonth());
            jQuery('.mydate_time_hour').val(FullDate.getHours());
        }
    });
});

PS: It seems wrong to be selecting individual elements using a class.

Thanks.. it kind of works, But the trigger field still gets the full date. And also, getYear() should be changed to [getFullYear](http://stackoverflow.com/questions/4754938/javascript-date-getyear-returns-111-in-2011). See Edit — Obmerk Kronen, Feb 03 '14 at 01:36

jQuery UI DateTimePicker Spit to individual Elements

1 Answers1