感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- 全日历 -->
<input type="text" value="" id="output" readonly/>
<div id="container">
<a href="javascript:change(-1)">prev</a>
<a href="javascript:change(1)">next</a>
<table id="table">
<thead>
<tr>
<th colspan="7"></th>
</tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</thead>
<tbody>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
</div>
xxxxxxxxxx
//detct
var arr =[];
var date = new Date();
init();
/**初始化**/
function init(){
arr.push(date.getFullYear());
arr.push(date.getMonth()+1);
arr.push(date.getDate()) ;
display();
}
/**a标签改变日历表**/
function change(step){
arr[1] =arr[1]+parseInt(step);
if (arr[1]<1||arr[1]>12){
arr[1] = Math.abs(12-parseInt(arr[1]));
arr[0] = arr[0]+parseInt(step);
date.setFullYear(arr[0]);
date.setMonth(arr[1]);
/**获得被选中的日期**/
$("tbody td").click(function(){
arr[2] = $(this).text();
trans();
$("div").hide();
})
/**点击input开始选择日期**/
$("input").click(function(){
$("div").show();
function trans(){
/**input,表头显示日期**/
var value= arr.join("-");
$("thead th").eq(0).text(value);
$("input").val(value);
function display (){
/**重置样式**/
$("tbody td").text("");
$("tbody td").removeClass("select");
var week = date.getDay()-1;
var day = checkDay(arr[0],arr[1]);
/**根据天数的一号星期几填写td**/
$("tbody td").each(function(){
var text = $(this).index()+7*$(this).parent("tr").index()-week;
if (text>0&&text<=day)
$(this).text(text);
if (text==arr[2])
$(this).addClass("select");
/**获得当前日期的天数**/
function checkDay(year,month){
var isLeap;
if (year%4===0&&year%100!==0)
isLeap =true;
else if (year%400===0)
else
isLeap =false;
if (month==2)
{
if (isLeap)
return 29;
return 28;
else{
if ((month%2===0&&month<8)||(month%2!==0&&month>8))
return 30;
return 31;
input{
background:#eee;
display:block;
cursor:pointer;
position:relative;
border:none;
margin:10px auto;
div{
left:50%;
transform:translateX(-50%);
position:absolute;
border:1px solid #69c;
display:none;
th,td{
width:30px;
height:10px;
text-align:center;
.select{
background:#69c;
color:white;