先引入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)
}