layui日期多选

 先引入layui的css和js

html部分:


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)
    }

你可能感兴趣的:(css,javascript,layui)