Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mstdmstd's avatar

Making bootstrap datetimepicker to select only time got Invalid date format error

Hello, In laravel 6, Bootstrap / Jquery app I want to make bootstrap-datetimepicker with time only selection as in this https://eonasdan.github.io/bootstrap-datetimepicker/#time-only example

and with blade code :

                <div class="form-group row">
                    <label class="col-form-label col-md-6">Time<small>(utc) </small></label>
                    <div class="col-md-6">
                        <div class="input-group date" id="time_utc">
                            <input type="text" class="form-control"/>
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-time"></span>
                            </span>
                        </div>
                    </div>
                </div>

I open modal with several fields and datetimepicker, which I want to show only as time picker (as in link above):

  $('#add_noon_report').on('click', function () {
    $('#add_noon_report_lat').val('')
    $('#add_noon_report_lng').val('')
    $('#add_noon_report_lat_degrees').val('')
    ...
    $('#datereported_utc').val('')
    $('#time_utc').val('6:20')  // I TRIED DIFFERENT FORMAT OF DEFAULT VALUE - BUT EMPTY PREDERABLE
    // $('#time_utc').val('6:20 PM')
    // $('#time_utc').val(null)



    $('#add-noon-report-modal').modal('toggle')
    $('#datereported_utc').datetimepicker({
      todayHighlight: true,
      autoclose: true,
      format: 'yyyy-mm-dd hh:ii'
    }).on('change', function () {
    })

    $('#time_utc').datetimepicker({
      format: 'LT'
    });

  }); // $('#add_noon_report').on('click', function () {

But I got error in console :

app.js:10140 Uncaught Error: Invalid date format.
    at Object.parseFormat (app.js:10140)
    at new Datetimepicker (app.js:8655)
    at HTMLDivElement.<anonymous> (app.js:10043)
    at Function.each (app.js:69700)
    at jQuery.fn.init.each (app.js:69535)
    at jQuery.fn.init.$.fn.datetimepicker (app.js:10038)
    at HTMLButtonElement.<anonymous> (trip-details.js:1078)
    at HTMLButtonElement.dispatch (app.js:74570)
    at HTMLButtonElement.elemData.handle (app.js:74377)

In package.json I have :

        "jquery": "^3.3.1",
        "jquery-form": "^4.2.2",
        "jquery-ui": "^1.12.1",
        "jquery-validation": "1.19.0",


        "bootstrap": "^4.4.1",
        "bootstrap-datepicker": "^1.8.0",
        "bootstrap-daterangepicker": "^3.0.3",
        "bootstrap-datetime-picker": "^2.4.4",
        "bootstrap-datetimepicker": "^0.0.7",

Any ideas how to fix this error ?

0 likes
4 replies
bobbybouwmann's avatar

Which datetime picker are you using? You included 4 packages here... You should pick one of the packages and remove the others.

Depending on the package, the format can be different as well. If you decided which one to use you can also find the documentation for that correct format.

mstdmstd's avatar

But which to leave? Which one is correct ?

Please or to participate in this conversation.