【笔记】BootstrapDatepicker学习笔记

发表于 更新于 阅读次数：

前言

Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style.（官网）

通过uxsolutions/bootstrap-datepicker实现日期选择器

引入依赖

1
2
3
4
5
6
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-datepicker@1/css/bootstrap-datepicker3.min.css">

<script src="https://unpkg.com/jquery@3/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/bootstrap-datepicker@1/dist/js/bootstrap-datepicker.min.js"></script>
<script src="https://unpkg.com/bootstrap-datepicker@1/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>

初始化

data-date-format="yyyy-mm-dd hh:ii"：指定日期格式化
value="2006-01-02 15:04"：指定默认值

1
2
3
4
5
<input type="text" id="app">

<script>
  $("#app").datepicker();
</script>

指定配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 初始化时添加配置
$("#app").datepicker({
  // 设置语言
  language: "zh-CN",
  // 是否选择后自动关闭
  autoclose: true,
  // 是否显示清除按钮
  clearBtn: true,
  // 指定日期格式
  format: "yyyy-mm-dd",
  // 指定允许选择的最早时间
  startDate: "",
  // 指定允许选择的最晚时间
  endDate: ""
  // 指定允许选择的最晚时间为当前时间
  //endDate: new Date()
});

内置函数

销毁日期选择器

1
$("#app").datepicker("destroy");
1
$("#app").datepicker("remove");

显示日期选择器

1
$("#app").datepicker("show");

隐藏日期选择器

1
$("#app").datepicker("hide");

更新日期选择器

将文本框内的日期更新到日期选择器

1
$("#app").datepicker("update");

指定更新的日期

1
2
3
4
5
$("#app").datepicker("update", "2006-01-02");
$("#app").datepicker("update", "2006-01-02", "2006-01-02");

$("#app").datepicker("update", new Date(2006, 01, 02));
$("#app").datepicker("update", [new Date(2006, 01, 02), new Date(2006, 01, 02)]);

重置日期选择器

1
$("#app").datepicker("update", " ");

绑定事件

日期选择器显示

1
2
3
$("#app").datepicker().on("show", function (e){
  ...
});

日期选择器隐藏

日期改变事件

1
2
3
$("#app").datepicker().on("hide", function (e){
  ...
});

日期改变事件

1
2
3
$("#app").datepicker().on("changeDate", function (e){
  console.log(e.date.valueOf());
});

年视图被改变

1
2
3
$("#app").datepicker().on("changeYear", function (e){
  ...
});

月视图被改变

1
2
3
$("#app").datepicker().on("changeMonth", function (e){
  ...
});

设置日期区间选择器

1
2
3
4
5
6
7
8
9
10
11
<input type="text" id="startTime">
<input type="text" id="endTime">

<script>
  $("#startTime").datepicker().on("change", function (e){
    $("#endTime").datepicker("setStartDate", $("#startTime").val());
  });
  $("#endTime").datepicker().on("change", function (e){
    $("#startTime").datepicker("setEndDate", $("#endTime").val());
  });
</script>

完成

参考文献

bootstrap-timepicker官方文档
bootstrap-datetimepicker官网
IT小书童——bootstrap-datepicker中文文档
CSDN——Tessa_zzl