选择月份后隐藏日期选择器
Hide datepicker after selecting month
使用Datepicker进行引导我想将视图模式限制为月份,这很好,但我想在选择月份时隐藏下拉列表。
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/datepicker.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
$(function(){
$('#dp3').datepicker()
});
HTML
<div class="col-xs-6">
<div class="input-append date input-group" id="dp3" data-date="102/2012" data-date-format="mm/yyyy" data-date-viewmode="years" data-date-minviewmode="months">
<input class="span2 form-control" size="16" type="text" value="02/2012">
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</div>
这是http://jsfiddle.net/ded3v/6/
您可以捕获点击事件:
document.addEventListener("click", function(e){
if($(e.target).is('.month')) $(e.target).closest('.datepicker.dropdown-menu').hide();
}, true);
DEMO捕获
插件停止了在.month元素上的点击传播,你不能委托点击事件,你仍然可以使用以下代码(委托dblclick事件)来关闭dblclic上的日期选择器(我建议你使用这种方法来获得更好的UI体验!):
$(document).on('dblclick','.month',function(){
$(this).closest('.datepicker.dropdown-menu').hide();
});
演示数据库点击
将日期选择器Js下载到本地服务器,并将点击功能替换为以下功能:
click: function(e) {
e.stopPropagation();
e.preventDefault();
var target = $(e.target).closest('span, td, th');
if (target.length === 1) {
switch(target[0].nodeName.toLowerCase()) {
case 'th':
switch(target[0].className) {
case 'switch':
this.showMode(1);
break;
case 'prev':
case 'next':
this.viewDate['set'+DPGlobal.modes[this.viewMode].navFnc].call(
this.viewDate,
this.viewDate['get'+DPGlobal.modes[this.viewMode].navFnc].call(this.viewDate) +
DPGlobal.modes[this.viewMode].navStep * (target[0].className === 'prev' ? -1 : 1)
);
this.fill();
this.set();
break;
}
break;
case 'span':
if (target.is('.month')) {
var month = target.parent().find('span').index(target);
this.viewDate.setMonth(month);
this.element.trigger({type: 'monthSelected', month: month});
} else {
var year = parseInt(target.text(), 10)||0;
this.viewDate.setFullYear(year);
}
if (this.viewMode !== 0) {
this.date = new Date(this.viewDate);
this.element.trigger({
type: 'changeDate',
date: this.date,
viewMode: DPGlobal.modes[this.viewMode].clsName
});
}
this.showMode(-1);
this.fill();
this.set();
break;
case 'td':
if (target.is('.day') && !target.is('.disabled')){
var day = parseInt(target.text(), 10)||1;
var month = this.viewDate.getMonth();
if (target.is('.old')) {
month -= 1;
} else if (target.is('.new')) {
month += 1;
}
var year = this.viewDate.getFullYear();
this.date = new Date(year, month, day,0,0,0,0);
this.viewDate = new Date(year, month, Math.min(28, day),0,0,0,0);
this.fill();
this.set();
this.element.trigger({
type: 'changeDate',
date: this.date,
viewMode: DPGlobal.modes[this.viewMode].clsName
});
}
break;
}
}
},
我刚刚添加了一个"monthSelected"事件,所以你只需要编辑你的Js就可以为这个事件附加一个处理程序:
$(function(){
$('#dp3').datepicker().on('monthSelected', function(ev){
$(this).datepicker('hide');
alert("Month number : "+ev.month);
});
});
相关文章:
- jquery日期选择器年份范围默认值
- jquery日期选择器失去了交互性
- 正在搜索JavaScript日期选择器滑块
- 如何在多个jQueryUI日期选择器中屏蔽特定日期
- jquery日期选择器显示与值不同的文本
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- Angular UI启动日期选择器问题
- 奇怪的日期选择器行为,与模糊有关
- 我希望这个日期选择器可以从1990年到2000年之间的年份中选择日期
- keith wood日期选择器日期格式和语言
- 在日期更改后更新Angular UI引导程序日期选择器选项
- Jquery UI日期选择器不关注输入
- Javascript两个日期选择器冲突
- 动态添加的标记不会'无法正确使用日期选择器
- 日期选择器无法使用javascript显示
- AngularJS自定义日期选择器指令
- 他们网站上的代码出现启动日期选择器错误
- 从第一个日期选择器定义第二个日期选择器的开始日期
- 更改日期选择器格式
- 带有推特助推器的日期选择器出现了,但没有't更改日期