Setting date and time in JQuery datetimepicker

Question

I have a situation where I'm trying to use Trent Richardson's datetimepicker JQuery extension to have users select dates and times in one go.

But before that, I want to set the date and time so that the datetimepicker's input box displays a default date and time which would be set from the server. A user would then click inside the input box to call datetimepicker, then the default date and time would appear on datetimepicker. The user can then override these if necessary.

So far, in code of mine I have:

<script type="text/javascript">
        $(function(){
            $('.example-container > pre').each(function(i){
                 eval($(this).text());
            });

            $('#example1').datetimepicker('setDate', (new Date(2010, 11, 20, 16, 03)));

        });
</script>

Which will set the date correctly but not the time and hour and minute sliders. The time also displays as 00 03 rather than 16 03.

Can anyone tell me what I'm doing wrong or not doing here so that datetimepicker shows correct default settings?

Other settings are:

$('#example1').datetimepicker({                                                    
                        dateFormat: 'dd mm yy',
                        timeFormat: 'hh mm',
                        showMinute: false,
                        showSecond: false,
                        separator: ' ',

                    });

Thanks

Answer 1

I know this issue is old. But for those still looking for a solution here is how I did it. DatetimePicker plugin is an addon to jQueryUI DatePicker, so I think all options and methods of DatePicker still apply in addition to DatetimePicker ones.

So if you have a text box with id "dtp" and you want to initialize it with "5/31/2013 7:30 PM", you will do:

$("#dtp").datetimepicker({
defaultDate: "5/31/2013", // this is from jQueryUI datepicker
hour: 19,
minute: 30
});

This should highlight the correct date in the calendar and set the sliders to the correct hour and minute as defined in the options.

Hope this helps.

Answer 2

If you pre-fill the input field with a date value, datepicker should default to that value.

From a usability standpoint, I would use this approach rather than a more programmatic solution.