How to use bootstrap-datepicker plug-in? (detailed explanation)

This article will introduce how to use the bootstrap-datepicker plug-in in Bootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In Boosttrap-based Web development, it is often necessary to enter date content. In Boosttrap-based plug-ins, you can use bootstrap-datepicker, a very good plug-in, to enter dates to replace the default type=date. An unfriendly date entry control. This article introduces how I use the bootstrap-datepicker plug-in to implement date entry processing in my Boostrap development framework.

1. Introduction to bootstrap-datepicker plug-in

The relevant project address of bootstrap-datepicker plug-in is as follows:

http://www.bootcss.com/ p/bootstrap-datetimepicker

https://github.com/uxsolutions/bootstrap-datepicker

Using this plug-in is similar to other plug-ins. You only need to introduce the corresponding JS files and CSS styles. That’s it, the following is the reference file of the plug-in.

<script src="/js/bootstrap-datepicker.js"></script>
<script src="/css/bootstrap-datepicker3.min.css"></script>

If you need to use the local language, just introduce the language file.

<script src="/locales/bootstrap-datepicker.zh-CN.js"></script>

The file directory of the plug-in is as follows:

The usage interface effect of the plug-in is as follows:

In the MVC framework, when we use plug-ins, we often introduce the corresponding CSS and JS through packaging. For example, the code of BundleConfig.cs in the C# code is as follows:

CSS file introduces the following code as shown:

The JS file is similar, as shown below:

And we are When developing a Boostrap project, we can use the master method to introduce the corresponding JS and CSS files, and there is no need to pay attention to these applications on the sub-page. These are common processes for MVC-based Boosttrap development, and we will not go into details here. .

2. Project usage code of bootstrap-datepicker plug-in

Initializing the bootstrap-datepicker plug-in is also relatively simple. The simplest code is as follows.

<input type="text" id="datetimepicker">

$('#datetimepicker').datetimepicker({
    format: 'yyyy-mm-dd hh:ii'
});

or

<script type="text/javascript">
    $(".form_datetime").datetimepicker();
</script>

In general use, we need to set the language, format, button and other attributes, as shown below

$('.input-daterange input').each(function () {
    $(this).datepicker({
       language: 'zh-CN', //语言
       autoclose: true, //选择后自动关闭
       clearBtn: true,//清除按钮
       format: "yyyy-mm-dd"//日期格式               
    });
});

In the interface for querying data, we Generally, an interval of time is required, as shown below.

The code for this interface is as follows.

<p class="input-group input-daterange">
   <input id="WHC_PayDate" name="WHC_PayDate" type="text" placeholder="付款日期(起)" data-date-format="yyyy-mm-dd" class="form-control"/>
   <p class="input-group-addon">~</p>
   <input id="WHC_PayDate2" name="WHC_PayDate" type="text" placeholder="付款日期(止)" data-date-format="yyyy-mm-dd" class="form-control"/>
</p>

And when entering interface details, the interface for selecting a single date is as follows.

    $('.input-date input').each(function () {
        $(this).datepicker({
            language: 'zh-CN', //语言
            autoclose: true, //选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm-dd"//日期格式        });
    });

When using the plug-in, it is impossible for us to initialize the bootstrap-datepicker plug-in for each input, so we use the class selector processing method to initialize all date plug-ins.

Plug-in optional date format:

• yyyy-mm-dd

• ##yyyy-mm-dd hh:ii

• yyyy-mm-ddThh:ii

##yyyy-mm-dd hh:ii:ss
yyyy-mm-ddThh:ii:ssZ
Finally, let’s take a look at the overall interface effect.

Summary: The above is an introduction to using the bootstrap-datepicker plug-in in Bootstrap. I hope it will be helpful to everyone's learning. For more related tutorials, please visit

bootstrap video tutorial

, Bootstrap online manual!

The above is the detailed content of How to use bootstrap-datepicker plug-in? (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!