Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery Timepicker set initial time

I am using jquery timepicker
I need set the initial time.

let pickip_time = "08:31"
        if(pickip_time){
            pickup_array = pickip_time.split(":");
            $('#pickupTime').timepicker({timeFormat:'HH:mm TT',hour:pickup_array[0],minute:pickup_array[1]});
            //$('#pickupTime').val(pickip_time);
        } else {
            $('#pickupTime').timepicker({timeFormat:'HH:mm TT'});
        }

Above code does not work. I even tried with below code it is not working

$('#pickupTime').timepicker({timeFormat:'HH:mm TT',startTime:pickip_time});
Tags:

2

Answers


  1. 0

    The startTime property is not intended to set initial value, as documentation says it is:

    A Date object or string. The time of the first item in the combobox
    when the input field is empty. If the input field is not empty the
    first item will be the next allowed time entry.

    AFAIK the correct way to set initial time on this object is after init, with setTime action:

    // Define initial time
let pickip_time = "08:31";

// Init timepicker
$('#pickupTime').timepicker({
    timeFormat: 'HH:mm TT'
});

// Set time
$('#pickupTime').timepicker('setTime', pickip_time);
    Login or Signup to reply.
  2. 0

    Praveen – piece of code you’ve shared seems to be working fine, I am using the same piece of code which you have shared in this snippet and it works fine. Please try.

    Please check if you are using correct version of jQuery libraries or not or you might be facing a conflict. If you could share a screenshot of error you’re seeing in console then that would help.

    I hope you get the solution.

            $(function() {
            let pickip_time = "08:31"
            if(pickip_time){
                pickup_array = pickip_time.split(":");
                $('#pickupTime').timepicker({timeFormat:'HH:mm TT',hour:pickup_array[0],minute:pickup_array[1]});
                //$('#pickupTime').val(pickip_time);
            } else {
                $('#pickupTime').timepicker({timeFormat:'HH:mm TT'});
            }
        });
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery UI Timepicker Addon</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
</head>
<body>
    <input type="text" id="pickupTime">
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search