twitter-bootstrap 如何制作引导日期选择按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19668026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make a bootstrap datepick button
提问by Julius ShadowAspect Flimmel
as the title says, I want to make a bootstrap datepickerwhich will show up when a user clicks on a button. I have been searching for some tutorial for whole 2 days and found only tutorials for datepickers with input. The only site which shows that it is possibe is this one.Unfortunately there is not shown the code for it. That is why I am here. I hope you guys can help me from my desperation :)
正如标题所说，我想制作一个引导日期选择器，它会在用户单击按钮时显示。我一直在寻找一些教程整整 2 天，但只找到了带输入的日期选择器的教程。唯一表明它是可能的站点是这个站点。不幸的是，没有显示它的代码。这就是我在这里的原因。我希望你们能帮助我摆脱绝望:)
回答by Hannes Obweger
This is extracted from the Bootstrap Datepickerwebsite you linked above, and adapted to use a button instead of a button-like link-element: http://jsfiddle.net/VchBF/
这是从您上面链接的Bootstrap Datepicker网站中提取的，并适用于使用按钮而不是类似按钮的链接元素：http: //jsfiddle.net/VchBF/
HTML:
HTML：
<button class="btn small" id="button" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Your Date Picker</button>
JS:
JS：
$('#button').datepicker()
.on('changeDate', function(ev){
$('#button').datepicker('hide');
alert(ev.date.valueOf());
});
回答by Huzaifa Saifuddin
This is What I did With Jquery
这就是我用 Jquery 所做的
Steps : In html file paste this
步骤：在html文件中粘贴这个
<input type="text" id="your-datepicker-id" style="display: none;">
In JS file paste this
在JS文件中粘贴这个
$('#your-datepicker-id').datepicker({
dateFormat: "dd/mm/yy",
showOn: "button",
buttonText: '<i class="fa fa-calendar"></i>'
})
Output Will Be A Button
输出将是一个按钮
<button type="button" class="ui-datepicker-trigger"><i class="fa fa-calendar"></i></button>
Extras :
附加：
You Can Add bootstrap Classes as
您可以将引导类添加为
$(".ui-datepicker-trigger").addClass("btn btn-success")
You Can also do ajax calls as
你也可以做 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
})
}
})
Note: (dateText == Date Which is Selected)
注意：（dateText == Date which is selected）
This is the output i Got
这是我得到的输出
回答by Zim
You just need to define the markup for your input..
您只需要为您的输入定义标记..
<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>
And then use jQuery to use the datetime picker on the input..
然后使用 jQuery 在输入上使用日期时间选择器..
$('#myDate').datepicker();
Here's a working example: http://bootply.com/86820
这是一个工作示例：http: //bootply.com/86820
