layUI laydate 时间选择器近一天、近一月、近三月、近一年

最新推荐文章于 2024-12-19 16:37:16 发布

weixin_43454018

最新推荐文章于 2024-12-19 16:37:16 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： layui javascript html5

本文链接：https://blog.youkuaiyun.com/weixin_43454018/article/details/120086866

这篇博客介绍了如何使用layUI的laydate时间选择器来实现选取最近一天、一个月、三个月和一年的功能。通过参考其他博主的代码并进行改编，详细步骤包括写入时间组件、引入JS文件以及修改JS代码，最终实现了所需的时间范围选择，并展示了页面效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考其他博主代码的情况下进行改编

写入时间组件

<input type="text" class="layui-input" id="dateInfo">

引入js

<script type="text/javascript" th:src="@{/static/layui/layui.all.js}"></script>

对js进行修改

原代码

tools:{
   
   confirm:"确定",clear:"清空",now:"现在"}}

修改后的代码

tools:{
   
   confirm:"确定",clear:"清空",now:"现在",nows:"近一天",month:"近一个月",threeMonth:"近三个月",year:"近一年"}}

js代码

layui.use(['laydate'], function() {
   
   
    var laydate = layui.laydate; 
    
laydate.render({
   
   
        elem: '#dateInfo', //指定元素
        range: '-',
         max: 0,
        btns: ['nows','month','threeMonth','year','clear','confirm'],
        ready:function(date){
   
   
            var d = new Date();		//重置信息，如果不进行重置，选择近一月可以一直点击，目前点击后直接进行关闭，符合目前的业务需求
            date.year = d.getFullYear();
            date.month = (d.getMonth() + 1);
            date.date = d.getDate();
            var  _thisid=this.elem;
            $(".laydate-btns-nows").on('click', function() {
   
   	//按钮触发事件
                if(date.month < 10){
   
   	//时间格式yyyy-MM-dd 所以需要判断月日是单位还是双位，如果是yyyy-M-d就不需要判断，下面代码同功能
                    if(date.date < 10){
   
   
                        var end=date.year+'-0'+date.month