05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器
时间:2022-05-07
本文章向大家介绍05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui
LoT.UI开源地址如下:https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI
先看在LoT.UI里面的应用效果图:
关键代码解析:(https://github.com/dunitian/LoTCodeBase/blob/master/LoTUI/Manager/Demo/datepicker.html)
头部引用CSS:
日期选择器定义
引入Script并初始化
案例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>datepicker</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="/open/bootstrap-datepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="col-lg-1"></div>
<div class="col-lg-3">
<div class="input-group">
<span class="input-group-addon">时间</span><input type="text" class="form-control lot-time" placeholder="请选择时间...">
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/open/bootstrap-datepicker/bootstrap-datetimepicker.min.js"></script>
<script src="/open/bootstrap-datepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
//时间控件
$(function () {
$('.lot-time').datetimepicker({
format: "yyyy-mm-dd hh:ii",
todayBtn: "linked",
language: "zh-CN",
autoclose: true
});
})
</script>
</body>
</html>
推荐组件:https://github.com/smalot/bootstrap-datetimepicker
原有组件:https://github.com/eternicode/bootstrap-datepicker
- linux学习第四十一篇:配置防盗链,访问控制Directory,访问控制FilesMatch
- linux学习第四十二篇:限定某个目录禁止解析php, 限制user_agent,PHP相关配置
- 简易但不简单的配置中心No.79
- linux学习第四十三篇:LNMP架构介绍,mysql安装,php安装,Nginx介绍
- linux学习第四十四篇:Nginx安装,Nginx默认虚拟主机,Nginx域名重定向
- linux学习第四十二篇:PHP扩展模块安装
- linux学习第四十五篇:Nginx访问日志,Nginx日志切割,静态文件不记录日志和过期时间
- 合格的配置中心应有的素养No.76
- linux学习第四十六篇:Nginx防盗链,Nginx访问控制,Nginx解析php相关配置,Nginx代理
- linux学习第四十七篇:Nginx负载均衡,ssl原理,生产ssl密钥对,Nginx配置ssl
- linux学习第四十八篇:php-fpm的pool,php-fpm慢执行日志,定义open_basedir,php-fpm进程管理
- linux学习第五十一篇:NFS介绍,NFS服务端安装配置,NFS配置选项
- linux学习第五十二篇: exportfs命令,NFS客户端问题,FTP介绍,使用vsftpd搭建ftp服务
- linux学习第五十四篇:Tomcat介绍,安装jdk,安装Tomcat
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法