Date Pickers

to

HTML代码

<!--默认-->
<input id="picker1" class="form-control form-control-inline input-medium date-picker" size="16" type="text" value=""/>

<!--带图标-->
<div id="picker2" class="input-group input-medium date date-picker">
    <input type="text" class="form-control" readonly>
    <span class="input-group-btn">
        <button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
    </span>
</div>

<!--时间范围-->
<div id="picker3" class="input-group input-large date-picker input-daterange">
    <input type="text" class="form-control" name="from">
    <span class="input-group-addon">to</span>
    <input type="text" class="form-control" name="to">
</div>

Javascript代码

$p.datePicker('#picker1', {
    defaultDate: moment(),
}, function(date) {
    $p.alert(date);
});

$p.datePicker('#picker2', {
    defaultDate: moment(),
}, function(date) {
    $p.alert(date);
});

$p.datePicker('#picker3', {
    defaultDate: [moment().subtract('days', 6), moment()],
}, function(date) {
    $p.alert(date);
});

更多实例

http://bootstrap-datepicker.readthedocs.org/en/latest/index.html