layui 动态添加多个日期选择控件laydate

最新推荐文章于 2023-11-21 16:28:46 发布
最新推荐文章于 2023-11-21 16:28:46 发布
阅读量3.2k 收藏 1
点赞数 1
分类专栏： 周边组件 文章标签： css html html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingmuzhang/article/details/119905562
版权

需求说明：如下图所示，点击循环周期选择不同类型循环周期，时间区间根据循环周期进行动态变化，若是选择周和月，时间区间可以通过点击加号动态增加多个

功能要点：用户需要能根据自己需要动态创建多个时间选择器

请添加图片描述请添加图片描述
请添加图片描述请添加图片描述

后端的需要的数据格式为

malltRightsLoopInfoList: [{
      loopType: '',    //循环周期
      loopCfg: '',     //星期或月份
      obtainBeginDatePart: '',  //开始时间
      obtainEndDatePart: ''     //结束时间
}]

这里先初始化malltRightsLoopInfoList，再根据循环周期的点击来重新初始化，并根据的malltRightsLoopInfoList值将laydate时间选择器初始化，若是选择的周或月，用户点击添加时间区间时重新给malltRightsLoopInfoListpush一个对象，并重新初始化laydate

HTML

<div class="col-6">
          <div class="c-form-item mgb-xl">
            <p class="c-form-names">
              <span class="c-form-nonull">*</span>循环周期
            </p>
            <div class="c-form-info">
              <label class="c-radio {{malltRightsLoopInfoList[0].loopType == '0' ? 'choice' : ''}} mgr-l" on-click="selectCircle('0')">
                <i></i>
                <span>不循环</span>
              </label>
              <label class="c-radio {{malltRightsLoopInfoList[0].loopType == '1' ? 'choice' : ''}} mgr-l" on-click="selectCircle('1')">
                <i></i>
                <span>日</span>
              </label>
              <label class="c-radio {{malltRightsLoopInfoList[0].loopType == '2' ? 'choice' : ''}} mgr-l" on-click="selectCircle('2')">
                <i></i>
                <span>周</span>
              </label>
              <label class="c-radio {{malltRightsLoopInfoList[0].loopType == '3' ? 'choice' : ''}} mgr-l" on-click="selectCircle('3')">
                <i></i>
                <span>月</span>
              </label>
            </div>
          </div>
        </div>
        <div
          class="col-6"
          s-show="malltRightsLoopInfoList[0].loopType == '0'"
          style="height: 60px"
        ></div>
        <div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '1'">
          <div class="c-form-item mgb-xl">
            <p class="c-form-names" title="">
              <span class="c-form-nonull">*</span>时间区间
            </p>
            <div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
              <span class="data-spn" style="width: 25%;font-size: 12px;padding: 0 10px;text-align: center;">每天</span>
              <input
                autocomplete="off"
                placeholder="开始时间"
                id="{{'date' + index}}"
                class="ipt-date layer_time"
                style="width: 28%"
                value="{= mrl.obtainBeginDatePart =}"
              />
              —
              <input
                autocomplete="off"
                placeholder="结束时间"
                id="{{'dateend' + index}}"
                class="ipt-date layer_endtime"
                style="width: 28%"
                value="{= mrl.obtainEndDatePart =}"
              />
            </div>
          </div>
        </div>
        <div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '2'">
          <div class="c-form-item mgb-xl">
            <p class="c-form-names" title="">
              <span class="c-form-nonull">*</span>时间区间
            </p>
            <div class="c-form-info"  s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
              <select
                value="{= mrl.loopCfg =}"
                name=""
                class="pdr-0 c-select"
                style="width: 25%"
              >
              <option value="">请选择</option>  
              <option value="1">星期一</option>
                <option value="2">星期二</option>
                <option value="3">星期三</option>
                <option value="4">星期四</option>
                <option value="5">星期五</option>
                <option value="6">星期六</option>
                <option value="7">星期日</option>
              </select>
              <input
                autocomplete="off"
                placeholder="开始时间"
                id="{{'week' + index}}"
                class="ipt-date layer_time"
                style="width: 28%"
                value="{= mrl.obtainBeginDatePart =}"
              />
              —
              <input
                autocomplete="off"
                placeholder="结束时间"
                id="{{'weekend' + index}}"
                class="ipt-date layer_endtime"
                style="width: 28%"
                value="{= mrl.obtainEndDatePart =}"
              />
              <i class="c-iconfont color-blue font-xxl vm" on-click="addTime">&#xe66e;</i>
            </div>
          </div>
        </div>
        <div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '3'">
          <div class="c-form-item mgb-xl">
            <p class="c-form-names" title="">
              <span class="c-form-nonull">*</span>时间区间
            </p>
            <div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
              <select
                value="{= mrl.loopCfg =}"
                name=""
                class="pdr-0 c-select"
                style="width: 25%"
              >
              <option value=''>请选择</option>
              <option s-for="mt,index in month" value="{{index + 1}}">
                {{mt}}
              </option>
              </select>
              <input
                autocomplete="off"
                placeholder="开始时间"
                id="{{'mont' + index}}"
                class="ipt-date layer_time"
                style="width: 28%"
                value="{= mrl.obtainBeginDatePart =}"
              />
              —
              <input
                autocomplete="off"
                placeholder="结束时间"
                id="{{'montend' + index}}"
                class="ipt-date layer_endtime"
                style="width: 28%"
                value="{= mrl.obtainEndDatePart =}"
              />
              <i class="c-iconfont color-blue font-xxl vm" on-click="addTime">&#xe66e;</i>
            </div>
          </div>
        </div>

JS

// 初始化数据
initData: function () {
   return {           
       //循环周期
       malltRightsLoopInfoList: [{
          loopType: "0",
          loopCfg: '',
          obtainBeginDatePart: '',
          obtainEndDatePart: ''
       }], 
   }
}

//选择循环周期
selectCircle: function(loopType) {
  let self = this;
  this.data.set('malltRightsLoopInfoList',[{
      loopType: '',
      loopCfg: '',
      obtainBeginDatePart: '',
      obtainEndDatePart: ''
   }]); 
 this.data.set('malltRightsLoopInfoList[0].loopType',loopType);  
 setTimeout(function(){
  self.laydateInit();
  },100); 
},
  
//添加时间区间
addTime: function() {
  let self = this;            
  this.data.push('malltRightsLoopInfoList', {
      loopType: this.data.get('malltRightsLoopInfoList')[0].loopType, //循环周期的值都是一样的
      loopCfg: '',
      obtainBeginDatePart: '',
      obtainEndDatePart: ''
  });
  setTimeout(function(){
      self.laydateInit();
  },100);         
},
  
//时间控件初始化函数封装（重要代码）
laydateInit: function () {
            let self = this;  
            $(".layer_time").each(function (index) {
                let id = $(this).prop("id");
                laydate.render({
                  elem: "#" + id,
                  position: 'fixed',
                  type: 'time',
                  trigger: 'click',    //防止laydate组件超过页面最低部出现无法点出情况
                  done: (value) => {
									//回调函数是将用户选择的时间对数据进行赋值
                    index = Number(id.substring(4));
                    var malltRightsLoopInfoList = self.data.get('malltRightsLoopInfoList');
                    //对数据进行赋值
                    malltRightsLoopInfoList[index].obtainBeginDatePart = value.toString();   
                    self.data.set("malltRightsLoopInfoList", malltRightsLoopInfoList);   
                },
                });
              });
              $(".layer_endtime").each(function (index) {
                let id = $(this).prop("id");
                laydate.render({
                  elem: "#" + id,
                  position: 'fixed',
                  type: 'time',
                  trigger: 'click',
                  done: (value) => {
                    index = Number(id.substring(7));
                    var malltRightsLoopInfoList = self.data.get('malltRightsLoopInfoList');
                    malltRightsLoopInfoList[index].obtainEndDatePart = value.toString();
                    self.data.set("malltRightsLoopInfoList", malltRightsLoopInfoList);                                                  
                  },
                });
              });
         },

后端的需要的数据格式为

malltRightsLoopInfoList: [{
      loopType: '',    //循环周期
      loopCfg: '',     //星期或月份
      obtainBeginDatePart: '',  //开始时间
      obtainEndDatePart: ''     //结束时间
}]

这里先初始化malltRightsLoopInfoList，再根据循环周期的点击来重新初始化，并根据的malltRightsLoopInfoList值将laydate时间选择器初始化，若是选择的周或月，用户点击添加时间区间时重新给malltRightsLoopInfoListpush一个对象，并重新初始化laydate

HTML

<div class="col-6">
          <div class="c-form-item mgb-xl">
            <p class="c-form-names">
              <span class="c-form-nonull">*</span>循环周期
            </p>
            <div class="c-form-info">
              <label class="c-radio {{malltRightsLoopInfoList[0].loopType == '0' ? 'choice' : ''}} mgr-l" on-click="selectCircle('0')">
                <i></i>
                <span>不循环</span>
              </label>
              <label class="c-radio {{malltRightsLoopInfoList[0].loopType == '1' ? 'choice' : ''}} mgr-l" on-click="selectCircle('1')">
                <i></i>
                <span>日</span>
              </label>
              <label class="c-radio {{malltRightsLoopInfoList[0].loopType == '2' ? 'choice' : ''}} mgr-l" on-click="selectCircle('2')">
                <i></i>
                <span>周</span>
              </label>
              <label class="c-radio {{malltRightsLoopInfoList[0].loopType == '3' ? 'choice' : ''}} mgr-l" on-click="selectCircle('3')">
                <i></i>
                <span>月</span>
              </label>
            </div>
          </div>
        </div>
        <div
          class="col-6"
          s-show="malltRightsLoopInfoList[0].loopType == '0'"
          style="height: 60px"
        ></div>
        <div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '1'">
          <div class="c-form-item mgb-xl">
            <p class="c-form-names" title="">
              <span class="c-form-nonull">*</span>时间区间
            </p>
            <div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
              <span class="data-spn" style="width: 25%;font-size: 12px;padding: 0 10px;text-align: center;">每天</span>
              <input
                autocomplete="off"
                placeholder="开始时间"
                id="{{'date' + index}}"
                class="ipt-date layer_time"
                style="width: 28%"
                value="{= mrl.obtainBeginDatePart =}"
              />
              —
              <input
                autocomplete="off"
                placeholder="结束时间"
                id="{{'dateend' + index}}"
                class="ipt-date layer_endtime"
                style="width: 28%"
                value="{= mrl.obtainEndDatePart =}"
              />
            </div>
          </div>
        </div>
        <div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '2'">
          <div class="c-form-item mgb-xl">
            <p class="c-form-names" title="">
              <span class="c-form-nonull">*</span>时间区间
            </p>
            <div class="c-form-info"  s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
              <select
                value="{= mrl.loopCfg =}"
                name=""
                class="pdr-0 c-select"
                style="width: 25%"
              >
              <option value="">请选择</option>  
              <option value="1">星期一</option>
                <option value="2">星期二</option>
                <option value="3">星期三</option>
                <option value="4">星期四</option>
                <option value="5">星期五</option>
                <option value="6">星期六</option>
                <option value="7">星期日</option>
              </select>
              <input
                autocomplete="off"
                placeholder="开始时间"
                id="{{'week' + index}}"
                class="ipt-date layer_time"
                style="width: 28%"
                value="{= mrl.obtainBeginDatePart =}"
              />
              —
              <input
                autocomplete="off"
                placeholder="结束时间"
                id="{{'weekend' + index}}"
                class="ipt-date layer_endtime"
                style="width: 28%"
                value="{= mrl.obtainEndDatePart =}"
              />
              <i class="c-iconfont color-blue font-xxl vm" on-click="addTime">&#xe66e;</i>
            </div>
          </div>
        </div>
        <div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '3'">
          <div class="c-form-item mgb-xl">
            <p class="c-form-names" title="">
              <span class="c-form-nonull">*</span>时间区间
            </p>
            <div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
              <select
                value="{= mrl.loopCfg =}"
                name=""
                class="pdr-0 c-select"
                style="width: 25%"
              >
              <option value=''>请选择</option>
              <option s-for="mt,index in month" value="{{index + 1}}">
                {{mt}}
              </option>
              </select>
              <input
                autocomplete="off"
                placeholder="开始时间"
                id="{{'mont' + index}}"
                class="ipt-date layer_time"
                style="width: 28%"
                value="{= mrl.obtainBeginDatePart =}"
              />
              —
              <input
                autocomplete="off"
                placeholder="结束时间"
                id="{{'montend' + index}}"
                class="ipt-date layer_endtime"
                style="width: 28%"
                value="{= mrl.obtainEndDatePart =}"
              />
              <i class="c-iconfont color-blue font-xxl vm" on-click="addTime">&#xe66e;</i>
            </div>
          </div>
        </div>

JS

// 初始化数据
initData: function () {
   return {           
       //循环周期
       malltRightsLoopInfoList: [{
          loopType: "0",
          loopCfg: '',
          obtainBeginDatePart: '',
          obtainEndDatePart: ''
       }], 
   }
}

//选择循环周期
selectCircle: function(loopType) {
  let self = this;
  this.data.set('malltRightsLoopInfoList',[{
      loopType: '',
      loopCfg: '',
      obtainBeginDatePart: '',
      obtainEndDatePart: ''
   }]); 
 this.data.set('malltRightsLoopInfoList[0].loopType',loopType);  
 setTimeout(function(){
  self.laydateInit();
  },100); 
},
  
//添加时间区间
addTime: function() {
  let self = this;            
  this.data.push('malltRightsLoopInfoList', {
      loopType: this.data.get('malltRightsLoopInfoList')[0].loopType, //循环周期的值都是一样的
      loopCfg: '',
      obtainBeginDatePart: '',
      obtainEndDatePart: ''
  });
  setTimeout(function(){
      self.laydateInit();
  },100);         
},
  
//时间控件初始化函数封装（重要代码）
laydateInit: function () {
            let self = this;  
            $(".layer_time").each(function (index) {
                let id = $(this).prop("id");
                laydate.render({
                  elem: "#" + id,
                  position: 'fixed',
                  type: 'time',
                  trigger: 'click',    //防止laydate组件超过页面最低部出现无法点出情况
                  done: (value) => {
									//回调函数是将用户选择的时间对数据进行赋值
                    index = Number(id.substring(4));
                    var malltRightsLoopInfoList = self.data.get('malltRightsLoopInfoList');
                    //对数据进行赋值
                    malltRightsLoopInfoList[index].obtainBeginDatePart = value.toString();   
                    self.data.set("malltRightsLoopInfoList", malltRightsLoopInfoList);   
                },
                });
              });
              $(".layer_endtime").each(function (index) {
                let id = $(this).prop("id");
                laydate.render({
                  elem: "#" + id,
                  position: 'fixed',
                  type: 'time',
                  trigger: 'click',
                  done: (value) => {
                    index = Number(id.substring(7));
                    var malltRightsLoopInfoList = self.data.get('malltRightsLoopInfoList');
                    malltRightsLoopInfoList[index].obtainEndDatePart = value.toString();
                    self.data.set("malltRightsLoopInfoList", malltRightsLoopInfoList);                                                  
                  },
                });
              });
         },

我的博客主页 ：https://qingmuzhang.gitee.io/

钥零零
关注
专栏目录
layui 动态添加多个日期选择控件
MrLiber的博客
09-11 1万+
作为 layui 2.0 的核心组成之一，layDate 也是今非昔比了。 看到这么简洁的界面和完善的文档我反手就是一个赞！ 页面中有一两个日期选择器的时候，处理还比较方便。 详细请见官方文档：https://www.layui.com/doc/modules/laydate.html 当我们在同一个表单中初始化多个日期时，可能会遇到一些问题。 诸如下图此类情况： 初始状态下只有这一行...
layui时间选择器实现按天数自动选择起止日期
最新发布
glkyyl的博客
07-30 276
当点击 "+30天" 按钮时，如果已经有开始日期，则会计算 30 天后的结束日期，并将其设置到。此外，当通过第二个日期选择器选择日期时，也会计算 30 天后的结束日期，并将其设置到。确保了事件不会冒泡到父级元素，防止触发不必要的事件。
layui日期多选
代码存储室
06-06 805
layui日期多选
layui 同时绑定多个日期
清水的专栏
03-12 821
一、固定多个日期 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test.html</title> <meta charset="utf-8" /> <meta http-equiv="keywords" content="key
Layui 时间日期选择控件，动态、全局绑定多个元素
jiutengteng的博客
03-29 2484
直接上代码： //核心方法 初始化调用一次、动态添加后调用 function dateAddByDom(){ layui.use(['laydate'], function(){ var laydate = global = layui.laydate; lay('.visitDate').each(function() { //layui对象循环 例如：.visitDate 循环这个class laydate.render({
layui使用class绑定多个日期控件
一只想成为斗战圣佛的小猴子
08-25 1294
layui使用class绑定多个日期控件
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
10-16
在本文中，我们将深入探讨如何使用layui框架中的日期控件laydate实现开始和结束时间的联动控制。这种功能常见于需要用户输入一个时间段的场景，例如预约、计划设定等，确保用户选择的结束时间在开始时间之后。 首先...
layui 日期插件layDate 绑定 动态添加 增加多个 行内调用 js代码调用
热门推荐
愿你走过半生，归来任是少年。
03-31 1万+
起因 * 本人是在一家互联金融公司，因项目需求 要实现如上图的效果 从网上查阅了很多资料 ，无果而终，最终想到了 动态更改id 避免id重复 调用失败* 保守派 — 行内调用 &lt;!-- 动态增加 时间插件 --&gt; &lt;div class="layui-form-item"&gt; &lt;label class="layui-...
layDate多款日期时间控件
09-15
8. 动态更新：在运行时可以动态修改layDate的配置，实现动态更新日期选择器。 三、layDate实例应用 1. 日期格式化：通过`format`参数设置日期输出格式，如`format: 'YYYY-MM-DD'`。 2. 限制日期范围：使用`max`和`...
Layui日期多选，laydate多选
weixin_43992507的博客
03-05 4743
效果如下 实现方式 建议使用2.3.x及以上版本的layui 复制下面代码，引入layui的css和js即可使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>layu
使用 layui实例多个时间控件选择方法
tanqingfu1的博客
09-18 3969
1、原始写法 多个时间控件选择 定义不同的ID或者样式 来实例化 //执行一个laydate实例 laydate.render({ elem: '#start' //指定元素 }); 2、同时多个绑定实例化时间控件 lay(".你的样式") 实现思路 找到所有input 然后循环实例 //同时绑定多个 时间控件 lay('.date').each(fu...
Layui 多选日历的使用方法
奇妙的Bug之旅
11-21 919
本文介绍了如何在 Layui 中使用多选日历。通过引入 Layui 和相关组件，可以方便地实现多选日历的功能。同时，还可以通过监听多选日历的选择事件，获取用户选择的日期并进行进一步处理。希望这个示例能帮助你更好地理解和使用 Layui。
laydate实现日期多选
weixin_43652106的博客
03-25 2070
记录：layui laydate实现日期多选 HTml代码： <link rel="stylesheet" href="__PUBLIC__/layui-v2.5.7/layui/css/layui.css" media="all"> <script src="__PUBLIC__/layui-v2.5.7/layui/layui.js" charset="utf-8"></script> <div class="layui-form layui-form-pan
layui 使用laydate动态创建多个时间选择框
weixin_43652106的博客
12-24 1953
记录：layui框架， js使用 laydate动态创建多个时间选择框，点击无效问题。此外，使用laydate时间选择框生效的关键一点是，laydate框架会给input输入框增加一个lay-key=“1”，1也可能是其他数字。 例如下图所示，js实现动态添加多行数据，并使用laydate动态创建多个时间选择框 HTML代码： <style> .layui-table th{padding: 9px 5px;} .layui-table td{ padding: 9px
layui 同时绑定多个日期
php菜鸟技术天地
07-02 8108
一、固定多个日期&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;test.html&lt;/title&gt; &lt;meta charset="utf-8&quot
layui 动态绑定日期控件
闪灵龍
05-16 1276
layui 动态绑定日期控件 有时候页面需要 多个时间选择，而且是动态添加的，如果用ID 的方法很麻烦，后面发现其实可以不用ID 的方式 实现，动态生成 其实就是 通过点击事件，添加元素到 页面；最主要的是，在动态生成的时候，laydate框架 会添加一个 lay-key=‘1’ 的属性，因为页面已经有相同的值，会导致 控件不起作用，把lay-key 属性删除即可； function timeAdd(){ lay(".saletime").each(function (){
Layui时间范围选择器，添加【本周、本月、本季度、本年等常用时间快捷键】
个人记录
06-28 4309
Layui时间范围选择器，添加【本周、本月、本季度、本年等常用时间快捷键】
【layui】数据表格table动态添加时间控件
Minions_Fatman的博客
05-08 2013
/res 即为原始返回的数据。
Excel中实现动态日期选择控件及代码教程
本文将详细介绍如何在指定列中添加日期选择控件，并通过VBA脚本控制其显示和响应用户的输入。 首先，打开Excel工作簿，确保已启用VBA编辑器。在【试图】选项卡下的【工具栏】中找到并展开【控件工具箱】，这是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值