快捷導(dǎo)航

bootstrap日歷插件datetimepicker使用方法

更新時間：2016年12月14日 14:53:20 作者：XTGOG

這篇文章主要為大家詳細(xì)介紹了bootstrap日歷datetimepicker插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

如何使用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調(diào)用代碼：

$(function (){
/* 主要為：startView: 2,
 maxViewMode: 1,
 minViewMode:1,
 這三個參數(shù)，第一個表示起始選擇范圍，0為日，1為月，2為年，
 第二個參數(shù)表示最大選擇范圍，
 第三個表示最小選擇范圍。數(shù)字意義同第一個參數(shù)。
*/
  //選擇年的 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#startdate

如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附3個精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實戰(zhàn)教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript實現(xiàn)Email郵件顯示與刪除功能
這篇文章主要介紹了javascript實現(xiàn)Email郵件顯示與刪除功能，需要的朋友可以參考下
2015-11-11
原生JavaScript實現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
Express結(jié)合Webpack的全棧自動刷新
現(xiàn)在，webpack可以說是最流行的模塊加載器一方面，它為前端靜態(tài)資源的組織和管理提供了相對較完善的解決方案，另一方面，它也很大程度上改變了前端開發(fā)的工作流程。下面小編來和大家一起學(xué)習(xí)
2019-05-05
JavaScript中Async/Await通過同步的方式實現(xiàn)異步的方法介紹
在JavaScript的異步編程中，我們經(jīng)常使用回調(diào)函數(shù)、Promise和 Async/Await來解決異步操作的問題，Async/Await 又是Promise的語法糖，它的出現(xiàn)讓異步編程變得更加直觀和易于理解，本文將詳細(xì)講解Async/Await如何通過同步的方式實現(xiàn)異步
2023-06-06
在Javascript操作JSON對象，增加刪除修改的簡單實現(xiàn)
下面小編就為大家?guī)硪黄贘avascript操作JSON對象，增加刪除修改的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
Bootstrap實現(xiàn)圓角、圓形頭像和響應(yīng)式圖片
這篇文章主要介紹了Bootstrap實現(xiàn)圓角、圓形頭像和響應(yīng)式圖片的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
JS常用插件之Swiper插件實現(xiàn)輪播圖功能實例
項目中會多次使用到輪播圖組件,下面這篇文章主要給大家介紹了關(guān)于JS常用插件之Swiper插件實現(xiàn)輪播圖功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07
javascript數(shù)組去重方法分析
這篇文章主要介紹了javascript數(shù)組去重方法,通過2個示例對比分析了javascript數(shù)組去重的原理與操作技巧,需要的朋友可以參考下
2016-12-12
詳解JavaScript es6的新增數(shù)組方法
這篇文章主要為大家介紹了JavaScript es6的新增數(shù)組方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
使用Bootstrap做一個朝代歷史表
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。這篇文章主要介紹了使用Bootstrap做一個朝代歷史表,需要的朋友可以參考下
2019-12-12