5

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

Mr Morgan
  • 721
  • 2
  • 7
  • 7

5 Answers5

4

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.

mosabusan
  • 41
  • 4
1

if you are talking about datetimepicker from Trent Richardson, have a look at this thread https://stackoverflow.com/a/12645192/551811

In my experience, even when you have a date prefilled in the textbox, if you want to close the datepicker dialog without entering a date, it replaces the value in the textbox with today's. The solution is to set your textbox value in the onClose method. In this example, value will contain your original value:

   $('input.datetime').datetimepicker({
            onClose: function (value) {
                            $('input.datetime').val(value);
                        }
         });
Community
  • 1
  • 1
BraveNewMath
  • 8,090
  • 5
  • 46
  • 51
1

I hope this will help to set the value for datetimepicker.

$("#dateOfEnrollment").find("input").val('22-12-2020');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group date" id="dateOfEnrollment" data-target-input="nearest">
  <input type="text" class="form-control datetimepicker-input" data-target="#dateOfEnrollment" placeholder="Date Of Enrollment..">
  <div class="input-group-append" data-target="#dateOfEnrollment" data-toggle="datetimepicker">
    <div class="input-group-text"> <i class="fa fa-calendar"> </i>
    </div>
  </div>
</div>
Darshan Jain
  • 781
  • 9
  • 19
1

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.

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
0

The issue is to do with the customisations of the date and time formats you are using. If you restore the original settings, the display of datetimepicker should be correct.

Mr Morgan
  • 307
  • 3
  • 5
  • 13