What is the usage of bootstrap-datepicker

In bootstrap, "bootstrap-datepicker" is used to set calendar and time styles. It is a time selection plug-in. The syntax is "element object.datepicker({attribute: attribute value,...})" ;The time display style can be set through different attributes.

The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer

What is the usage of bootstrap-datepicker

bootstrap-datepicker is a time selection plug-in, but the default displayed text format is English, so the Chinese package must be introduced first

<script type="text/javascript" src="bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src=&#39;bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js&#39;></script>
<script>

A brief introduction to some basic properties of bootstrap-datepicker

$(function(){
         $('#datetimepicker').datetimepicker({
           language:"zh-CN",    //语言选择中文
           format:"yyyy-mm",    //格式化日期
           timepicker:true,     //关闭时间选项
           yearEnd:2050,        //设置最大年份
           todayButton:false    //关闭选择今天按钮
           autoclose: 1,        //选择完日期后，弹出框自动关闭
           startView:3,         //打开弹出框时，显示到什么格式,3代表月
           minView: 3,          //能选择到的最小日期格式
    });

Give two simple cases

Only display the year and month

$('#datetimepicker').datetimepicker({
         language:"zh-CN",
         format:'yyyy-mm',
         autoclose: 1,
         startView:3, 
         minView: 3,
       });

Display the year, month and day

            language:  'zh-CN',  
            minView:2,
            autoclose: 1,
            startView:3, 
            format:'yyyy-mm-dd',

Note: There may be a problem with the style of the calendar selection

There are no button images on the left and right sides

This should be a bootstrap version problem , it will be displayed in version 2, but will not be displayed in version 3. At this time, adding the form-control class name to the input can solve the problem

Option example:

weekStart

Integer. Default value: 0

The day on which the week starts. 0 (Sunday) to 6 (Saturday)

startDate

Date. Default value: Start time

endDate

Date. Default value: end time

autoclose

Boolean. Default value: false

Whether to close immediately after selecting a date This datetime picker.

startView

Number, String. Default value: 2, 'month'

The view that is first displayed after the date and time picker is opened. Acceptable values:

• 0 or 'hour' for hour view

• 1 or 'day' for day view

• 2 or 'month' is the month view (default value)

• 3 or 'year' is the year view

• 4 or 'decade' is ten-year view

todayBtn

Boolean, "linked". Default value: false

If this value is true or "linked", a "Today" button will be displayed at the bottom of the date and time picker component to select the current date. If true, the "Today" button only switches the view to today's date. If "linked", today's date will be selected.

todayHighlight

Boolean. Default value: false

If true, highlight the current date.

Related recommendations: bootstrap tutorial

The above is the detailed content of What is the usage of bootstrap-datepicker. For more information, please follow other related articles on the PHP Chinese website!