最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jquery open calendar to specific month - Stack Overflow

programmeradmin3浏览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 
     }
 });

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 
     }
 });
Share Improve this question edited May 27, 2015 at 18:05 davidkonrad 85.6k17 gold badges209 silver badges271 bronze badges asked May 27, 2015 at 18:00 ChampChamp 531 silver badge8 bronze badges 1
  • Check out his stackoverflow./questions/606463/… – Eric Martinez Commented May 27, 2015 at 18:08
Add a ment  | 

2 Answers 2

Reset to default 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 
     }
});
<!DOCTYPE html>

<head>
  <meta charset="utf-8">
   <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://ajax.googleapis./ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis./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>
发布评论

评论列表(0)

  1. 暂无评论