how to set am/pm format in jquery using datetimepicker

Question

this is my jquery code.eventdatpicker is display date only,but occasionStartTime and occasionEndTime it display 24 hours format only how to change this format to am/pm forma

Answer 1

Set your datatimepicker format value as format: 'hh:mm A'

Working example.

$(function() {
  $('#datetimepicker1').datetimepicker({
      format: 'hh:mm A',
  });
  $('#datetimepicker2').datetimepicker({
      format: 'DD/MM/YYYY hh:mm A',
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <span>Select 12 hour time format</span>
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
        <br/>
        <span>Select 12 hour time format with date</span>
        <div class='input-group date' id='datetimepicker2'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Related answer

Answer 2

MVC Default Dateformat using Bootstrap Datepicker3 - very useful for beginers

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Content/datepicker/moment.js"></script>
<link href="~/Content/datepicker/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="~/Content/datepicker/bootstrap-datetimepicker.js"></script>

    $(function () {
        $('.datetime').datetimepicker({
            format: 'DD-M-YYYY hh:mm A'
        });

    });

</script>