divyakrishnan 20 Junior Poster

Hi..
I setting start date and end date in my php page using javascript with following options.

Start date options

mindate-today
maxdate-end date(after selecting end date)

End date options

min date - start date

Its working correctly.But I want to change the date format from yy-mm-dd to dd-mm-yy.
I changed it using

    dateFormat: 'yy-mm-dd',

to

    dateFormat: 'dd-mm-yy',

That time the mindate & maxdate options are not working.

This is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<?php /*?><script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css" /><?php */?>
<script language="javascript" type="text/javascript">

$(document).ready(function() {
    activateDatePickers();
});

function activateDatePickers() {

    $("#promo_start_date").val('');
    $("#promo_end_date").val('');

    $("#promo_start_date").datepicker({
        changeYear: true,
        minDate: '0',
        dateFormat: 'yy-mm-dd',
        onSelect: function() {
            $("#promo_end_date").datepicker(
                    "change",
                    { minDate: new Date($('#promo_start_date').val()) }
            );
            //$("#btnClear").show();
        }
    });
    $("#promo_end_date").datepicker({
        changeYear: true,
        dateFormat: 'yy-mm-dd',
        onSelect: function() {
            $("#promo_start_date").datepicker(
                    "change",
                    { maxDate: new Date($('#promo_end_date').val()) }
            );
            //$("#btnClear").show();
        }
    });

}

</script>

</head>

<body>
          <form class="form-horizontal" role="form" name="add_promo" id="add_promo" action=""  method="post" autocomplete="off">

            <div class="form-group">
              <label class="control-label col-sm-2" for="email">Start Date *</label>
              <div class="col-sm-7">
                <input type="text" class="form-control" id="promo_start_date" name="promo_start_date" placeholder="Select Start Date">
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2" for="address">End Date *</label>
              <div class="col-sm-7">
               <input type="text" class="form-control" id="promo_end_date" name="promo_end_date" placeholder="Select End Date">
              </div>
            </div>

            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary" name="promo_submit">Submit</button>
                <button type="reset" class="btn btn-default">Clear</button>
              </div>
            </div>
          </form>

</body>
</html>