layDate - JS 日期和时间选择器组件/插件 - 在线演示

演示

调试预览
布局

栅格

框架
基本元素

按钮

表单

导航 / 面包屑

基础菜单

选项卡

进度条

面板

徽章

时间线

静态表格

动画

辅助元素
组件示例

弹出层

日期与时间选择

数据表格

分页

下拉菜单

文件上传

穿梭框

树形组件

颜色选择器

滑块

评分

轮播

模板引擎

流加载

工具模块

文本行修饰

预览
查看代码
帮助

layDate 是目前 layui 独立维护的三大组件之一。在 layui 2.0 的版本中，layDate 也完成了一次重写。 layDate 官网

常规用法

中文版

国际版

其它选择器

年选择器

年月选择器

时间选择器

日期时间选择器

范围选择

日期范围

年范围

年月范围

时间范围

日期时间范围

自定义格式

请选择日期

请选择月份

请选择时间

请选择范围

公历节日和自定义重要日子

开启公历节日

自定义重要日

控制可选的日期与时间

限定可选日期

前后若干天可选

限定可选时间

这里以控制在9:30-17:30为例

同时绑定多个

其它功能示例

初始赋值

选中后的回调

日期切换的回调

不出现底部栏

只出现确定按钮

自定义事件

点我触发

双击我触发

日期只读

非input元素

其它主题

墨绿主题

自定义颜色主题

格子主题

直接嵌套显示

更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../res/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4638549725433695" crossorigin="anonymous"></script><script src="//www.p2hp.com/tj.js"></script></head>

与独立组件layDate最大的不同在于，你现在需要自己绑定事件。