首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >引导日期选择器显示月份和年份菜单

引导日期选择器显示月份和年份菜单
EN

Stack Overflow用户
提问于 2014-12-30 15:48:33
回答 4查看 8.8K关注 0票数 13

在Bootstrap datepicker中,我希望使用jquery Ui datepicker中的月份和年份菜单

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

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

EN

回答 4

Stack Overflow用户

发布于 2016-02-26 22:53:11

代码语言:javascript
复制
var datePick=$( "#datepicker" ).datepicker({
    changeMonth: true,
    changeYear: true
});
datePick.click(function (event) {
    event.stopPropagation();
});

尝尝这个

票数 8
EN

Stack Overflow用户

发布于 2016-02-28 19:11:43

我认为在这种情况下,dhtmlxCalender对您来说是一个更好的选择。

下面是一个示例代码:

代码语言:javascript
复制
var myCalendar = new dhtmlXCalendarObject(["calendar","calendar2","calendar3"]);
代码语言:javascript
复制
#calendar,#calendar2,#calendar3
{
    border: 1px solid #909090;
    font-family: Tahoma;
    font-size: 12px;
}
代码语言:javascript
复制
<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的例子。

输出将如下所示-

此外,这个日期选择器的每个部分都很容易定制(CSS)。

另一种方法是使用Bootstrap Datepicker-

代码语言:javascript
复制
$(document).ready(function ()
{
	$('#example1').datepicker({
		format: "dd/mm/yyyy"
	});  

});
代码语言:javascript
复制
<!--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>

票数 4
EN

Stack Overflow用户

发布于 2016-03-02 16:17:43

这里有一个你可能会遇到同样问题的链接:Bartosz Kopiński DatePicker

代码语言:javascript
复制
$('.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();
});
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27701523

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档