amazeui datepicker日曆控件 設置默認當日

背景:

最近在做一個系統的時候,前臺需要選擇日期,傳給後臺進行處理,每次都需要通過手動點擊組件,選擇日期,這樣子很不好,所以我想通過程序自動實現,設置日期選擇框默認值,這樣子就不用每次都選了。

分析:

項目是使用Spring Boot+thymeleaf的技術棧實現的,日期控件data-am-datepicker我看了一下應該是基於amazeui(官網地址:http://amazeui.shopxo.net/),查看了一下官方文檔,發現.datepicker('setValue', value)方法可以實現。

方法說明

方法名稱 描述
.datepicker('open') 顯示日曆
.datepicker('close') 隱藏日曆
.datepicker('place') 更新調用datepicker的相對位置
.datepicker('setValue', value) 設置Datepicker新值

代碼:

<div class="am-form-group ">
     <label for="record_date" class="am-u-sm-3 am-form-label">consume_date</label>
       <div class="am-u-sm-9 am-radio">
         <input type="text" class="am-form-field" id="record_date" placeholder="請選擇日期" 
                data-am-datepicker readonly required name="record_date" />
       </div>
    </div>

加入<script>代碼:

<script>
    $(function() {
        var TodayDate = new Date();
          $('#record_date').datepicker('setValue', TodayDate);
        });
    </script>

實現的效果
圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章