amazeui-datepicker日历控件-设置默认当日

26次阅读

共计 792 个字符,预计需要花费 2 分钟才能阅读完成。

背景:

最近在做一个系统的时候,前台需要选择日期,传给后台进行处理,每次都需要通过手动点击组件,选择日期,这样子很不好,所以我想通过程序自动实现,设置日期选择框默认值,这样子就不用每次都选了。

分析:

项目是使用 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>

实现的效果

正文完
 0