javascript - 如何制作引导日期选择按钮

Question

正如标题所说，我想制作一个引导日期选择器，当用户单击按钮时会显示它。我整整 2 天一直在寻找一些教程，但只找到了带有输入的日期选择器的教程。唯一表明它是可能的站点是这个站点。 不幸的是，没有显示它的代码。这就是我在这里的原因。我希望你们能帮助我摆脱我的绝望:)

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 所做的

步骤：在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