bootstrap日曆外掛程式datetimepicker使用方法_javascript技巧

如何使用bootstrap日曆datetimepicker外掛程式？

一、引入檔案

1、css樣式

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

2、js檔案

<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>

二、 布局代碼

1、 布局代碼：

<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="16" 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>

三、js調用代碼：

$(function (){/* 主要為：startView: 2, maxViewMode: 1, minViewMode:1, 這三個參數，第一個表示起始選擇範圍，0為日，1為月，2為年， 第二個參數表示最大選擇範圍， 第三個表示最小選擇範圍。數字意義同第一個參數。*/  //選擇年的 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"   }); //可選擇年月日  $('.form_date').datetimepicker({  language: 'zh-CN',  minView: 'month',   format: 'yyyy-mm-dd',  autoclose: true, startView: 2,  showMeridian: 1,  pickerPosition: "bottom-left" });});

手冊地址：http://bootstrap-datepicker.readthedocs.org/en/latest/options.html

如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：

Bootstrap學習教程

Bootstrap實戰教程

Bootstrap Table使用教程

Bootstrap外掛程式使用教程

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。