bootstrap datepicker的基本使用教程

更新時間：2019年07月09日 10:26:01 作者：xc丶卡卡

這篇文章主要介紹了bootstrap datepicker的基本使用教程,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

首先

引入相應css和js：

<link rel="stylesheet" th:href="@{/assets/css/datepicker.css}" rel="external nofollow" />
<script th:src="@{/assets/js/date-time/bootstrap-datepicker.js}"></script>

然后html代碼裝載控件

 <div class="input-group">
       <input class="form-control date-picker" id="endTime" data-date-end-date="0m"
        type="text" placeholder="選擇年月"/> 
     <span class="input-group-addon"> 
      <i class="fa fa-calendar bigger-110"></i>
     </span>
     </div>

初始化控件：

$('#endTime').datepicker({ 
     format: 'yyyy-mm',
     startView: 1, maxViewMode: 1,minViewMode:1,
     autoclose :true 
   })

現(xiàn)在可以看效果了：

選擇日期后觸發(fā)事件：

$('#endTime').datepicker({ 
     format: 'yyyy-mm',
     startView: 1, maxViewMode: 1,minViewMode:1,
     autoclose :true 
   }).on("changeMonth", function(e) {
    
    var date_=e.date;
    var year_str = date_.getFullYear();
    var month_str = date_.getMonth()+1;
    if(month_str<10){
     month_str="0"+month_str;
    }
    var endMonth=year_str+"-"+month_str;
      getLitDirection(endMonth);
        getLitSaleTop(endMonth);
        getLitViewTop(endMonth);
        getLitErrorRecovery(endMonth); 
        
   var month_value=year_str+"年"+(date_.getMonth()+1)+"月";
        $("#end_Time").html(month_value); 
      $("#split1").show();
        $("#split2").show();
    
      }).next().on(ace.click_event, function(){
  $(this).prev().focus();
  });

總結

以上所述是小編給大家介紹的bootstrap datepicker的基本使用教程 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章:

uniapp uni-swipe-action 滑動操作狀態(tài)恢復功能實現(xiàn)
按照uni-app官方文檔的寫法,當前一條滑動確認之后頁面列表刷新但是滑動的狀態(tài)還在,我們需要在滑動確認之后頁面刷新滑動狀態(tài)恢復,下面小編給大家分享uniapp uni-swipe-action 滑動操作狀態(tài)恢復功能實現(xiàn),感興趣的朋友跟隨小編一起看看吧
2024-06-06
在for循環(huán)中l(wèi)ength值是否需要緩存
這篇文章主要介紹了在for循環(huán)中l(wèi)ength值是否需要緩存,需要的朋友可以參考下
2015-07-07
基于javascript數(shù)組實現(xiàn)圖片輪播
這篇文章主要為大家詳細介紹了基于javascript數(shù)組實現(xiàn)圖片輪播的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05
js實現(xiàn)無縫滾動圖
本文主要分享了js實現(xiàn)無縫滾動圖的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
如何用threejs實現(xiàn)實時多邊形折射
這篇文章主要介紹了如何用threejs實現(xiàn)實時多邊形折射，對three.js庫感興趣的同學，可以參考下
2021-05-05
javascript實現(xiàn)數(shù)組去重的多種方法
這篇文章主要為大家詳細介紹了javascript實現(xiàn)數(shù)組去重的多種方法，感興趣的小伙伴們可以參考一下
2016-03-03
簡單談談JavaScript變量提升
對于學習JavaScript的初學者來說，變量提升是繞不過去的一個知識點,簡單來說變量提升就是 JS會把var變量的聲明自動提升到作用域的頂部,這篇文章主要給大家介紹了關于JavaScript變量提升的相關資料,需要的朋友可以參考下
2021-09-09
moment的一些常見用法總結大全
這篇文章主要給大家總結介紹了關于moment的一些常見用法,moment.js是一個輕量級的JavaScript時間庫,對于日常開發(fā)中可能會存在獲取時間、設置時間、格式化時間、比較時間等,需要的朋友可以參考下
2023-09-09
js制作簡易年歷完整實例
這篇文章主要介紹了js制作簡易年歷的方法,包括實現(xiàn)的思路以及js、css與html各個部分的實現(xiàn)技巧,需要的朋友可以參考下
2015-01-01
js在ie下打開對話窗口的方法小結
下面小編就為大家?guī)硪黄猨s在ie下打開對話窗口的方法小結。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10