增加系统日志页面时间选择控件

This commit is contained in:
Argo-Lenovo 2016-11-10 22:41:08 +08:00
parent a5d9ecd7e4
commit 8493655686
9 changed files with 11871 additions and 6 deletions

View File

@ -104,6 +104,7 @@
<Content Include="Content\css\admin-responsive.css" />
<Content Include="Content\css\admin.css" />
<Content Include="Content\css\blue.css" />
<Content Include="Content\css\bootstrap-datetimepicker.css" />
<Content Include="Content\css\bootstrap-select.css" />
<Content Include="Content\css\bootstrap-select.min.css" />
<Content Include="Content\css\fa.css" />
@ -123,6 +124,7 @@
<Content Include="Content\html\RegResult.html" />
<Content Include="Content\images\bg.jpg" />
<Content Include="Content\images\lock-bg.jpg" />
<Content Include="Content\js\bootstrap-datetimepicker.js" />
<Content Include="Content\js\bootstrap-select.js" />
<Content Include="Content\js\bootstrap-select.min.js" />
<Content Include="Content\js\defaults-zh_CN.js" />
@ -149,6 +151,7 @@
<Content Include="Content\js\jquery.scrollTo.min.js" />
<Content Include="Content\js\log.js" />
<Content Include="Content\js\longbow.dataentity.js" />
<Content Include="Content\js\moment-with-locales.js" />
<Content Include="Global.asax" />
<Content Include="Content\fonts\glyphicons-halflings-regular.woff2" />
<Content Include="Content\fonts\glyphicons-halflings-regular.woff" />

View File

@ -61,6 +61,10 @@
.modal-dialog {
width: 300px;
}
input[type="datetime"] {
min-width: inherit;
}
}
@media (max-width: 400px) {

View File

@ -227,3 +227,7 @@ ul.sidebar-menu {
padding-top: 7px;
padding-bottom: 7px;
}
input[type="datetime"] {
min-width: 220px;
}

View File

@ -0,0 +1,341 @@
/*!
* Datetimepicker for Bootstrap 3
//! version : 4.0.0-beta
* https://github.com/Eonasdan/bootstrap-datetimepicker/
*/
.bootstrap-datetimepicker-widget.dropdown-menu {
margin: 2px 0;
padding: 4px;
width: 19em;
}
@media (min-width: 768px) {
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
width: 38em;
}
}
@media (min-width: 992px) {
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
width: 38em;
}
}
@media (min-width: 1200px) {
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
width: 38em;
}
}
.bootstrap-datetimepicker-widget.dropdown-menu:before,
.bootstrap-datetimepicker-widget.dropdown-menu:after {
content: '';
display: inline-block;
position: absolute;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
top: -7px;
left: 7px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
top: -6px;
left: 8px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2);
bottom: -7px;
left: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid white;
bottom: -6px;
left: 7px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
left: auto;
right: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
left: auto;
right: 7px;
}
.bootstrap-datetimepicker-widget .list-unstyled {
margin: 0;
}
.bootstrap-datetimepicker-widget a[data-action] {
padding: 6px 0;
}
.bootstrap-datetimepicker-widget a[data-action]:active {
box-shadow: none;
}
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
width: 54px;
font-weight: bold;
font-size: 1.2em;
margin: 0;
}
.bootstrap-datetimepicker-widget button[data-action] {
padding: 6px;
}
.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
content: "Increment Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
content: "Increment Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
content: "Decrement Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
content: "Decrement Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
content: "Show Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
content: "Show Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
content: "Toggle AM/PM";
}
.bootstrap-datetimepicker-widget .picker-switch {
text-align: center;
}
.bootstrap-datetimepicker-widget .picker-switch::after {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
content: "Toggle Date and Time Screens";
}
.bootstrap-datetimepicker-widget .picker-switch td {
padding: 0;
margin: 0;
height: auto;
width: auto;
line-height: inherit;
}
.bootstrap-datetimepicker-widget .picker-switch td span {
line-height: 2.5;
height: 2.5em;
width: 100%;
}
.bootstrap-datetimepicker-widget table {
width: 100%;
margin: 0;
}
.bootstrap-datetimepicker-widget td,
.bootstrap-datetimepicker-widget th {
text-align: center;
border-radius: 4px;
}
.bootstrap-datetimepicker-widget th {
height: 20px;
line-height: 20px;
width: 20px;
}
.bootstrap-datetimepicker-widget th.picker-switch {
width: 145px;
}
.bootstrap-datetimepicker-widget th.disabled,
.bootstrap-datetimepicker-widget th.disabled:hover {
background: none;
color: #777777;
cursor: not-allowed;
}
.bootstrap-datetimepicker-widget th.prev::after {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
content: "Previous Month";
}
.bootstrap-datetimepicker-widget th.next::after {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
content: "Next Month";
}
.bootstrap-datetimepicker-widget thead tr:first-child th {
cursor: pointer;
}
.bootstrap-datetimepicker-widget thead tr:first-child th:hover {
background: #eeeeee;
}
.bootstrap-datetimepicker-widget td {
height: 54px;
line-height: 54px;
width: 54px;
}
.bootstrap-datetimepicker-widget td.cw {
font-size: .8em;
height: 20px;
line-height: 20px;
color: #777777;
}
.bootstrap-datetimepicker-widget td.day {
height: 20px;
line-height: 20px;
width: 20px;
}
.bootstrap-datetimepicker-widget td.day:hover,
.bootstrap-datetimepicker-widget td.hour:hover,
.bootstrap-datetimepicker-widget td.minute:hover,
.bootstrap-datetimepicker-widget td.second:hover {
background: #eeeeee;
cursor: pointer;
}
.bootstrap-datetimepicker-widget td.old,
.bootstrap-datetimepicker-widget td.new {
color: #777777;
}
.bootstrap-datetimepicker-widget td.today {
position: relative;
}
.bootstrap-datetimepicker-widget td.today:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-bottom: 7px solid #428bca;
border-top-color: rgba(0, 0, 0, 0.2);
position: absolute;
bottom: 4px;
right: 4px;
}
.bootstrap-datetimepicker-widget td.active,
.bootstrap-datetimepicker-widget td.active:hover {
background-color: #428bca;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.bootstrap-datetimepicker-widget td.active.today:before {
border-bottom-color: #fff;
}
.bootstrap-datetimepicker-widget td.disabled,
.bootstrap-datetimepicker-widget td.disabled:hover {
background: none;
color: #777777;
cursor: not-allowed;
}
.bootstrap-datetimepicker-widget td span {
display: inline-block;
width: 54px;
height: 54px;
line-height: 54px;
margin: 2px 1.5px;
cursor: pointer;
border-radius: 4px;
}
.bootstrap-datetimepicker-widget td span:hover {
background: #eeeeee;
}
.bootstrap-datetimepicker-widget td span.active {
background-color: #428bca;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.bootstrap-datetimepicker-widget td span.old {
color: #777777;
}
.bootstrap-datetimepicker-widget td span.disabled,
.bootstrap-datetimepicker-widget td span.disabled:hover {
background: none;
color: #777777;
cursor: not-allowed;
}
.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
height: 27px;
line-height: 27px;
}
.input-group.date .input-group-addon {
cursor: pointer;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

File diff suppressed because it is too large Load Diff

View File

@ -11,6 +11,11 @@ $(function () {
// cookie: 'dcjq-accordion-1',
classExpand: 'dcjq-current-parent'
});
$('input[type="datetime"]').parent().datetimepicker({
locale: "zh-cn",
format: "YYYY-MM-DD"
});
});
(function ($) {

File diff suppressed because it is too large Load Diff

View File

@ -5,10 +5,13 @@
}
@section css {
<link href="~/Content/css/bootstrap-table.css" rel="stylesheet" />
<link href="~/Content/css/bootstrap-datetimepicker.css" rel="stylesheet" />
}
@section Javascript {
<script src="~/content/js/bootstrap-table.js"></script>
<script src="~/content/js/bootstrap-table-zh-CN.js"></script>
<script src="~/Content/js/moment-with-locales.js"></script>
<script src="~/Content/js/bootstrap-datetimepicker.js"></script>
<script src="~/scripts/Logs.js"></script>
}
@section header {
@ -22,19 +25,32 @@
<div class="panel-body">
<form class="form-inline" role="form">
<div class="row">
<div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<label class="control-label" for="txt_operate_type">操作类型</label>
<input type="text" class="form-control" id="txt_operate_type" />
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-6 col-md-5 col-lg-5">
<label class="control-label" for="txt_operate_start">起始时间</label>
<input type="datetime" class="form-control" id="txt_operate_start" />
<div class="input-group date">
<input type="datetime" class="form-control" id="txt_operate_start" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-calendar" aria-hidden="true"></i></button>
</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="form-group col-xs-12 col-sm-6 col-md-5 col-lg-5">
<label class="control-label" for="txt_operate_end">终止时间</label>
<input type="datetime" class="form-control" id="txt_operate_end" />
<div class="input-group input-append date form_datetime">
<input type="datetime" class="form-control" id="txt_operate_start" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-calendar" aria-hidden="true"></i></button>
</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-2 col-lg-2">
<div class="form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
<label class="sr-only"></label>
<button type="button" id="btn_query" class="btn btn-primary form-control"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询</button>
</div>
</div>