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>