05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

时间:2022-04-23 14:00:55

LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui

LoT.UI开源地址如下:https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI

先看在LoT.UI里面的应用效果图:

05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

关键代码解析:(https://github.com/dunitian/LoTCodeBase/blob/master/LoTUI/Manager/Demo/datepicker.html

头部引用CSS:

05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

日期选择器定义

05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

引入Script并初始化

05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

案例代码:

<!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