博文

在前端页面显示日历

已有 3920 次阅读 2018-1-14 15:15 |个人分类:django学习|系统分类:科研笔记

一、layDate 日期与时间组件

layDate 是 layui 独立维护的三大组件之一;

获得 layDate 文件包后，解压并将 laydate 整个文件夹（不要拆分结构）存放到你项目的目录，使用时，只需引入 laydate.js 即可。

示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用 layDate 独立版</title>
</head>
<body>
<input type="text" id="test1">
<script src="/laydate/laydate.js"></script> <!-- 改成你的路径 -->
<script>
//执行一个laydate实例
laydate.render({
  elem: '#test1' //指定元素
});
</script>
</body>
</html>

通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数.

(1)elem - 绑定元素

类型：String/DOM，默认值：无

必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

laydate.render({
elem: '#test1' //指定元素
//或 elem: document.getElementById('test')、elem: lay('#test') 等
})

(2)type - 控件选择类型

类型：String，默认值：date

用于单独提供不同的选择器类型。

//年选择器，只提供年列表选择
laydate.render({ 
  elem: '#test'
  ,type: 'year'
});

//年月选择器，只提供年月列表选择
laydate.render({ 
  elem: '#test'
  ,type: 'month'
});

//日期选择器，可选择年月日，为默认值
laydate.render({ 
  elem: '#test'
  //,type: 'date' //默认，可不填
});

//时间选择器，可选择时分秒等等
laydate.render({ 
  elem: '#test'
  ,type: 'time'
});

//日期时间选择器，可选择年月日，时分秒等
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
});