Bootstrap Calendar plug-in DateTimePicker usage _javascript tips

How do I use the bootstrap calendar DateTimePicker plugins?

I. Introduction of DOCUMENTS

1, CSS style

<link href= "/css/bootstrap-datetimepicker.min.css" rel= "stylesheet" media= "screen" >

2, JS file

<script type= "Text/javascript" src= "/js/bootstrap-datetimepicker.js" charset= "UTF-8" ></script>
<script type= "Text/javascript" src= "/js/bootstrap-datetimepicker.zh-cn.js" charset= "UTF-8" ></script>

Second, layout code

1, Layout code:

<div class= "Input-group date form_date col-sm-2 col-md-2 col-lg-2 floatleft" data-date= "" data-date-format= "dd MM yyyy "Data-   link-field=" Dtp_input2 "data-link-format=" Yyyy-mm-dd "> <input class=" Form-control "id="
Birthdays "size=" "type=" text "value=" "Readonly> <span class=" Input-group-addon "><span class=
" Glyphicon glyphicon-remove "></span></span>
<span class=" Input-group-addon "><span" class= "Glyphicon Glyphicon-calendar" ></span></span>
 </div>

Third, JS call code:

$ (function () {/
* is mainly: Startview:2,
 maxviewmode:1,
 minviewmode:1,
 These three parameters, the first represents the starting selection range, 0 for the day, 1 for the month, 2 for the year,
 The second parameter represents the maximum selection range, and the
 third represents the minimum selection range. The number meaning is the same as the first parameter.
*
  //Select year Startview:4, minview:4, Format: ' yyyy ', 
$ ('. Form_date '). DateTimePicker ({
format: ' yyyy ') , 
Startview:4, 
minview:4,
language: ' ZH-CN ',
forceparse:false, 
autoclose:true,
  Pickerposition: "Bottom-left" 
  });
 You can choose
  $ ('. Form_date '). DateTimePicker ({
  language: ' ZH-CN ',
  minview: ' Month ', 
  format: ') Yyyy-mm-dd ',
  autoclose:true,
 startview:2,
  showmeridian:1,
  pickerposition: "Bottom-left"
 });
});

Manual Address: http://bootstrap-datepicker.readthedocs.org/en/latest/options.html

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Table Use Tutorial

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.