jQuery简单实现日历的方法资源-CSDN文库

jquery

table

122 浏览量 2020-12-10 00:38:17 上传评论收藏 42KB PDF 举报

资源推荐

资源详情

资源评论

jQuery简单实现日历的方法简单实现日历的方法

本文实例讲述了jQuery简单实现日历的方法。分享给大家供大家参考。具体分析如下：

原理挺简单的，首先算出一个月有多少天，再算出这个月的第一天是星期几，接着顺序排下来就可以了.

<!DOCTYPE HTML>

<head>

<title>tryMyOwnCalendar</title>

<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>

<p class="bookdate">选择入住日期……</p>

</div>

<input type="text" value=""

class="datetext datetoday inputdate" readonly=readonly />

至

<input type="text" value="" class="datetext dateendday"

readonly=readonly />

</p>

</div>

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论收藏

内容反馈

weixin_38663193

粉丝: 8
资源: 951

jQuery简单实现日历的方法

jQuery实现的简易日历控件

PHP+JQUERY实现一个简单的日历

基于jquery的日历日程插件

jQuery简单的周日历选择插件

jQuery实现简单日历效果

jQuery实现的简单日历组件定义与用法示例

实现了类似google日历的简单web日历工具

jquery实现简单每周轮换的日历

jQuery插件 简单日期设置

一个简单的jQuery时间选择器

jquery.datepick.zip

jQuery权威指南-源代码

日历控件jquery

超实用的jQuery代码段

利用js Date()做的 jquery 日历 插件

Qt 5实现串口调试助手 （源工程文件、0积分下载）

【SystemVerilog】路科验证V2学习笔记（全600页）.pdf

AutoSAR标准协议4.2.2

光伏-储能并网系统仿真.rar

XCP协议的规范文档

GD32替换STM32注意事项.pdf

NPPJSONViewer.zip

CANoe通过CAPL脚本实现自动测试

蓝牙BLE协议中文版.pdf

VS2015安装证书，JavaScript_ProjectSystem.msi，JavaScript_LanguageService.msi

BaiduOCR.zip

AD20官方中文教程.pdf

完整版 Microsoft.ACE.OLEDB.12.0 驱动下载.rar

电路分析基础第二版PDF电子书免费下载

最新资源

jQuery插件简单日期设置

利用js Date()做的 jquery 日历插件

Qt 5实现串口调试助手（源工程文件、0积分下载）