On click of textbox, a calendar opens with current month. I want to open the calendar to specific date.Currently, the calendar opens opens to current month view. Can some one please help me with this? Thanks!
Select Date: <input type="text" id="datepicker"/>
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
onSelect: function (date, inst) {
//MyLogic
}
});
You can use the defaultDate option to open to a specific date. Let's assume you want it to open to July 1st, 2014:
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
defaultDate: new Date(2014, 6, 1)
onSelect: function (date, inst) {
//MyLogic
}
});
The format for date is year/month/day. Note: for the month, it is month - 1. So January (1st month) would be 0 and February (2nd month) would be 1.
Alternatively, you can also specify the same date like so:
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
defaultDate: new Date('1 July 2014')
onSelect: function (date, inst) {
//MyLogic
}
});
You can also define the defaultDate like so:
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
defaultDate: new Date('7/1/2014')
onSelect: function (date, inst) {
//MyLogic
}
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<script>
$(document).ready(function(){
$(function() {
$( "#datepicker" ).datepicker({
defaultDate: '-2m'
});
});
});
</script>
</body>
</html>
