Set default date for bootstrap datepicker

Question

I am trying to open the bootstrap datepicker on the date stored in the var startDate .

The code below is not working as the default date format for the datepicker is mm/dd/yy. startDate is in the format dd/mm/yy.

<script type="text/javascript" >
    function toggle_dp() {
        $("#myModal").modal("show");
        $("#datepicker").datepicker({
          dateFormat: 'dd/mm/yy',
          changeMonth: true,
          changeYear: true,
          defaultDate: new Date('{{ startDate }}')
        });
        $("#datepicker").datepicker( "option", "dateFormat", "dd-mm-yy" );
    }
</script>

For example, if the startDate is 05/03/2018 (5th March), the datepicker will open with default date 03/05/2018 (3rd May).

Answer 1

Use formate: instead of dateFormat:

<script type="text/javascript" >
    function toggle_dp() {
        $("#myModal").modal("show");
        $("#datepicker").datepicker({
          format: 'dd/mm/yy',
          changeMonth: true,
          changeYear: true,
          defaultDate: new Date(toMMDDYYYY(startDate))
        });

    }

function toMMDDYYYY(date) {
            var datePart = date.split("/");
            var MMDDYYYY = [datePart[1], datePart[0],datePart[2]].join('/');
            return MMDDYYYY
        }
</script>

Answer 2

You have written the wrong syntax for format . Just replace dateFormat with format in your script code like below

More help on Bootstrap Date-picker Format

<script type="text/javascript">
  function toggle_dp() {
    $("#myModal").modal("show");
    $("#datepicker").datepicker({
      format: 'dd/mm/yy',
      changeMonth: true,
      changeYear: true,
      defaultDate: new Date('{{ startDate }}')
    });
    $("#datepicker").datepicker("option", "format", "dd-mm-yy");
  }
</script>