关于bootstrap的datepicker在meteor应用中的使用（不包含bootstrap框架）

1、安装bootstrap3-datepicker包

meteor add rajit:bootstrap3-datepicker

2、使用方法

Example

In your handlebars template:

<input type="text" class="form-control" id="my-datepicker">

In client-side JS code:

Template.mytemplate.rendered=function() {

$(‘#my-datepicker‘).datepicker();

}

3、当我们点击日期控件填写日期时，bootstrap-datepicker.js帮我们动态生成了class为datepicker dropdown-menu的div，其中包括日期控件中的由年月日等构成的div，而dropdown-menu样式是在bootstrap.css中定义的，其样式为：

.input-group.date .input-group-addon i {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.datepicker.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    color: #333333;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.428571429;
}

.datepicker.dropdown-menu th, .datepicker.dropdown-menu td {
    padding: 4px 5px;
}

　　由于没有使用bootstrap框架，因此需在应用的css文件中包含以上样式定义，其中的定义需依据使用的样式进行适配调整。

4、中文包

meteor add rajit:bootstrap3-datepicker-zh-cn

5、range用法

html：

<div class="input-daterange input-group" id="datepicker">
    <input type="text" class="input-sm form-control" name="start" />
    <span class="input-group-addon">to</span>
    <input type="text" class="input-sm form-control" name="end" />
</div>

　js：

$(‘#sandbox-container .input-daterange‘).datepicker({
    language: "zh-CN",
    orientation: "auto right",
    autoclose: true
});

　　详见：http://eternicode.github.io/bootstrap-datepicker