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>
求指教啊
展开
 我来答
郎咸丰
2013-11-29 · TA获得超过101个赞
知道答主
回答量:87
采纳率:0%
帮助的人:85.3万
展开全部
可能是你的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的版本就行啦
百度网友2571d37bb
推荐于2016-09-09 · 知道合伙人软件行家
百度网友2571d37bb
知道合伙人软件行家
采纳数:1971 获赞数:7905
前端工程师

向TA提问 私信TA
展开全部

日期控件,主要使用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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
阿刚炖蛋
推荐于2018-03-13 · TA获得超过3004个赞
知道大有可为答主
回答量:1789
采纳率:92%
帮助的人:996万
展开全部
你好!!
出现这个现象,是你的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版本的;
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
博学弈问
2013-11-29 · 超过15用户采纳过TA的回答
知道答主
回答量:83
采纳率:0%
帮助的人:33.4万
展开全部
报什么错啊?还有看你引入的js只有jquery和ui,是不是少了
jquery.ui.datepicker.min.js
jquery.ui.datepicker-zh-CN.min.js
jquery.ui.datepicker-fr.min.js
这三个啊
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
最后的小丁
2013-11-29 · TA获得超过516个赞
知道小有建树答主
回答量:490
采纳率:0%
帮助的人:141万
展开全部

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式