jquery日历源码（html5日历代码）
本文目录一览：
- 1、jquery动态添加代码，引入的日历插件不能用。
- 2、jquery日历怎么写
- 3、双联日历jquery UI 的这一段代码， 最后一句，看不懂谁帮忙解释一下
- 4、谷歌日历如何用jquery实现
- 5、利用js、Jquery、css、html 实现一个日历，不能用插件，并且可以根据给定的日期数组在日历中圈出日期！？
- 6、急求！jquery如何用时间相减制作日历
jquery动态添加代码，引入的日历插件不能用。
live 的 click 事件里面绑定了datepicker函数，即点击文本框的时候才绑定datepicker，你当然要点两次。一般datepicker控件只需要绑定一次就行了，即：$(this).datepicker({...}); 这样就行了。
你如果有多个需要添加，可以包装一个函数，文本框控件作为参数，类似：
function bindpicker(obj)
{
$(obj).datepicker({});
}
执行了datepicker，就不需要再live click 了
可以试试 :)
jquery日历怎么写
//时间
$('.datetimepicker').datetimepicker({
format : "yyyy-mm-dd hh:ii:ss",
language : 'zh-CN',
minView : 0,
autoclose: true,
todayBtn : true,
clearBtn : true
});
双联日历jquery UI 的这一段代码， 最后一句，看不懂谁帮忙解释一下
楼主您好
由于这个是选择id为from和to的两个元素做时间控件，应该是页面中的两个元素
第一个option加引号是datepicker这个控件的一个参数，代表要触发什么事件(这里是要设置控件的选项了)
第二个option就是上面定义的变量，值根据id的不同分别可能是minDate和maxDate串
dates.not(this)，not是jquery的排除选择器 this代表当前控件
由于dates可能是from或to的任一元素，也就是说，date.not(this)，意思就是 当我用from触发时，date.not(this)就是to元素，反之亦然
谷歌日历如何用jquery实现
实现Google Calendar(日历)的几个推荐方案:
首席推荐（Fullcalendar）
官方演示：
arshaw.com/fullcalendar
推荐2：dhtmlxScheduler
dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml
推荐3：spinelz
官方网站：script.spinelz.org/index_en.html
演示：cssrain.cn/demo/spinelz/test/calendar.html
推荐4：jMonthCalendar
bytecyclist.com/SourceCode/jMonthCalendar/1.3.0-beta/Demo.html
因为常被吞楼，所以地址，你就麻烦点，复制吧。
如果有些打不开，就有可以被墙。
利用js、Jquery、css、html 实现一个日历，不能用插件，并且可以根据给定的日期数组在日历中圈出日期！？
是要这种效果吗？
body
div class="eae2-075c-3ab4-d3c5 cldBody"
table
thead
tr
td colspan="7"
div class="075c-3ab4-d3c5-40a9 top"
span id="left"lt;/span
span id="topDate"/span
span id="right"gt;/span
/div
/td
/tr
tr id="week"
td日/td
td一/td
td二/td
td三/td
td四/td
td五/td
td六/td
/tr
/thead
tbody id="tbody" /tbody
/table
/div
27/body
CSS------------------
style type="text/css"
.cldBody{background:#f7f7f7;width: 420px;margin: 10px auto;}
.cldBody .top{height: 60px;line-height: 60px;text-align: center;position: relative;}
#topDate{font-size: 24px;}
#week td{font-size: 15px;}
td{width: 60px; height: 60px;line-height: 60px;text-align: center;font-size: 20px;}
#tbody td:hover{background: #ededed;cursor: pointer;}
.curDate{color: red;font-weight: bold;}
#left,#right{width: 60px;height: 60px;position: absolute;cursor: pointer;}
#left{left: 0;}
#right{right: 0;}
#left:hover, #right:hover{background-color: rgba(30, 30, 30, 0.2);}
/style
引入jq
1 script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"/script
太多了，我建议你看看这个博主的博客，这个是转载这个博客的网页链接望采纳，谢谢
急求！jquery如何用时间相减制作日历
jquery如何用时间相减制作日历
!DOCTYPE HTML
html
head
meta charset="utf-8"
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /
meta name="format-detection" content="telephone=no" /
titletryMyOwnCalendar/title
script src="js/jquery.min.js" language="javascript"/script
style
*{ margin:0; padding:0;}
.choosecal{ width:96%; margin:3% auto; overflow:hidden;}
.ccaltop{ width:100%; border-radius:5px; }
.caltline1,.caltline2{ width:94%; background-color:#F90; overflow:hidden; padding:2% 3%;}
.caltline1 p,.caltline2 p{ float:left; width:10%; font-weight:700; text-align:right;}
.caltline1 .bookdate{ width:90%; text-align:left;}
.caltline2{ background-color:#FFF; display:none;}
.caltline2 p{ width:20%;}
.caltline2 .datetext{ width:35%; border:1px solid #000;
background-color:#FFF; font-weight:700;}
.inputdate{ color:#F60;}
.calender{ width:100%; margin-top:3%; overflow:hidden; display:none;}
.selectmouth{ background-color:#F30; width:94%;
overflow:hidden;padding:2% 3%;border-radius:5px 5px 0 0;}
.selectmouth p{ float:left; width:33%; color:#FFF;
font-weight:700; cursor:pointer;}
.selectmouth .selectdate{ width:100%; background-color:#F30;
border:none; color:#FFF; font-weight:700; text-align:center;}
.data_table{ width:100%;border:1px solid #cccccc;
border-collapse:collapse; }
.data_table thead{ background-color:#333;}
.data_table thead td{ color:#FFF; text-align:center;
border:1px solid #333;border-collapse:collapse; padding:1% 0;
}
.data_table tbody td{border:1px solid #cccccc;
border-collapse:collapse;
text-align:center;color:#0C6;padding:1% 0;
}
.data_table tbody td.orderdate{ color:#000;}
.data_table tbody td.tdselect{ color:#fff;background-color:#999}
/style
/head
body
div
div
div
p选择入住日期……/p
pimg src="images/next.png" //p
/div
div
p style=" width:80%; text-align:left;"
input type="text" value=""
class="3ab4-d3c5-40a9-0a99 datetext datetoday inputdate" readonly=readonly /
至
input type="text" value="" class="d3c5-40a9-0a99-d500 datetext dateendday"
readonly=readonly /
/p
pinput type="button" value="确定" //p
/div
/div
div
div
p style="text-align:right"/p
pinput type="text" value="2014年2月" readonly=readonly //p
p/p
/div
table cellspacing="0px"
thead
tr
td日/tdtd一/tdtd二/tdtd三/tdtd四/tdtd五/tdtd六/td
/tr
/thead
tbody
tr
td1/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/td
/tr
tr
td1/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/td
/tr
tr
td1/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/td
/tr
tr
td1/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/td
/tr
tr
td1/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/td
/tr
tr
td1/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/td
/tr
/tbody
/table
/div
/div
script
window.onload=function(){
var mydate=new Date();
var thisyear=mydate.getFullYear();
var thismonth=mydate.getMonth()+1;
var thisday=mydate.getDate();
var mydate1=new Date();
var thisyear1=mydate1.getFullYear();
var thismonth1=mydate1.getMonth()+1;
var thisday1=mydate1.getDate();
var selectday=thisday;
//标记日期
var indate=thisday;
//入住日期
var inmonth=thismonth;
//入住月份
var outdate=thisday+1;
//退房日期
var outmonth=thismonth;
//退房月份
var datetxt="datetoday";
var datefirst;
var datesecond;
function initdata(){
//日期初始填充
var tdheight=jQuery(".data_table tbody tr").eq(0).find("td").height();
jQuery(".data_table tbody td").css("height",tdheight);
jQuery(".selectdate").val(thisyear+"年"+thismonth+"月");
var days=getdaysinonemonth(thisyear,thismonth);
var weekday=getfirstday(thisyear,thismonth);
setcalender(days,weekday);
markdate(thisyear,thismonth,selectday);
orderabledate(thisyear,thismonth,thisday);
}
initdata();
jQuery(".datetoday").val(thisyear+"-"+thismonth+"-"+thisday);
jQuery(".dateendday").val(thisyear+"-"+thismonth+"-"+(thisday+1));
function orderabledate(thisyear,thismonth,thisday){
//能预订的日期
if(thisyearthisyear1){
jQuery(".data_table tbody td").addClass("orderdate");
jQuery(".data_table tbody td").removeClass("usedate");
}else if(thisyear==thisyear1){
if(thismonththismonth1){
jQuery(".data_table tbody td").addClass("orderdate");
jQuery(".data_table tbody td").removeClass("usedate");
}else if(thismonth==thismonth1){
for(var j=0;j6;j++){
for(var i=0;i7;i++){
var tdhtml=jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html();
if(tdhtmlthisday){
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("orderdate");
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("usedate");
}else{
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("orderdate");
}
}
}
}else{
jQuery(".data_table tbody td").removeClass("orderdate");
}
}else{
jQuery(".data_table tbody td").removeClass("orderdate");
}
}
function markdate(thisyear,thismonth,thisday){
//标记日期
var datetxt=thisyear+"年"+thismonth+"月";
var thisdatetxt=thisyear1+"年"+thismonth1+"月";
jQuery(".data_table td").removeClass("tdselect");
if(datetxt==thisdatetxt){
for(var j=0;j6;j++){
for(var i=0;i7;i++){
var tdhtml=jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html();
if(tdhtml==thisday){
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("tdselect");
}
}
}
}
}
function getdaysinonemonth(year,month){
//算某个月的总天数
month=parseInt(month,10);
var d=new Date(year,month,0);
return d.getDate();
}
function getfirstday(year,month){
//算某个月的第一天是星期几
month=month-1;
var d=new Date(year,month,1);
return d.getDay();
}
function setcalender(days,weekday){
//往日历中填入日期
var a=1;
for(var j=0;j6;j++){
for(var i=0;i7;i++){
if(j==0iweekday){
jQuery(".data_table tbody tr").eq(0).find("td").eq(i).html("");
jQuery(".data_table tbody tr").eq(0).find("td").eq(i).removeClass("usedate");
}else{
if(a=days){
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html(a);
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("usedate");
a++;
}else{
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html("");
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("usedate");
a=days+1;
}
}
}
}
}
function errorreset(){
//日期报错后，数据重置
thisyear=thisyear1;
thismonth=thismonth1;
thisday=thisday1;
selectday=thisday1;
indate=thisday1;
inmonth=thismonth1;
outdate=thisday1+1;
outmonth=thismonth1;
initdata();
}
jQuery(".data_table tbody td.usedate").live("click",function(){ //点击日期的效果
var thishtml=parseInt(jQuery(this).html());
jQuery(".data_table td").removeClass("tdselect");
jQuery(this).addClass("tdselect");
selectday=thishtml;
if(datetxt=="datetoday"){
jQuery(".datetoday").val(thisyear+"-"+thismonth+"-"+selectday);
indate=selectday;
inmonth=thismonth;
}else{
jQuery(".dateendday").val(thisyear+"-"+thismonth+"-"+selectday);
outdate=selectday;
outmonth=thismonth;
if(outmonthinmonth){
alert("日期填写错误");
jQuery(".datetoday").val(thisyear1+"-"+thismonth1+"-"+thisday1);
jQuery(".dateendday").val(thisyear1+"-"+thismonth1+"-"+(thisday1+1));
errorreset();
}else if(outmonth==inmonth){
if(outdate=indate){
alert("日期填写错误");
jQuery(".datetoday").val(thisyear1+"-"+thismonth1+"-"+thisday1);
jQuery(".dateendday").val(thisyear1+"-"+thismonth1+"-"+(thisday1+1));
errorreset();
}
}
}
});
jQuery(".datetoday").click(function(){
//选择入住日期
datetxt="datetoday";
jQuery(".datetext").removeClass("inputdate");
jQuery(this).addClass("inputdate");
});
jQuery(".dateendday").click(function(){
//选择退房日期
datetxt="dateendday";
jQuery(".datetext").removeClass("inputdate");
jQuery(this).addClass("inputdate");
});
jQuery(".lastmonth").click(function(){
//上一个月
thismonth--;
if(thismonth==0){
thismonth=12;
thisyear--;
}
initdata();
});
jQuery(".nextmonth").click(function(){
//上一个月
thismonth++;
if(thismonth==13){
thismonth=1;
thisyear++;
}
initdata();
});
jQuery(".btsure").click(function(){
//确定日期
var start = new Date($(".datetoday").val());
var end = new Date($(".dateendday").val());
var diff = parseInt((end - start) / (1000*3600*24));
jQuery(".bookdate").html(inmonth+"月"+indate+"日至"+outmonth+"月"+outdate+"日("+diff+")晚")
});
jQuery(".caltline1").toggle(
function(){
jQuery(".caltline2").slideDown(500);
jQuery(".calender").fadeIn(500);
errorreset();
jQuery(".caltline1").find("img").attr("src","images/iconpointup.png");
},
function(){
jQuery(".caltline2").slideUp(500);
jQuery(".calender").fadeOut(500);
jQuery(".caltline1").find("img").attr("src","images/iconpoint.png");
}
);
}
/script
/body
/html
