Sometimes, we want to format dates in jQuery datetimepicker.

In this article, we’ll look at how to format dates in jQuery datetimepicker.

Format Dates in jQuery datetimepicker

To format dates in jQuery datetimepicker, we can set the format property in the object that we pass into the datetimepicker method.

For instance, we write:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />

<input id="timePicker">

to add the script and link tags for jQuery and jQuery datetimepicker.

Then we add the input element we use for the date time picker.

Next, we write:

$('#timePicker').datetimepicker({
  format: 'd-m-Y',
  minDate: new Date()
});

to select the input element with $.

And then we call datetimepicker on that with an object that sets the format property to 'd-m-Y' so that the selected date with show in DD-MM-YYYY format in the input.

Conclusion

To format dates in jQuery datetimepicker, we can set the format property in the object that we pass into the datetimepicker method.