0

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 
     }
 });
davidkonrad
  • 83,997
  • 17
  • 205
  • 265
Champ
  • 53
  • 1
  • 8

2 Answers2

5

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 
     }
});
Alex Pan
  • 4,341
  • 8
  • 34
  • 45
  • Yes... $('#datepicker').datepicker({ dateFormat: 'mm-dd-yy', beforeShowDay: enableAllTheseDays, defaultDate: new Date(startDate), onSelect: function (date, inst) { //MyLogic } }); – Champ May 28 '15 at 19:35
0
<!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>
Ritesh Karwa
  • 2,196
  • 1
  • 13
  • 17
  • defaultDate: '-2m' opens the the calendar 2 months in past. What I want is to open the calendar to a particular month. For instance, currently we are in May.. I want to open the calendar to August view on the fly. Please let me know how can I do this. Thanks! – Champ May 27 '15 at 18:31
  • I got this... following code worked defaultDate: new Date(startDate) – Champ May 27 '15 at 18:36
  • you can do + or - to go go back and forward – Ritesh Karwa May 27 '15 at 18:43