Bootstrap 日期选择器显示月份和年份菜单

Posted 2023-05-07

【中文标题】Bootstrap 日期选择器显示月份和年份菜单

【英文标题】：Bootstrap datepicker display month & year menus

【发布时间】：2015-02-26 09:16:15

【问题描述】：

在 Bootstrap 日期选择器中，我希望在 jquery Ui datepicker 中使用月份和年份菜单

但在Bootstrap date picker 中，没有月份和年份菜单，我们必须点击月份才能更改年份。

是否可以在Bootstrap date picker 中同时显示月份和年份菜单？

【问题讨论】：

我会问显而易见的。为什么不直接使用 jQuery 日期选择器？它就像你想要的那样工作。

【参考方案1】：

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

试试这个

【参考方案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>

【讨论】：

你好，如果你觉得这个答案有帮助，请采纳，这样你和我都能加分

【参考方案3】：

这里是您可能遇到相同问题的链接：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();
);

【参考方案4】：

我认为

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()

试试这个。