Skip to content Skip to sidebar Skip to footer
Home / Calendar / Datepicker / Javascript / Jquery

Jquery Open Calendar To Specific Month

Post a Comment
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 plea

Solution 1:

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: newDate(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: newDate('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: newDate('7/1/2014')
     onSelect: function (date, inst) { 
        //MyLogic 
     }
});

Solution 2: 

<!DOCTYPE html><head><metacharset="utf-8"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><linkrel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"><scriptsrc="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: <inputtype="text"id="datepicker"></p><script>
  $(document).ready(function(){

    $(function() {
        $( "#datepicker" ).datepicker({
          defaultDate: '-2m'
      });
  });
    });

</script></body></html>

Post a Comment for "Jquery Open Calendar To Specific Month"