【英文】BootstrapDatepicker学习笔记

Posted on Edited on Views:

Preface

Adding a date picker using BootstrapDatepicker

Preparation

Import dependencies

1
2
3
4
5
6
7
8
9
10
<link rel="stylesheet" href="dist/css/bootstrap.css">
<link rel="stylesheet" href="dist/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="dist/css/bootstrap-datepicker.standalone.css">

<script src="dist/js/jquery.js"></script>

<script src="dist/js/bootstrap.js"></script>
<script src="dist/js/bootstrap.bundle.js"></script>
<script src="dist/js/bootstrap-datepicker.js"></script>
<script src="dist/js/bootstrap-datepicker.zh-CN.min.js"></script>

Generate date picker in HTML

  • Convert a regular text box in HTML to a text box that supports date picker

data-date-format="yyyy-mm-dd hh:ii": Directly specify the date format
value="2012-12-12 12:12": Specify the default value

1
<input type="text" id="time">

Initialize date picker in JS

1
$('#time').datepicker();

Add default configuration during initialization

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Add configuration during initialization
$('#time').datepicker({
  // Set language
  language: 'zh-CN',
  // Close automatically after selecting a date
  autoclose: true,
  // Show clear button
  clearBtn: true,
  // Specify date format
  format: "yyyy-mm-dd",
  // Specify the earliest selectable time
  startDate: "",
  // Specify the latest selectable time
  endDate: ""
  // Specify the latest selectable time as the current time
  //endDate: new Date()
});

Built-in functions

Destroy date picker

1
2
3
$('#time').datepicker('destroy');

$('#time').datepicker('remove');

Show date picker

1
$('#time').datepicker('show');

Hide date picker

1
$('#time').datepicker('hide');

Update date picker

Update the date in the text box to the date picker

1
$('#time').datepicker('update');

Specify the updated date

1
2
3
4
5
$('#time').datepicker('update', '2012-12-12');
$('#time').datepicker('update', '2012-12-12', '2012-12-12');

$('#time').datepicker('update', new Date(2012, 12, 12));
$('#time').datepicker('update', [new Date(2012, 12, 12), new Date(2012, 12, 12)]);

Reset the date picker

1
$('#time').datepicker('update', ' ');

Bind events

Date picker is displayed

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

Date picker is hidden

Date change event

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

Date change event

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

Year view is changed

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

Month view is changed

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

Set date range selector

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>

Completion

References

bootstrap-timepicker official documentation
bootstrap-datetimepicker official website
IT Xiaoshutong - bootstrap-datepicker Chinese documentation
CSDN - Tessa_zzl