layui日期多选

 先引入layui的css和js

html部分:


<div class="layui-inline" id="signup-date"></div>
<input id="c-signup" data-rule="required" class="form-control" name="sign_up_time" type="text">  

JS部分: 


    var data = {};
    var layer, $, laydate;
    layui.use(['layer', 'form', 'jquery', 'laydate'], function () {
        layer = layui.layer,$ = layui.jquery,laydate = layui.laydate,form = layui.form;
        var new_date = new Date();
        loding_date(new_date, data);
    })
    //日历插件调用方法
    function loding_date(date_value, data) {
        laydate.render({
            elem: '#signup-date'
            , type: 'date'
            , theme: 'grid'
            , position: 'static'
            , range: false
            , value: date_value
            , isInitValue: false
            , calendar: false
            , btns: false
            , ready: function (value) {
                del_old(value);
            }
            , done: function (value, date, endDate) {
                add_new(value, data)
            }
            , change: function (value, date) {
                del_old(date);
            }
            , mark: data 
        });
    }
    function del_old(value) {
        var mm = value.year + '-' + value.month + '-' + value.date;
        $('.laydate-theme-grid table tbody').find('[lay-ymd="' + mm + '"]').removeClass('layui-this');
    }
    //定义添加/编辑标注方法
    function add_new(obj_date, markJson) {
        $('#signup-date').html(''); // 先清除原先表格信息
        if (markJson.hasOwnProperty(obj_date)) {
            delete markJson[obj_date]; // 删除取消日期
        } else {
            // 新增选择日期
            markJson[obj_date] = ''
        }
        loding_date(obj_date, markJson);// 重新创建个新的日期表格
        
        var dates = "";
        for(var key in data){
              if(dates == ""){
                dates = key;
             }else{
                  dates += ","+key;
            }
        }
        $('#c-signup').val(dates)
    }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值