layui日期控件

6 篇文章 0 订阅
1 篇文章 0 订阅

日期类型 type

year    年选择器    只提供年列表选择
month   年月选择器   只提供年、月选择
date    日期选择器   可选择:年、月、日。type默认值,一般可不填
time    时间选择器   只提供时、分、秒选择
datetime    日期时间选择器 可选择:年、月、日、时、分、秒

日期类型的使用,点击事件

 * 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': '结婚'
    }, 
    min: "2021-12-01 09:30:00",  //最小值
    max: "2021-12-31 18:30:00",   //最大值
    theme: "#3c3c3c",   //背景色
    showBottom: false,    // showBottom - 是否显示底部栏
    trigger: "mouseenter",     // 自定义弹出控件的事件
    calendar: true,  // calendar - 是否显示公历节日
    // 点击某一个日期,响应的回调函数
    done: function(value, date){
        console.log(date);
        if(date.year === 2018 && date.month === 9 && date.date === 21){
            layer.msg('结婚纪恋日快乐,记得买花');
        }
    }

change: function(value,date,endate){ //日期选择发生变化事件

}
});

 // 日期有效范围限定在:过去一周到未来一周
    laydate.render({
        elem: "#date11",
        min: -7,
        max: 7
    });
    /**
 最小/大范围内的日期时间值
    如果值为字符类型,则:年月日必须用 -(中划线)分割、时分秒必须用 :(半角冒号)号分割。
    如果值为整数类型,且数字<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"
});

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张大大大大旭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值