记录: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-pane m-15 new-detail" style="padding: 15px;">
<!-- 禁选星期几:1,2,3,4,5,6,0 -->
<input type="hidden" id="appointmentDate" value="6,0">
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-inline" id="export_time"></div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">已选择的日期</label>
<div class="layui-input-block">
<textarea placeholder="请选择日期" id="ignoreDate" class="layui-textarea"></textarea>
</div>
</div>
</div>
JS代码:
<script>
layui.use(['layer', 'form', 'table', 'jquery', 'laydate'], function () {
var $ = layui.jquery,
layer = layui.layer,
form = layui.form,
laydate = layui.laydate,
table = layui.table;
//获取当前时间
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
}
//定义json
var data = getMonthDate(); //默认选中本月非周六、周日的所有日期
var new_date = new Date();
loding_date(new_date, data);
//日历插件调用方法
function loding_date(new_date, data) {
laydate.render({
elem: '#export_time',
type: 'date',
theme: 'grid',
max: '2099-06-16 23:59:59',
position: 'static',
range: false,
value: new_date
// , min:getNowFormatDate() //获取当前时间
,
isInitValue: false,
calendar: false,
btns: false,
mark: data //重要json!
,
ready: function (value) {
disabled_date(value, $("#appointmentDate").val());
hide_mr(data);
},
done: function (value, date) {
dateset(value, data);
},
change: function (value, date) {
disabled_date(date, $("#appointmentDate").val());
hide_mr(data);
}
});
}
//设置不可选择的星期
function disabled_date(value, appointmentDate) {
var mm = value.year + '-' + value.month + '-' + value.date;
$('.laydate-theme-grid table tbody').find('[lay-ymd="' + mm + '"]').removeClass('layui-this');
if (appointmentDate != null && appointmentDate != '') {
var dates = appointmentDate.split(",");
for (var i = 0; i < dates.length; i++) {
if (dates[i] == "7") {
dates[i] = 0;
}
$("table>tbody>tr").find("td:eq(" + dates[i] + ")").addClass('ng-laydate-disabled');
}
}
}
//设置选中
function hide_mr(markJson) {
keys = [];
if (markJson != null) {
for (var key in markJson) {
var dates = key.split("-");
dates[1] = dates[1] * 1;
var mm = dates[0] + '-' + dates[1] + '-' + dates[2];
$('.laydate-theme-grid table tbody').find('[lay-ymd="' + mm + '"]').addClass(
'layui-this');
keys.push(key);
}
}
if (keys.length >= 0) {
$("#ignoreDate").val(keys);
}
}
//定义添加/编辑标注方法
function chose_moban(obj_date, markJson) {
$('#export_time').html(''); //重要!由于插件是嵌套指定容器,再次调用前需要清空原日历控件
if (markJson.hasOwnProperty(obj_date)) {
delete markJson[obj_date]
} else {
//添加属性
markJson[obj_date] = ''
}
loding_date(obj_date, markJson); //重要!,再标注一个日期后会刷新当前日期变为初始值,所以必须调用当前选定日期。
}
//done回调方法
function dateset(value, data) {
hide_mr(data);
chose_moban(value, data);
}
});
</script>
效果图示: