jquery表格日历写入html,jQuery简单实现日历的方法
本文实例讲述了jQuery简单实现日历的方法。分享给大家供大家参考。具体分析如下:
原理挺简单的,首先算出一个月有多少天,再算出这个月的第一天是星期几,接着顺序排下来就可以了.
tryMyOwnCalendar
*{ 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}
选择入住日期……
class="datetext datetoday inputdate" readonly=readonly />
至
readonly=readonly />
<
>
日一二三四五六
111111
window.οnlοad=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(thisyear
jQuery(".data_table tbody td").addClass("orderdate");
jQuery(".data_table tbody td").removeClass("usedate");
}else if(thisyear==thisyear1){
if(thismonth
jQuery(".data_table tbody td").addClass("orderdate");
jQuery(".data_table tbody td").removeClass("usedate");
}else if(thismonth==thismonth1){
for(var j=0;j<6;j++){
for(var i=0;i<7;i++){
var tdhtml=jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html();
if(tdhtml
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;j<6;j++){
for(var i=0;i<7;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;j<6;j++){
for(var i=0;i<7;i++){
if(j==0&&i
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(outmonth
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");
}
);
}
希望本文所述对大家的jQuery程序设计有所帮助。
jquery表格日历写入html,jQuery简单实现日历的方法相关推荐
- jquery表格日历写入html代码,简单的日历记事本jQuery插件e-calendar(带样式美化)
e-calendar是记录或设置指定日期事件的一款jQuery插件,类似于工作备忘录的功能. 使用教程: 1.引入e-calendar插件 2.HTML代码 3.参数配置 weekDays: ['Do ...
- js html css淘宝足迹日历效果,js实现简单的日历显示效果函数示例
本文实例讲述了js实现简单的日历显示效果函数.分享给大家供大家参考,具体如下: 用一个函数简单的实现一个月份的日历,效果如下: 这个日历效果有高亮显示,我实现的思维比较简单. 我把上面的日历效果用表格 ...
- vue 日历翻拍效果_vue实现简单的日历效果
最近在项目中遇到了一个需求,在vue中创建一个组件,这个组件显示的是当前的日期,以及在当前的日需要处理的事项,处理的事项的信息会以后端的接口的形式返回. 需求确认后,搭建了一下,在这里记录了一下,现在 ...
- java简易日历程序报告_简单的日历小程序(java编写)
import java.util.Scanner; public class CalendarDemo{ public static void main(String[] args) { int su ...
- html 表格过滤功能,简单的带排序和过滤功能的jQuery表格插件
smart-table是一款简单实用的带排序和过滤功能的jQuery表格插件.该jQuery表格插件通过简单的设置就可以生成表格排序.表格字段过滤功能,甚至可以实现表格分页显示,使用非常方便. 使用方 ...
- jQuery 表格插件汇总
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
- jQuery 表格插件
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
- jQuery表格的行编辑
jQuery表格的行编辑 单击单元格,单元格显示为一个控件 然后,在控件中输入或者选择值,失去焦点之后 获取该控件的值,显示在单元格中 控件可以是input.select.datetime等 Inpu ...
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
最新文章
- 激光雷达和相机感知融合简介
- 【c语言】蓝桥杯算法提高 Quadratic Equation
- ExtJS grid简单应用之 展示JSON数据
- php fastcgi_param,nginx-404与root指令 fastcgi_param 指令
- ZooKeeper与Eureka的区别
- netty ssl 服务器
- apollo编译报错,Error No compiler is provided in this enviroment.Perhaps you are running on a JRE rather
- mysql in 索引_关于MySQL种的in函数到底走不走索引、我和同事差点大打出手!
- 【代码源 Div1 - 109】#454. Minimum Or Spanning Tree(最小生成树,边权按位或,贪心,并查集) CF1624G
- Final Cut Pro 10.6 for Mac(fcpx视频剪辑)
- jsonp 获取图片文件流_【国际IT专场】Laravel Media Library多媒体文件的上传与管理...
- 北京限行规定带来的烦恼
- APP开发的七大阶段,你了解多少?
- 8、虚拟串口(VSPT)使用小记
- 【PMP】PMBOK 笔记 第12章 项目采购管理
- c语言背景音乐,背景图,背景字体
- 【键盘开箱】B.FRIENDit壁虎忍者RF1430K 2.4G无线键盘,满足办公室安静需求的无线键盘!
- Python pandas库|任凭弱水三千,我只取一瓢饮(2)
- 3月3 pytorch模型保存的.pt, .pth, .pkl的pytorch模型文件,只是后缀不同而已(仅此而已),打开方式
- 金华免费服务器_金华云主机