日期选择框架

最新推荐文章于 2024-05-08 23:49:10 发布

LDH-

最新推荐文章于 2024-05-08 23:49:10 发布

阅读量2.6k

点赞数

分类专栏： layDate插件文章标签： ladDate日期日期和星期几

本文链接：https://blog.csdn.net/weixin_38362146/article/details/78003789

版权

layDate插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

全面重写的 layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。内置强劲的自定义日期格式解析和合法校正机制，含中文版和国际版，主题简约却又不失灵活多样。

插件地址：

http://www.layui.com/laydate/

用法：

type-类型

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text" id="calendar"/>
<label ></label>
<input type="text" id="b"/>
</body>
<script src="../assets/jq/jquery-1.9.1.min.js"></script>
<script src="../assets/laydate/laydate.js"></script>
<script>
    laydate.render({
        elem:"#calendar",
        type:"time",
    })
</script>
</html>

显示图：

range -开启左右面板范围选择

类型：默认值：false

false显示图：

如果设置 true，将默认采用 “ - ” 分割。你也可以直接设置分割字符。五种选择器类型均支持左右面板的范围选择。

true显示图：

format

类型：String，默认值：yyyy-MM-dd

通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：

格式符	说明
yyyy	年份，至少四位数。如果不足四位，则前面补零
y	年份，不限制位数，即不管年份多少位，前面均不补零
MM	月份，至少两位数。如果不足两位，则前面补零。
M	月份，允许一位数。
dd	日期，至少两位数。如果不足两位，则前面补零。
d	日期，允许一位数。
HH	小时，至少两位数。如果不足两位，则前面补零。
H	小时，允许一位数。
mm	分钟，至少两位数。如果不足两位，则前面补零。
m	分钟，允许一位数。
ss	秒数，至少两位数。如果不足两位，则前面补零。
s	秒数，允许一位数。

通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如下所示：

格式	示例值
yyyy-MM-dd HH:mm:ss	2017-08-18 20:08:08
yyyy年MM月dd日 HH时mm分ss秒	2017年08月18日 20时08分08秒
yyyyMMdd	20170818
dd/MM/yyyy	18/08/2017
yyyy年M月	2017年8月
M月d日	8月18日
北京时间：HH点mm分	北京时间：20点08分
yyyy年的M月某天晚上，大概H点	2017年的8月某天晚上，大概20点

yyyy-MM-dd HH:mm:ss显示图：

Mark-标注重要的日子
calendar 参数所代表的公历节日更多情况下是一个摆设。因此，我们还需要自定义标注重要日子，比如结婚纪念日？日程等？它分为以下两种：

标注	格式	说明
每年的日期	{'0-9-18': '国耻'}	0 即代表每一年
每月的日期	{'0-0-15': '中旬'}	0-0 即代表每年每月（layui 2.1.1/layDate 5.0.4 新增）
特定的日期	{'2017-8-21': '发布')	-

//标注重要日子
var ins1 = laydate.render({
  elem: '#test'
  ,mark: {
    '0-10-14': '生日'
    ,'0-12-31': '跨年' //每年12月31日
    ,'0-0-10': '工资' //每个月10号
    ,'2017-8-15': '' //具体日期
    ,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章
    ,'2017-8-21': '发布'
  }
  ,done: function(value, date){
    if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
      ins1.hint('中国人民抗日战争胜利72周年');
    }
  }
});

非常实用的存在，是时候利用它制作你的日程表了。

星期几显示

<input type="text" id="a"/>
<label ></label>

 laydate.render({
        elem: "#calendar",
        elem: "#calendar2",
        type:"date",
        value:new Date(),
        done:function(value,date){
       //需要找到date对应是周一
       var day =(new Date(value)).getDay();//获取date是这周的第几天（0-6）
   var dayStr = dayToChange(day)
            $(this.elem).next().html(dayStr);
            console.log(this)
        }
    })
    //（0-6）变成（周一-周天）
    function dayToChange(day){
        var dayList =["周日","周一","周二","周三","周四","周五","周六"];
        return dayList[day]
       
    }

显示图

LDH-

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
日期选择框架

全面重写的 layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。内置强劲的自定义日期格式解析和合法校正机制，含中文版和国际版，主题简约却又不失灵活多样。插件地址： http://www.layui.com/laydate/用法：
复制链接

扫一扫