• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > Thinkphp5.1 + layui时间范围设置方法

Thinkphp5.1 + layui时间范围设置方法

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了Thinkphp5.1,layui时间范围设置方法等相关知识,希望对您有所帮助

最近在制作一个项目时遇到一个问题,就是开始时间和结束时间是相关联的,结束时间的选择范围是最小为开始时间,最大为开始时间90天后的时间,我这边用的是layui的插件获取的日期,里面有两个参数min和max分别可以设置日期范围;


其代码如下所示:

layui.use('laydate', function(){    var laydate = layui.laydate;    //限定可选日期    var ins22 = laydate.render({        elem: '#test-limit1'        ,min: '2016-10-14'        ,max: '2080-10-14'    });});

但是怎么获取max和min的值时,我遇到了难点,后面经过反复研究Layui官方文档和反复的尝试,终于解决了这一问题,分享给大家:


a.定义变量当前时间、最小时间、最大时间

var now = new Date();var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1);var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);


b.根据当前选择的时间重新给max和min赋值

要获取max和min的值,首先要了解时间换算单位,大概思路为基本换算单位以小时为准,1小时为3600秒,因为laui中的时间戳是以毫秒为计算单位,所以需要再3600的基础上再乘以1000,一天为24小时,总共90天所以是90*24*3600*1000.

在选择了开始时间后done: function (value, date) 中value的值为当前选择的时间,将该值转化为时间戳为:var date1 = new Date(value).getTime();

90天后的时间戳为:var date2 = date1 + 90 * 24 * 3600 * 1000;

再将获取的时间转化为年月日:

var date5 = {    'date': date3.getDate(),    'month': date3.getMonth() + 1,    'year': date3.getFullYear()};

将获取到的值赋值给结束时间的最小值和最大值:

end.config.max = date5;end.config.max.month = date5.month - 1;end.config.min = date;end.config.min.month = date.month - 1;

所以完整的代码为:

var start = laydate.render({    elem: '#bx_start',    type: 'date',    max: max,    min: min,    showBottom: false,    btns: ['clear', 'confirm'],    done: function (value, date) {        var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳        var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的时间        var date3 = new Date(date2);        var date5 = {            'date': date3.getDate(),            'month': date3.getMonth() + 1,            'year': date3.getFullYear()        };        end.config.max = date5;        end.config.max.month = date5.month - 1;        end.config.min = date;        end.config.min.month = date.month - 1;    }});


c.将获取的min和max传给结束时间

var end = laydate.render({    elem: '#bx_end',    type: 'date',    max: max,    min: min,    showBottom: false,    done: function (value, date) {        if ($.trim(value) == '') {            var curDate = new Date();            date = {                'date': curDate.getDate(),                'month': curDate.getMonth() + 1,                'year': curDate.getFullYear()            };        }        start.config.max = date;        start.config.max.month = date.month - 1;    }});


以下为完整代码

<script>    layui.use(['form','layedit', 'laydate','layer','element'], function() {        $ = layui.jquery;        layer = layui.layer;        var form = layui.form;        layedit = layui.layedit;        laydate = layui.laydate;//定义变量当前时间、最小时间、最大时间        var now = new Date();        var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1);        var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);        var start = laydate.render({            elem: '#bx_start',            type: 'date',            max: max,            min: min,            showBottom: false,            btns: ['cl
  


 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • ThinkPhp5.1制作微信支付以及支付后的几种状态说明
  • 你知道Thinkphp5.1让验证码在Electron-vue中怎么用?
  • Thinkphp5.1详细讲解中间件的用法
  • 如何使用thinkphp5.1的数组查询对象
  • 解决ThinkPHP5.1版本引入composer vendor扩展包的问题
  • 说说Thinkphp5.1实现邮箱验证问题
  • 详解thinkphp5.1的URL重写,伪静态设置
  • thinkphp5.1的model模型自动更新update_time字段实例讲解
  • 解决TP5.1出现A non well formed numeric value encountered的问题
  • Thinkphp5.1 + layui时间范围设置方法

相关文章

  • CDR制作IE浏览器标志教程
  • Thinkphp3.2 畅言评论回推接口制作
  • 网站链接健康检查需要做的十件事情
  • PhotoShop滤镜制作精美的艺术彩色玻璃效果教程
  • Thinkphp volist多重循环原样输出数组key值
  • jQuery对象怎么转为html dom对象
  • Photoshop制作简洁时尚的形象主页
  • 如何利用HTML5 canvas旋转图片?(实例演示)
  • 分享一个Golang Http 验证码示例
  • 宝塔面板使用中常见的9个问题(附答案)

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • laravel-mix怎么自动压缩html模板文件
    • 如何撰写良好的描述标签 description tag?
    • 手把手教你怎么在小程序中使用字体图标
    • 第三方下载苹果CMSV10系统的请注意后门WebShell
    • BootstrapTable如何重新加载数据?3种方式了解一下!
    • phpmyadmin如何重置密码?
    • DedeCMS 5.6升级至DedeCMS5.7SP1后类目和发布人不显示
    • 帝国CMS多值字段for循环调用调用方法
    • dedecms大量删除文章后,列表页显示错误修复办法
    • 如何解决vue中layui报错问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有