Search code examples
jquerydatetimedatetimepickerdatetime-formatjquerydatetimepicker

How to set datetime format in jquery datetimepicker?


I need to set a datetimepicker in the specific format dd/mm/yyyy hh:mm tt for example 13/03/2024 2.30 PM. But, I am getting 13/03/2024 14.30. I also can not set the minutes. It only shows the hours like 11.00, 12.00 and so on.

I tried in this way. cdn links

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" integrity="sha512-bYPO5jmStZ9WI2602V2zaivdAnbAhtfzmxnEGh9RwtlI00I9s8ulGe4oBa5XxiC6tCITJH/QG70jswBhbLkxPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

html

<input type='text' id='txtDateTimePicker' />

javascript

$(function () {
    $('#txtDateTimePicker').datetimepicker({
        format: 'd/m/Y h:m tt',
        value: new Date()
    });  
});

Solution

  • Try This

    $(function () {
        $('#txtDateTimePicker').datetimepicker({
          format: 'd/m/Y h:i A',
          formatTime: 'h:i A',
          step: 15,  // Set the minute step to 15 minutes
          value: new Date()
        });
    });