jquery open calendar to specific month

2019-09-10 09:27发布

站内问答 / JavaScript
401 2 5

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 
     }
 });

2条回答
贪生不怕死
2楼-- · 2019-09-10 09:47

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 
     }
});
查看更多
0人赞 添加讨论(0) 举报
成全新的幸福
3楼-- · 2019-09-10 09:50 
<!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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)