首页 > 其他分享 >layui学习5(日期与时间选择、分页)

layui学习5(日期与时间选择、分页)

时间:2023-04-27 23:34:48浏览次数:51  
标签:分页 render layui elem 日期 test getElementById document laydate

1.日期与时间选择

1.1

    <div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
        <input type="text" class="layui-input" id="test1" placeholder="默认选择题">
    </div>
    <div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
        <input type="text" class="layui-input" id="test2" placeholder="年选择器">
    </div>
    <div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
        <input type="text" class="layui-input" id="test3" placeholder="月选择器">
    </div>
    <div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
        <input type="text" class="layui-input" id="test4" placeholder="时间选择器">
    </div>
    <div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
        <input type="text" class="layui-input" id="test5" placeholder="日期选择器">
    </div>
<!--加载date模块-->
<script type="text/javascript">
    layui.use('laydate',function (){
        var laydate=layui.laydate;

        //加载laydate实例
        laydate.render({
            elem: '#test1' //或 elem: document.getElementById('test')、elem: lay('#test')
            //默认为日期选择器
        });
        laydate.render({
            elem: '#test2' //或 elem: document.getElementById('test')、elem: lay('#test')
            ,type:'year'
        });
        laydate.render({
            elem: '#test3' //或 elem: document.getElementById('test')、elem: lay('#test')
            ,type: 'month'
        });
        laydate.render({
            elem: '#test4' //或 elem: document.getElementById('test')、elem: lay('#test')
            ,type:'time'
        });
        laydate.render({
            elem: '#test5' //或 elem: document.getElementById('test')、elem: lay('#test')
        ,type:'datetime'
        });

    });
</script>

 

 

 

 

 

 1.2可以自定义格式

format

日期和时间组件文档 - Layui (ilayuis.com)

        //自定义日期格式
        laydate.render({
            elem: '#test6'
            ,format: 'yyyy/MM/dd' //可任意组合
        });

1.3设置初始值

 

        //传入符合format格式的字符给初始值
        laydate.render({
            elem: '#test7'
            ,value: '2018-08-18' //必须遵循format参数设定的格式
        });
        //传入Date对象给初始值
        laydate.render({
            elem: '#test8'
            ,value: new Date(1534766888000) //参数即为:2018-08-20 20:08:08 的时间戳
        });

 

2.分页

laypage.render({
            elem:'page',//不需要加#,这里是容器绑定的id值
            count:100,//总数量
            limit:5,//每页显示的数量
            limits:[5,10,20,30],
            layout:['prev','page','next','limit','count'],//自定义排版,每页显示多少条
            groups:10,//连续页面显示的页码数
        });

 3.

 

标签:分页,render,layui,elem,日期,test,getElementById,document,laydate
From: https://www.cnblogs.com/hmy22466/p/17333585.html

相关文章

  • ORA-01810 格式代码出现两次,日期格式,时间格式,to_date错误
    这个错误的原因是使用了两次MMto_date('YYYY-MM-DDHH:MM:SS')需要把分钟的MM改成MIto_date('YYYY-MM-DDHH:MI:SS')这样可能会出现小时变成了上下午的12小时格式,所以可以给小时设置成24小时格式to_date('YYYY-MM-DDHH24:MI:SS')黑色头发:http://heise......
  • Vue2实现部分页面使用rem布局
    1.计算rem值的比例,这里是1920的设计图;setRem(){/***@file:index.vue*@method:setRemPc*@param:*@return:*@description:计算rem大小*@date:*/varwhdef=100/1920;//表示1920的设计图,使用100PX的默认值varbodyWidth=document.body.cli......
  • MySQL----日期相关
    获取当前日期selectcurdate();结果: 2023-04-27获取当前日期为几号selectday(curdate())结果:27在当前日期上加上时间间隔selectDATE_ADD(curdate(),interval2day)结果:2023-04-29一、获取本月第一天selectDATE_ADD(curdate(),interval-day(curdate())+1day)--获取本......
  • springboot分页插件的问题
    1:maven依赖的问题此类原因是与pom.xml文件中引入的分页依赖有关,由于springboot本身集成pagerhelper的分页插件,只需要引入如下依赖即可<!--spring-bootmybatispagehelper--><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-st......
  • C#计算日期间隔(小数)
    参考内容TimeSpan结构在DateTime、DateOnly、DateTimeOffset、TimeSpan、TimeOnly和TimeZoneInfo之间进行选择TimeZoneInfo类DateTimeOffset结构C#日期间隔:如何计算两个日期相差几年几个月?C#中两个日期之间的间隔天数CalculateYear,MonthandDaybetweentwoDat......
  • 内存分页
    publicstatic<T>PageResult<T>newPage(List<T>content,IntegerpageNum,Integerpages){inttotal=content.size();intoffset=(pageNum-1)*pages;if(offset>total){returnnewPageResult<T>(null,pag......
  • 请问Pandas怎么能把类似201001这种月度格式改为2021-01-31这种日期格式
    今日鸡汤落叶人何在,寒云路几层。大家好,我是Python进阶者。一、前言前几天在Python最强王者交流群【老松鼠】问了一道Pandas时间处理的问题,如下图所示。二、实现过程一开始以为只是每个数据先加个31后缀,之后日期格式化转换一下应该就可以了,后来发现每个月天数不一样,不可以一概而论,......
  • @JsonFormat和@DataFormat注解解决前后端日期格式一致性问题
    场景分析场景1:当我们从数据库中查询某篇博客文章数据时,blog表中文章发布日期blog_date这个字段,如果未经过处理,后端查询到的数据传到前端进行展示时,会得到一个不太符合我们要求的日期格式,比如:"blog_date":"2020-12-01T14:25:31.296+0000",为了解决这个问题,将后端返回给前端的日......
  • hutool 日期转换
    DateTime转LocalDateDateTimeuseTimeDate=DateUtil.offsetMonth(date,12);LocalDateTimeuseTime=DateUtil.toLocalDateTime(useTimeDate);Java8日期时间API,新增了LocalDate、LocalDateTime、LocalTime等线程安全类:LocalDate:只有日期,诸如:2019-07-13LocalTime:只有时间,诸......
  • java获取当前年份、月份和日期
    创建一个Calendar类的实例对象,Calendar类属于java.util包Calendarcalendar=Calendar.getInstance();获SimpleDateFormatformat=newSimpleDateFormat(“yyyy-MM-dd”);//获取当月第一天calendar=Calendar.getInstance();calendar.add(Calendar.MONTH,0);calendar......