Question

正如标题所说，我想制作一个 bootstrap datepicker ，当用户点击按钮时，它会显示出来。我整整2天都在搜索一些教程，并且只找到了带有输入的datepickers教程。显示可能的唯一网站是this one. 不幸的是，没有显示它的代码。这就是我在这里的原因。我希望你们能帮助我摆脱绝望：）

Answer 1

这是从您上面链接的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());
});

Answer 2

这是我在使用带有Jquery的Ruby On Rails时所做的事情

步骤：在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 ==选择的日期）

这是我得到的输出

Answer 3

您只需要为输入定义标记..

<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

如何制作一个bootstrap datepicker按钮

3 个答案: