JavaScript弹出式日历控件 无jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>弹出式JavaScript日历控件</title>
<style>
.tcalInput{background: url(‘/jscss/demoimg/201311/cal.gif‘) 100% 50% no-repeat;padding-right: 20px;cursor: pointer;}
.tcalActive{background-image: url(‘/jscss/demoimg/201311/no_cal.gif‘);}
#tcal{position: absolute;visibility: hidden;z-index: 100;width: 170px;background-color: white;margin-top: 2px;padding: 0 2px 2px 2px;border: 1px solid silver;-moz-box-shadow: 3px 3px 4px silver;-webkit-box-shadow: 3px 3px 4px silver;box-shadow: 3px 3px 4px silver;-ms-filter: "progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=‘silver‘)";filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=‘silver‘);}
#tcalControls{border-collapse: collapse;border: 0;width: 100%;}
#tcalControls td{border-collapse: collapse;border: 0;padding: 0;width: 16px;background-position: 50% 50%;background-repeat: no-repeat;cursor: pointer;}
#tcalControls th{border-collapse: collapse;border: 0;padding: 0;line-height: 25px;font-size: 10px;text-align: center;font-family: Tahoma, Geneva, sans-serif;font-weight: bold;white-space: nowrap;}
#tcalPrevYear{background-image: url(‘/jscss/demoimg/201311/prev_year.gif‘);}
#tcalPrevMonth{background-image: url(‘/jscss/demoimg/201311/prev_mon.gif‘);}
#tcalNextMonth{background-image: url(‘/jscss/demoimg/201311/next_mon.gif‘);}
#tcalNextYear{background-image: url(‘/jscss/demoimg/201311/next_year.gif‘);}
#tcalGrid{border-collapse: collapse;border: 1px solid silver;width: 100%;}
#tcalGrid th{border: 1px solid silver;border-collapse: collapse;padding: 3px 0;text-align: center;font-family: Tahoma, Geneva, sans-serif;font-size: 10px;background-color: gray;color: white;}
#tcalGrid td{border: 0;border-collapse: collapse;padding: 2px 0;text-align: center;font-family: Tahoma, Geneva, sans-serif;width: 14%;font-size: 11px;cursor: pointer;}
#tcalGrid td.tcalOtherMonth{color: silver;}
#tcalGrid td.tcalWeekend{background-color: #ACD6F5;}
#tcalGrid td.tcalToday{border: 1px solid red;}
#tcalGrid td.tcalSelected{background-color: #FFB3BE;}
</style>
<script type="text/javascript" src="/jscss/demoimg/201311/date.js"></script>
</head>
<body>
<center>
<form action="#">
<!-- add class="tcal" to your input field -->
<div>
<input type="text" name="date" class="tcal" value="" />
</div>
</form>
</center>
</body>
</html>

JavaScript弹出式日历控件 无jquery

时间: 2024-10-17 12:57:52

JavaScript弹出式日历控件 无jquery的相关文章

javascript实例学习之六—自定义日历控件

基于之前上篇博客轻量级jquery,tool.js和base.js.自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件 //基于Base.js以及tool.js做的日历插件 $().extend('datePicker', function() { //生成日历插件 var $yearSpan; var $monthSpan; var tds; var $prevBtn; var $nextBtn; var $lastTr; var $date

javascript JTimer_2.0 时间日历控件使用方法

JS文件下载: 1. CSDN下载地址: http://download.csdn.net/detail/freshflower/5167398 2. 百度文库下载地址: http://wenku.baidu.com/view/e02c670dbb68a98271fefadd http://pan.baidu.com/s/1gdGO4Kj 版本说明 : 相比上一版本优化功能如下: 1. 界面更加美化, 可以显示上个月月末的几天及下个月的前几天; 2. 优化日期选择时对起始年月的设定, 方便选择年

Web之-----弹出确认框控件应用

引用文件!-------- <link rel="stylesheet" type="text/css" href="@Url.FrontUrl().ThemeFileUrl("assets/plugins/jqueryConfirm/css/jq22-demo.css",true)"><link rel="stylesheet" href="@Url.FrontUrl().Th

Flex自定义组件开发之日周月日期选择日历控件

原文:Flex自定义组件开发之日周月日期选择日历控件 使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的任一位置单击时,将弹出一个 DateChooser 控件,显示当月的所有日期.如果未选择日期,则该文本字段为空白,并且 DateChooser 控件中将显示当前日期的月份.当 DateChooser 控件处于打开状态时,用户可以在各个月份和年份之间滚动,并选择某个日期.选择日期后,DateChooser 控件关闭,

fullcalendar日历控件知识点集合

1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方法.托付(函数回调)作为成员变量.通过为这些成员变量赋值,就可以实例化出一个符合自己需求的fullcalendar实例出来,即终于在浏览器里渲染出的日历.换句话说,我们所做的绝大多数工作就是依照fullcalendar的语法约定去配置出一个符合我们需求的fullcalendar实例.除非对于极少的特

fullcalendar日历控件集合知识

1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方法.托付(函数回调)作为成员变量.通过为这些成员变量赋值,就可以实例化出一个符合自己需求的fullcalendar实例出来,即终于在浏览器里渲染出的日历.换句话说,我们所做的绝大多数工作就是依照fullcalendar的语法约定去配置出一个符合我们需求的fullcalendar实例.除非对于极少的特

设置点击文本框或图片弹出日历控件

<input id="startDate" value="" readonly="true" type="text" style="cursor: pointer" class="user_datepicker "><input class="canlderImg" data-tag="start" type="imag

javascript日历控件——纯javascript版

平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js&quo

javascript日历控件

以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就是让input控件内部右边显示一个按钮,我是直接给input加了个背景,然后把input的边框去掉实现的. 这个是最初版的,再往后打算做出纯javascript版的,再往后打算用JQuery做一套. <!doctype html> <html> <head> <met