Bootstrap datepicker显示月份和年份菜单

4 回答

• 4

  var datePick=$( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
  });
  datePick.click(function (event) {
      event.stopPropagation();
  });
  

  试试这个

  回复于 2024-04-26T02:07:43+08:00
• 2

  在这种情况下，我认为dhtmlxCalender对你来说是一个更好的选择 .

  您的示例代码 -

  var myCalendar = new dhtmlXCalendarObject(["calendar","calendar2","calendar3"]);
  

  #calendar,#calendar2,#calendar3
  {
      border: 1px solid #909090;
      font-family: Tahoma;
      font-size: 12px;
  }
  

  <script src="http://dhtmlx.com/docs/products/codebase/dhtmlx.js"></script>
  <link rel="stylesheet" type="text/css" href="http://dhtmlx.com/docs/products/codebase/dhtmlx.css"/>
  
  <div style="position:relative;height:280px;">
     <input type="text" id="calendar">
     <input type="text" id="calendar2">
     <input type="text" id="calendar3">
  </div>
  

  Codepen.IO示例是given here by me .

  输出将如下 -

  

  此外，这个日期选择器的每个部分都可以轻松定制（CSS） .

  ---

  另一种方法是使用Bootstrap Datepicker-

  $(document).ready(function ()
  {
  	$('#example1').datepicker({
  		format: "dd/mm/yyyy"
  	});  
  
  });
  

  <!--CSS-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <!--JS-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
  
  
  		<div class="container">
  			<input  type="text" placeholder="click to show datepicker"  id="example1">
  		</div>
  

  回复于 2024-04-26T02:07:43+08:00
• 8

  以下是您可能遇到同样问题的链接：Bartosz Kopiński DatePicker

  $('.date').datepicker({
    "format": "yyyy-mm",
    'startView': 1
  }).on('changeMonth', function(e) {
     var dp = $(e.currentTarget).data('datepicker');
     dp.date = e.date;
     dp.setValue();
     dp.hide();
  });
  
  $('.yearpicker').datepicker({
   "format": "yyyy",
   'startView': 2
  }).on('changeYear', function(e) {
    var dp = $(e.currentTarget).data('datepicker');
    dp.date = e.date;
    dp.setValue();
    dp.hide();
  });
  

  回复于 2024-04-26T02:07:43+08:00
• -2

  我认为

  http://www.jqueryscript.net/time-clock/Simple-Date-Picker-for-Bootstrap.html

  这对你有很大的帮助 .

  码-

  脚本

  <script src="js/google-code-prettify/prettify.js"></script>
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap-datepicker.js"></script>
  

  HTML

  <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
  <input class="span2" size="16" type="text" value="12-02-2012" />
  </div>
  

  JS

  $('.datepicker').datepicker()
  

  试试这个 .

  回复于 2024-04-26T02:07:43+08:00