Does bootstrap have a calendar control?-Bootstrap Tutorial-php.cn

bootstrap has a calendar control, a time and date calendar control, named "datetimepicker". It is a Bootstrap component that can simplify the input of date and time on the page. The datetimepicker control supports date selection and format setting, and supports time period selection control. You only need to use script and link tags to introduce relevant files on the required page to use it.

Does bootstrap have a calendar control?

#The operating environment of this article: Windows7 system, bootstrap3, Dell G3 computer.

Does bootstrap have a calendar control?

bootstrap has a time and date calendar control, named datetimepicker, which is a Bootstrap component that can simplify the input of date and time on the page.

Usage of Bootstrap datetimepicker control

1. Support date selection and format setting

2. Support time selection

3. Support time period selection control

4. Support Chinese

Involved styles and js:

Copy after login

Let’s go directly to the example.

   选择日期：       
 
 
   选择日期+时间：       
 
 
 
 $(function () { $('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn') }); $('#datetimepicker2').datetimepicker({ format: 'YYYY-MM-DD hh:mm', locale: moment.locale('zh-cn') }); }); /*4.17版本一些可能用得到的方法参数*/ /* showClose:true//是否显示关闭 按钮 /*viewMode: 'days',//天数模块展示，months则为以月展示 daysOfWeekDisabled: false,//星期几 禁止选择,参数 [num],多个逗号隔开 calendarWeeks: false,//显示 周 是 今年第几周 toolbarPlacement:'default', //工具摆放的位置，top 则为上，默认为底 showTodayButton:false,//是否工具栏 显示 直达今天天数的 按钮，默认false showClear:false, //是否 工具栏显示 清空 输入框 的按钮。默认false */

Copy after login

Screenshot:

Does bootstrap have a calendar control?

## Example of starting time:

   选择开始时间：       
 
 
   选择结束时间：       
 
 
 
 $(function () { var picker1 = $('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn'), //minDate: '2016-7-1' }); var picker2 = $('#datetimepicker2').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn') }); //动态设置最小值 picker1.on('dp.change', function (e) { picker2.data('DateTimePicker').minDate(e.date); }); //动态设置最大值 picker2.on('dp.change', function (e) { picker1.data('DateTimePicker').maxDate(e.date); }); });

Copy after login

Screenshot:

Does bootstrap have a calendar control?

During initialization, use defaultDate to specify the default time:

$('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn'), defaultDate: "1990-1-1" });

Copy after login

Of course, you can also use JS code to control the default value of the input box.

Specific example:

     datetimpicker测试        
      选择日期：       
 
 
   选择日期+时间：

Copy after login

Does bootstrap have a calendar control?

Recommended: "

bootstrap tutorial"

The above is the detailed content of Does bootstrap have a calendar control?. For more information, please follow other related articles on the PHP Chinese website!