HTML:
- 今天
- 昨天
- 最近3天
- 最近7天
- //日期选择插件
//date
var dateRange1 = new pickerDateRange('date1', {
stopToday : false,
isTodayValid : true,
startDate: Today,
endDate: Today,
needCompare : false,
// defaultText : ' 离开 ',
autoSubmit : false,
inputTrigger : 'input_trigger1',
theme : 'ta'
});
CSS:
/*========== reset ==========*/
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, iframe,hr{margin:0;padding:0;}
body{font:12px/1.6 Tahoma,microsoft yahei,"微软雅黑","宋体";*font-family:"微软雅黑","宋体";}
fieldset, img { border:0; }
address, caption, cite, dfn, em, th, var{font-style:normal;font-weight:normal;}
ol, ul { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 { font-size:100%; }
table {border-collapse:collapse;border-spacing:0;}
select,input,label,button,textarea{margin:0;padding:0;font:normal normal normal "微软雅黑",arial,Simsun,Arial Unicode MS,Mingliu,Arial;overflow:visible;}
input{padding:2px 0 1px;*padding:4px 0 0;_padding:4px 0 0;_height:21px;}
/**
* GRI主题
*/
.gri_contrast {
float: left;
margin: 4px 8px 0 8px;
line-height: 20px;
color: #666;
cursor: pointer;
font: 12px/1.5 Tahoma, Helvetica, 'SimSun', sans-serif;
}
.gri_date {
/* margin: 4px 4px;*/
padding: 0 26px 0 6px;
width: 195px;
height: 20px;
line-height: 20px;
border: 1px solid #D6D6D6;
background: #FFF url('./images/icon_date.png') no-repeat 100% 50%;
cursor: pointer;
color: #666;
}
.gri_date_month {
width: 180px
}
.gri_dateRangeCalendar {
position: absolute;
display: none;
background: #FFF;
border: 1px solid #6FB1DF;
padding: 10px;
-moz-box-shadow: 0px 1px 3px #6FB1DF;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 5, Direction = 135, Color = "#CCCCCC");
font: 12px/1.5 Tahoma, Helvetica, 'SimSun', sans-serif;
}
.gri_dateRangeCalendar a {
color: #369;
}
.gri_dateRangePicker {
float: left;
border: 0;
margin: 0;
padding: 0;
}
.gri_dateRangeOptions {
float: left;
}
.gri_dateRangeOptions input.gri_dateRangeInput {
width: 80px;
text-align: center;
border: 1px solid #DDD;
}
.gri_dateRangeOptions div.gri_dateRangeInput {
margin-bottom: 5px;
}
.gri_dateRangePreMonth {
float: left;
width: 15px;
height: 17px;
background: url('./images/page.png') no-repeat 0 0;
overflow: hidden;
}
.gri_dateRangeNextMonth {
float: right;
width: 15px;
height: 17px;
background: url('./images/page.png') no-repeat -15px 0;
overflow: hidden;
}
.gri_dateRangePreMonth span, .gri_dateRangeNextMonth span {
display: none;
}
.gri_dateRangeDateTable {
margin: 0 10px 0 0px;
padding: 0px;
float: left;
empty-cells: show;
border-collapse: collapse;
display: inline;
font-size: 12px;
}
.gri_dateRangeDateTable td {
border: 1px solid #EEE;
text-align: right;
cursor: pointer;
padding: 1px 2px;
}
.gri_dateRangeDateTable th {
border-top: 1px solid #DEE6F6;
border-left: 1px solid #DEE6F6;
background: #E0E8F7;
font-weight: 400;
border-left: 1px solid #DDD;
}
.gri_dateRangeDateTable td.gri_dateRangeGray {
color: #BBB;
cursor: default;
}
.gri_dateRangeDateTable td.gri_dateRangeToday {
color: #F90;
font-weight: bold;
}
.gri_dateRangeSelected {
background-color: #007CD9;
color: #FFF;
}
.gri_dateRangeCompare {
background-color: #B9E078;
color: #FFF;
}
.gri_dateRangeCoincide {
background-color: #FFFFC4;
}
.gri_pn {
background: url("../img/pn.png") repeat-x scroll 0 -48px #E5E5E5;
color: #fff;
}
.gri_pnc {
background: url("../img/pn.png") repeat-x scroll 0 0 #E5E5E5;
}
.gri_co {
border: 1px solid #999999;
box-shadow: 0 1px 0 #E5E5E5;
cursor: pointer;
font-family: Tahoma, 'Microsoft Yahei', 'Simsun';
font-size: 12px;
height: 21px;
overflow: hidden;
vertical-align: middle
}
/**
* =================================================
* TA主题
* =================================================
*/
.ta_date{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fefefe;
background-image: -ms-linear-gradient(top, #fafafa, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#f5f5f5));
background-image: -moz-linear-gradient(top, #fafafa, #f5f5f5);
background-image: -o-linear-gradient(top, #fafafa, #f5f5f5);
background-image: linear-gradient(top, #fafafa, #f5f5f5);
background-repeat: repeat-x;
float:left;
}
.ta_date .date_title {
font-family:Arial;
font-size:14px;
color:#666666;
padding:6px 10px;
*padding:0px 10px;
border-right:1px solid #d8d8d8;
vertical-align:middle;
cursor:pointer;
*zoom:1;
}
.ta_date .date_title:before{content: " "}
.ta_date:hover {
/* background-image:none;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);*/
background: #9DC970;
}
.ta_date:hover .date_title{
color: #fff;
}
.ta_date .to{ padding:0 5px;}
.ta_date .opt_sel{/*====*/
width:30px;
height:28px;
line-height:28px;
display:inline-block;
text-align:center;
vertical-align:middle;
margin-left:-4px;
}
.ta_date a.opt_sel:link, .ta_date a.opt_sel:visited {
}
.ta_date a.opt_sel:active, .ta_date a.opt_sel:hover {
}
.ta_date .i_orderd{
display: inline-block;
width: 0;
height: 0;
vertical-align:middle;
border-top: 5px solid #727272;
border-right: 5px dashed transparent;
border-left: 5px dashed transparent;
font-size:0;
content: "";
overflow:hidden;
*margin-top:10px;
}
.ta_calendar2{*width:536px;}
.ta_calendar1{*width:268px;}
.ta_calendar{background-color: #ffffff;
font-size:12px;
text-align:left;
z-index:100;
position: absolute;
right: 0;
}
.i_pre,.i_next,.ta_calendar td.ta_dateRangeSelected,.ta_calendar td.first,.ta_calendar td.last,.ta_calendar td.today{
/*background:url(http://imgcache.qq.com/bossweb/mta/images/calendar_all.png) no-repeat;*/
background:url(../img/calendar_all.png) no-repeat;
cursor:pointer;
}
.i_pre,.i_next{ width:23px; height:23px;display:inline-block; }
.i_pre{ background-position:0 0;}
.i_pre:hover{ background-position:-46px 0px;}
.i_next{ background-position:-23px 0;}
.i_next:hover{ background-position:-69px 0px;}
.ta_calendar td.ta_dateRangeSelected{
background:#cbe6f5;
}
.ta_calendar td.ta_dateRangeGray{
color: #BBB;
cursor: default;
}
.ta_calendar td.first,.ta_calendar td.today{
background:#4eb5f7;
}
.ta_calendar td.first:after,.ta_calendar td.today:after{content: "";display: block; font-size: 10px;color:#fff;}
.ta_calendar td.last{
background:#4eb5f7;
}
.ta_calendar td.last:after{content: "";display: block; font-size: 10px;color:#fff;}
.ta_calendar .dis{
color:#9e9e9e;
}
.ta_calendar table {
font-size: 12px;
_display:inline;
border-spacing:0 7px;
border-collapse:collapse;
width: 100%;
}
.ta_calendar table caption{ text-align:center; height:40px; line-height:40px; font-size:14px; box-shadow:0px 1px 1px rgba(0,0,0,0.1);}
.ta_calendar table thead tr {
background:#fff;
}
.ta_calendar table thead th {
cursor: pointer;
text-align:center;
height: 40px;
}
.ta_calendar table.calendar-month {
font-size: 12px;
float:left;
margin:0 8px;
_display:inline;
border-spacing:7px;
border-collapse:separate;
margin-bottom:10px;
}
.calendar-month caption{
border-bottom:1px solid #E1E1E1;
*padding-bottom:0px;
}
.calendar-month tbody td {
line-height: 30px;
padding: 4px 11px;
text-align:center;
white-space:nowrap;
font-family:"���ź�";
cursor:pointer;
}
.calendar-month td.hover,.calendar-month td:hover,.calendar-month caption span:hover{
background:#;
color:#6590c1;
border:1px solid #6590c1;
padding: 3px 10px;
border-radius:2px;
cursor:pointer;
}
.calendar .dis:hover{
color:#9e9e9e;
border:1px solid #d3d5d6;
padding: 3px 10px;
}
.calendar-month td.current{
background:#6590c1;
color:#fff;
border-radius:2px;
}
.ta_calendar table thead th.sun{color: #999;}
.ta_calendar table thead th.sat{color: #999;}
.ta_calendar table td:first-child{height: 0px;}
.ta_calendar table tbody td {
text-align:center;
white-space:nowrap;
font-family:"Tahoma";
background: #edf8fe;
height: 40px;
width: 14%;
border: 1px solid #fff;
}
.ta_calendar_cont{position:relative;}
.ta_calendar_cont .i_pre,.ta_calendar_cont .i_next{position:absolute; top:7px;}
.ta_calendar_cont .i_pre{left:10px;}
.ta_calendar_cont .i_next{right:10px;}
.ta_calendar_footer{
border-top:1px solid #e5e5e5;
background:#fafafa;
padding-top:6px;
height:34px;
}
.ta_calendar_footer .frm_btn{
float:right;
}
.ta_calendar_footer .frm_msg{
float:left;
vertical-align:middle;
}
.ta_calendar_footer .ipt_text_s{
padding:4px 4px;
}
.ta_ipt_text, .ta_ipt_textarea, .ta_ipt_text_s {
border: 1px solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #555555;
font-size: 12px;
height: 16px;
line-height: 16px;
padding: 6px 4px;
position: relative;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
vertical-align: middle;
width: 180px;
z-index: 2;
}
.ta_ipt_text_s {
width: 80px;
}
.ta_btn {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #F5F5F5;
background-image: -moz-linear-gradient(center top , #FEFEFE, #F5F5F5);
background-repeat: repeat-x;
border-color: #CACACA #CACACA #B3B3B3;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
color: #333333;
cursor: pointer;
display: inline-block;
font-family: "���ź�","����";
font-size: 12px;
line-height: 20px;
margin-bottom: 0;
outline: 0 none;
padding: 3px 12px;
text-align: center;
}
.ta_btn:hover, .ta_btn:active, .ta_btn.active, .ta_btn.disabled, .ta_btn[disabled] {
color: #333333;
}
.ta_btn:hover {
background-color: #FEFEFE;
background-image: none;
color: #333333;
text-decoration: none;
transition: background-position 0.1s linear 0s;
}
.ta_btn:focus {
outline: thin dotted #333333;
outline-offset: -2px;
}
.ta_btn.active, .ta_btn:active {
background-color: #E6E6E6;
background-image: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
outline: 0 none;
}
.ta_btn.disabled, .ta_btn[disabled] {
background-color: #E6E6E6;
background-image: none;
box-shadow: none;
cursor: default;
opacity: 0.65;
}
.ta_btn {
margin: 0px 5px 0 0;
vertical-align: top;
}
.ta_btn:hover{
background-position: 0 -16px;
}
.ta_btn_primary {
background-color: #B4D66F;
background-image: -moz-linear-gradient(center top , #C7E184, #A2CC59);
border: 1px solid #88AB4A;
color: #56740F;
}
.ta_btn_primary:hover{
background-color: #5C96DB;
background-image: -moz-linear-gradient(center top , #74A5ED, #4789CD);
border: 1px solid #286AB1;
color: #FFFFFF;
}
.cf:after {
clear: both;
}
.cf:before, .cf:after {
content: "";
display: table;
}
.cf:before, .cf:after {
content: "";
display: table;
}
JS:
/**
*=======================================================================
*日期选择器js组件。
*@author :johnnyzheng([email protected]) 郑灿双
*@version : 2012-07-11
*@modification list:2012-08-16 规范样式名称
* 2013-01-04 增加主题设置接口
* 2013-01-31 增加自定义灰掉周末 周几的选项,增加自动初始化自动提交的功能
* 2013-03-15 支持一个页面多个日期选择器,快捷日期选择
* 2013-03-26 增加确认、取消按钮的隐藏,而直接自动提交
* 2013-08-01 扩展接口,增加最近90天,增加自定义可选时间
* 2013-08-12 日期选择器框体宽度超出视窗大小的时候制动鼓靠右对齐
* 2014-02-25 增加业务接口:获取当前日期对象的的选中日期
* 2014-10-13 扩展参数,支持日期下拉选择自定义年和月份,配合theme:ta来使用。
*=======================================================================
*/
/**
* @description 整个日期选择器对象的构造函数入口,支持丰富的接口参数传递,大多数提供默认配置,可传入覆盖
* @param {String} inputId 日期选择器ID
* @param {object} options 配置数组
*/
function pickerDateRange(inputId, options) {
/**
* 默认配置参数数据,每个参数涵义在后解释
*/
var defaults = {
aToday : 'aToday', //今天
aYesterday : 'aYesterday', //昨天
aRecent7Days : 'aRecent7Days', //最近7天
aRecent14Days : 'aRecent14Days',//最近14天
aRecent30Days : 'aRecent30Days', //最近30天
aRecent90Days : 'aRecent90Days', //最近90天
startDate : '', // 开始日期
endDate : '', // 结束日期
startCompareDate : '', // 对比开始日期
endCompareDate : '', // 对比结束日期
minValidDate : '315507600', //最小可用时间,控制日期选择器的可选力度
maxValidDate : '', // 最大可用时间,与stopToday 配置互斥
success : function(obj) {return true;}, //回调函数,选择日期之后执行何种操作
startDateId : 'startDate', // 开始日期输入框ID
startCompareDateId : 'startCompareDate', // 对比开始日期输入框ID
endDateId : 'endDate', // 结束日期输入框ID
endCompareDateId : 'endCompareDate', // 对比结束日期输入框ID
target : '', // 日期选择框的目标,一般为