Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use bootstrap-datepicker". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use bootstrap-datepicker.

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

Operating environment of this tutorial: Windows10 system, bootstrap3.3.7 version, DELL G3 computer

What is the use of bootstrap-datepicker?

Bootstrap-datepicker is a time selection plug-in, but the default text format is English, so you have to introduce the Chinese package first.

A brief introduction to some basic properties of bootstrap-datepicker

$(function () {$('# datetimepicker'). Datetimepicker ({language: "zh-CN", / / language selection Chinese format: "yyyy-mm", / / format date timepicker:true, / / close time option yearEnd:2050 / / set the maximum year todayButton:false / / close Select Today button autoclose: 1, / / after selecting the date The pop-up box automatically closes startView:3, / / what format is displayed when the pop-up box is opened. 3 represents monthly minView: 3, / / the minimum date format that can be selected})

Give me two simple cases.

Show only the year and month

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

Show year, month and day

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

Note: the problem of selecting the style of the calendar may occur

There are no pictures of buttons on the left and right sides.

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

Examples of options:

WeekStart

Integer. Default value: 0

Which day does the week begin? 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 the date-time selector immediately after selecting a date.

StartView

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

The view that is displayed first after the date-time selector is opened. Acceptable values:

0 or 'hour' is the hourly view

1 or 'day' is the sky view

2 or 'month' is the monthly view (default)

3 or 'year' is the year view

4 or 'decade' is a ten-year view

TodayBtn

Boolean, "linked". Default value: false

If this value is true or "linked", a Today button is displayed at the bottom of the date-time selector component to select the current date. In the case of true, the "Today" button simply changes the view to the date of the day, and if it is "linked", the date of the day will be selected.

TodayHighlight

Boolean. Default value: false

If true, highlight the current date.

Thank you for your reading, the above is the content of "how to use bootstrap-datepicker", after the study of this article, I believe you have a deeper understanding of how to use bootstrap-datepicker, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.