正如标题所说,我想制作一个引导日期选择器,当用户单击按钮时会显示它。我整整 2 天一直在寻找一些教程,但只找到了带有输入的日期选择器的教程。唯一表明它是可能的站点是这个站点。 不幸的是,没有显示它的代码。这就是我在这里的原因。我希望你们能帮助我摆脱我的绝望:)
问问题
22477 次
3 回答
6
这是从您上面链接的Bootstrap Datepicker网站中提取的,并适用于使用按钮而不是类似按钮的链接元素:http: //jsfiddle.net/VchBF/
HTML:
<button class="btn small" id="button" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Your Date Picker</button>
JS:
$('#button').datepicker()
.on('changeDate', function(ev){
$('#button').datepicker('hide');
alert(ev.date.valueOf());
});
于 2013-10-29T20:08:32.293 回答
1
这就是我对 Jquery 所做的
步骤:在html文件中粘贴这个
<input type="text" id="your-datepicker-id" style="display: none;">
在 JS 文件中粘贴这个
$('#your-datepicker-id').datepicker({
dateFormat: "dd/mm/yy",
showOn: "button",
buttonText: '<i class="fa fa-calendar"></i>'
})
输出将是一个按钮
<button type="button" class="ui-datepicker-trigger"><i class="fa fa-calendar"></i></button>
附加功能:
您可以将引导类添加为
$(".ui-datepicker-trigger").addClass("btn btn-success")
你也可以做 ajax 调用
$('#your-datepicker-id').datepicker({
dateFormat: "dd/mm/yy",
showOn: "button",
buttonText: '<i class="fa fa-calendar"></i>',
onSelect: function (dateText) {
jQuery.ajax({
type: "GET",
dataType: "script",
url: your_url
})
}
})
注意:(dateText == 选择的日期)
这是我得到的输出
于 2016-07-08T07:08:35.793 回答
0
您只需要为您的输入定义标记..
<div class="container">
<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" id="myDate">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
然后使用jQuery在输入上使用日期时间选择器..
$('#myDate').datepicker();
这是一个工作示例:http ://bootply.com/86820
于 2013-10-29T20:19:17.147 回答