欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-25 20:50:46
...

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