首先,说下有些人说这是重复造轮子,但我觉得不是,做项目,总不能老是拿别人的东西来吧,拿来主义并不是神马好玩意,当然如果你想轻松,也没话说,至少说我自己做得,我改起来或者扩展比较方便
效果以及代码如下,,预览效果自己放在html里面把,搞在这个页面上麻烦得很
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
/*日期控件*/
.pc_caldr { background-color: #FFFFFF; border: 1px solid #CCCCCC; color: #000000; height: auto; padding: 5px; position: absolute; width: 161px; z-index: 10; }
.pc_caldr .selector { height: 24px; padding: 2px 0 0; }
.pc_caldr .selector .month, .pc_caldr .selector .year { border: 1px solid #CCCCCC; float: left; font-size: 12px; height: 19px; width: 73px; }
.pc_caldr .selector .year { margin-left: 10px; width: 78px; }
.pc_caldr .weeks, .pc_caldr .days { list-style: none outside none; margin: 0; padding: 0; width: 100% !important; }
.pc_caldr .weeks { background: none repeat scroll 0 0 #B6D1F9; color: #FFFFFF; font-size: 12px; height: 18px; margin-bottom: 2px; }
.pc_caldr .days { font-family: Arial; font-size: 12px; height: auto; }
.pc_caldr .weeks li, .pc_caldr .days li { float: left; height: 18px; line-height: 18px; text-align: center; width: 23px; }
.pc_caldr .weeks li { text-align: center; }
.pc_caldr table { width: 100%; }
.pc_caldr table td{text-align:center;}
.pc_caldr table td.before { color: #43609C; cursor: pointer; }
.pc_caldr table td.day { background-color: #5D94E6; color: #FFFFFF; }
/*文本框*/
.tiemin{width:120px;border:1px solid #f00;}
.inline-block {display :inline-block; zoom:1 ; *display: inline; vertical-align:middle ;}
</style>
</head>
<body>
<div style="height: 200px;">
</div>
<input type="text" class="tiemin" readonly="readonly" />
<div style="height: 200px;">
</div>
<span style="width: 200px;" class="inline-block"></span>
<input type="text" class="tiemin" readonly="readonly" />
<script type="text/javascript">
//全部包裹
var sookerTime = (function ($) {
var OBJ;
function isLeap(year) { return (year % 100 == 0 ? (year % 400 == 0 ? 1 : 0) : (year % 4 == 0 ? 1 : 0)); }
function isValid(d) { return (d.getTime() - (new Date()).getTime() < 0) ? true : false; } //是否在今天以后
function setDate(year, month) { //建立日期table
var n1 = new Date(year, month, 1),
firstday = n1.getDay(),
mdays = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),