HTML页面日历插件

web页面显示日历插件。如下图

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>body,td,.p1,.p2,.i {font-family: arial}body {margin: 6px 0 0 0;background-color: #fff;color: #000;}table {border: 0}#cal {width: 430px;border: 1px solid #f5f5f5;font-size: 12px;margin: 0px 0 0 0px;}#cal #top {height: 40px;line-height: 40px;background: #e7eef8;color: #4e6ef2;font-size:14px;padding-left: 10px}#cal #cm .cell.jjr{background:#fee0e0;border-radius:3px;}#cal #top select {font-size: 12px}#cal #top input {padding: 0}#cal ul#wk {margin: 0;padding: 0;height:25px;padding-top:10px;}#cal ul#wk li {float: left;width: 50px;text-align: center;line-height:25px;list-style: none;padding-left:10px;font-weight:900;}#cal ul#wk li b {font-weight: normal;color: #c60b02}#cal #cm {clear: left;/*border-top: 1px solid #ddd;border-bottom: 1px dotted #ddd;*/position: relative}#cal #cm .cell {position: absolute;width: 50px;height: 50px;text-align: center;margin: 0 0 0 9px;cursor:pointer;}#cal #cm .cell .so {padding-top:10px;font: bold 16px arial;}#cal #bm {text-align: right;height: 24px;line-height: 24px;padding: 0 13px 0 0}#cal #bm a {color: 7977ce}#cal #fd {display: none;position: absolute;border: 1px solid #dddddf;background: #feffcd;padding: 10px;line-height: 21px;width: 150px}#cal #fd b {font-weight: normal;color: #c60a00}.mainBox{position:relative;padding:30px;}.mainBoxDate{position:absolute;top:55px;left:30px;width:432px;box-shadow: 0 2px 10px 0 rgba(0,0,0,.1);border-radius:5px;display:none;}</style></head><body><div class="mainBox"><input type="" name=""  value="" id="dept"/><div class="mainBoxDate"><table cellpadding="0" cellspacing="0" id="1"><tr><td><div id="cal"><div id="top">公元&nbsp;<select></select>&nbsp;年&nbsp;<select></select>&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;农历<span></span>年&nbsp;[&nbsp;<span></span>年&nbsp;]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="回到今天" title="点击后跳转回今天" style="visibility: visible;background: #4e6ef2;color: #fff;border: 0px;padding: 5px;right: 5px;margin-right: 5px;border-radius: 5px;font-size: 12px;"></div><ul id="wk"><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li><b>六</b></li><li><b>日</b></li></ul><div id="cm"></div><div id="bm"></div></div></td></tr></table></div></div><script type="text/javascript" src="js/jquery-2.1.4.js" ></script><script type="text/javascript" src="js/date.js" ></script><script>$("#dept").click(function(){$(".mainBoxDate").toggle();});function getDateTime(e){$("#dept").val(e);}</script></body></html>

HTML页面日历插件相关推荐

html实现日历签到页面,jquery每日签到日历插件
这是一款使用jquery来实现的每日签到日历插件源代码.该每日签到插件可以实现签到功能,查看签到次数等,非常实用. 使用方法在页面中引入样式文件style.css,jquery.min.js和签到j ...
仿iphone日历插件(beta)
前言小伙伴们好,很久不见了.最近工作进入正常期了,所以慢慢的悠闲的时间久没有了,所以不能每天水一篇了. 最近也在听师傅(http://home.cnblogs.com/u/aaronjs/)的教导开 ...
jQuery插件实战之fullcalendar（日历插件）Demo
jQuery的插件许多,应用的场景也很丰富,今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar,眼下最新版本号是1.5.1,使用这款插件可以高速帮助你高速编程实现基于web ...
html中字段是日期控件,jQuery日历插件datepicker用法详解
jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端, ...
javascript日历插件
javascript日历插件原文:javascript日历插件 javascript日历插件最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的 ...
fullcalendar php,日历插件fullcalendar+php的使用教程 — 读取json数据
根据FullCalendar日历插件说明文档中的介绍,日历主体事件数据的来源有三,一是直接以javascript数组的形式显示日历事件,二是获取JSON数据形式显示日历事件,三是函数回调的形式显示日历 ...
FullCalendar 二：FullCalendar日历插件说明文档
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...
给开发者准备的 10 款最好的 jQuery 日历插件
1. CLNDR.js CLNDR.js 是一个日历插件,用来创建日历,允许用户随意的按照自己的想法去自定义日历.这个插件不会生成任何的标记,但是可以使用数据来填充 Underscore.js HT ...
flex插件_uniapp撸一个日历插件
最近在使用uni-app进行小程序开发,涉及到日历的开发,由于是多语言版本,需要找到能够自定义周一到周末各个名称的日历插件,逛了一圈插件市场没有找到满意的,只好自己动手,丰衣足食话不多说,直接开干, ...
【UI插件】简单的日历插件（下）—— 学习MVC思想
前言我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...

HTML页面日历插件

HTML页面日历插件相关推荐

最新文章

热门文章