javascript实现的日历控件,为什么不显示?
下边是源码<!DOCTYPEhtml><html><head><linkrel="stylesheet"type="text/css"href="http://ajax....
下边是源码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"/>
<title>Date Picker</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
</head>
<body>
Date:<input type="text" id="datepicker"/>
</body>
</html>
求指教啊 展开
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"/>
<title>Date Picker</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
</head>
<body>
Date:<input type="text" id="datepicker"/>
</body>
</html>
求指教啊 展开
5个回答
展开全部
可能是你的jquery-latest.min.js和你的jquery-ui.min.js不兼容造成的,你可以换个jquery-ui.js的版本,用官网给出的那个http://code.jquery.com/ui/1.10.3/jquery-ui.js 就可以显示日历的插件,没有问题的,我都已经替你测过啦
直接用你给的源代码,在浏览器调试会报TypeError: $.browser is undefined的错误,你也没必要追本溯源,直接换个jquery-ui的版本就行啦
直接用你给的源代码,在浏览器调试会报TypeError: $.browser is undefined的错误,你也没必要追本溯源,直接换个jquery-ui的版本就行啦
展开全部
日期控件,主要使用js的Date对象。下面是简单是日期控件,仅供参考:
<style>
* { margin:0; padding:0; }
.calander { position:relative; width:210px; border:1px solid red; margin:50px auto; }
.calander a { position:absolute; top:0; height:40px; line-height:40px; }
.calander .prev { left:0; padding-left:10px; }
.calander .next { right:0; padding-right:10px; }
.calander span { display:block; height:40px; line-height:40px; text-align:center; font-weight:bold; }
.calander ul, .calander ol { overflow:hidden; }
.calander li { float:left; width:30px; height:30px; line-height:30px; text-align:center; list-style:none; }
.calander .week { color:#f40; }
.calander .today { color:blue; }
.calander .past { color:#ccc; }
</style>
<script>
window.onload=function (){
var oDiv=document.getElementById('calander');
var oSpan=oDiv.getElementsByTagName('span')[0];
var oUl=oDiv.getElementsByTagName('ul')[0];
var oPrev=oDiv.getElementsByTagName('a')[0];
var oNext=oDiv.getElementsByTagName('a')[1];
var now=0;
create();
oNext.onclick=function (){
now++;
create();
};
function create()
{
oUl.innerHTML='';
// span
var oDate=new Date(); // ?
oDate.setMonth(oDate.getMonth()+now, 1);
var y=oDate.getFullYear();
var m=oDate.getMonth();
oSpan.innerHTML=y+'年'+(m+1)+'月';
// 创建空格
var oDate=new Date(); // ?
oDate.setMonth(oDate.getMonth()+now, 1);
oDate.setDate(1);
var week=oDate.getDay(); // 0-6
(week==0) && (week=7);
for (var i=0; i<week-1; i++)
{
var oLi=document.createElement('li');
oUl.appendChild(oLi);
}
// 创建真正日期
var oDate=new Date();//?
oDate.setMonth(oDate.getMonth()+now, 1);
oDate.setMonth(oDate.getMonth()+1, 0);
var total=oDate.getDate();
for (var i=0; i<total; i++)
{
var oLi=document.createElement('li');
oLi.innerHTML=i+1;
oUl.appendChild(oLi);
}
// 处理周末
var aLi=oUl.children;
for (var i=0; i<aLi.length; i++)
{
if (i%7==5 || i%7==6)
{
aLi[i].className='week';
}
}
// 今天
if (now == 0)
{
var oDate=new Date();
for (var i=0; i<aLi.length; i++)
{
if (aLi[i].innerHTML == oDate.getDate())
{
aLi[i].className='today';
}
else if (aLi[i].innerHTML < oDate.getDate())
{
aLi[i].className='past';
}
}
}
}
};
</script>
</head>
<body>
<div class="calander" id="calander">
<a href="javascript:;" class="prev">←</a>
<a href="javascript:;" class="next">→</a>
<span>2015年04月</span>
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li class="week">六</li>
<li class="week">日</li>
</ol>
<ul>
</ul>
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
你好!!
出现这个现象,是你的jQuery与jQuery UI版本不匹配造成的!
你使用的jquery-latest.min.js的版本是1.10.2,而jQuery UI的版本是1.8.17,
由于jQuery 1.10较之前本版本改动不少,因此很多方法在jQuery UI中已经无法使用。
解决的方法很简单:
1. 要么降低jQuery的版本,使用1.8版本的;
2. 要么升高jQuery UI的版本,使用1.10版本的;
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
报什么错啊?还有看你引入的js只有jquery和ui,是不是少了
jquery.ui.datepicker.min.js
jquery.ui.datepicker-zh-CN.min.js
jquery.ui.datepicker-fr.min.js
这三个啊
jquery.ui.datepicker.min.js
jquery.ui.datepicker-zh-CN.min.js
jquery.ui.datepicker-fr.min.js
这三个啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询