layui 日期范围选择器_笔记-layui事件日期选择器

年月日范围选择

年月日选择器

年月日时分秒选择器

日期有效范围只限定在：2017年

日期有效范围限定在：过去一周到未来一周

时间有效范围设定在: 上午九点半到下午五点半

日期时间有效范围的设定:

layui.use(["jquery","layer","laydate"],function(){

var $ =layui.jquery;

var layer =layui.layer;

var laydate =layui.laydate;

laydate.render({

elem:"#date6";

range:true;//开启返回选择 })

/*** value 初始值* 可以设置字符串，但是字符串必须遵循format参数设定的格式* 还可以设置日期对象，例如：new Date()*/

laydate.render({

elem: "#date9",

format: "yyyy年MM月dd日",

// value: '2018年08月18日' // 必须遵循format参数设定的格式 value: new Date()

});

// 自定义格式 laydate.render({

elem: "#date8",

type: "datetime",

format: "yyyy年MM月dd日 HH时mm分ss秒"

});

laydate.render({

elem:"#date7";

format:"yyyy年MM月dd日"

});

/**最小/大范围内的日期时间值如果值为字符类型，则：年月日必须用 -(中划线)分割、时分秒必须用 :(半角冒号)号分割。如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后*/

// 日期时间有效范围的设定 laydate.render({

elem: "#date13",

type: "datetime",

min: "2019-04-01 09:30:00",

max: "2019-04-30 18:30:00"

});

// 时间有效范围设定在: 上午九点半到下午五点半 : laydate.render({

elem: "#date12",

type: "time",

min: "09:30:00",

max: "18:30:00"

});

// 日期有效范围限定在：过去一周到未来一周 laydate.render({

elem: "#date11",

min: -7,

max: 7

});

// 日期有效范围只限定在：2017年 laydate.render({

elem: "#date10",

min: "2017-01-01",

max: "2017-12-31"

});

})

/*** mark - 标注重要日子* 每年的日期 {'0-9-18': '国耻'} 0 即代表每一年每月的日期 {'0-0-15': '中旬'} 0-0 即代表每年每月(layui 2.1.1/layDate 5.0.4 新增)特定的日期 {'2017-8-21': '发布')*/

laydate.render({

elem: "#date20",

type: "date",

mark: {

'0-10-14': '生日'

,'0-0-10': '工资'

,'2017-8-21': '结婚'

}

// 点击某一个日期，响应的回调函数 ,done: function(value, date){

console.log(date);

if(date.year === 2017 && date.month === 8 && date.date === 21){

layer.msg('结婚纪恋日快乐，记得买花');

}

}

});

// calendar - 是否显示公历节日 // 我们内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示。 laydate.render({

elem: "#date19",

type: "date",

calendar: true

});

// theme - 主题 // default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题) laydate.render({

elem: "#date18",

type: "date",

theme: "#3c3c3c"

});

/*** lang - 语言* lang="en"国际版， lang="cn"中文版(默认)*/

laydate.render({

elem: "#date17",

type: "date",

lang: "en"

});

/*** btns - 工具按钮* 'clear'： 对应“清空”按钮* 'now'：对应“现在”按钮* 'confirm'：对应“确定”按钮*/

laydate.render({

elem: "#date16",

type: "date",

btns: ["confirm", "now"]

});

// showBottom - 是否显示底部栏 laydate.render({

elem: "#date15",

type: "date",

showBottom: false

});

// 自定义弹出控件的事件 laydate.render({

elem: "#date14",

type: "date",

trigger: "mouseenter"

});