<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> JS Calendar </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<script>
var id;
function Calendar(obj) {
id = obj.id;
var year;
var month;
var date;
if (obj.value != '')
{
year = obj.value.split("-")[0];
month = obj.value.split("-")[1];
date = obj.value.split("-")[2];
}
else {
var d = new Date();
year = d.getFullYear();
month = d.getMonth()+1;
date = d.getDate();
}
var x = event.x;
var y = event.y;
div = document.getElementById('date_div');
if (div == null)
{
div = makeCal(year,month,date,x,y,id);
document.body.appendChild(div);
markNowRed(date);
}
}
function markNowRed(date) {
// 将当前日期标红。
var tab = document.getElementById('dateTab');
var rows = tab.rows;
for (var i=3;i< rows.length-1; i++)
{
for (var j=0;j<tab.rows[i].cells.length;j++ )
{
if (rows[i].cells[j].firstChild.innerText == date + '')
{
tab.rows[i].cells[j].firstChild.innerHTML = '<span style="color:red;background:green;">'+date+'</span>';
}
}
}
}
function reNewCal(year,month,date,flag,x,y) {
if (flag == 1)
{
year = year - 1;
}
else if (flag == 2)
{
year = year + 1;
}
else if (flag == 3)
{
month = month - 1;
}
else if (flag == 4)
{
month = month + 1;
}
var div = document.getElementById('date_div');
document.body.removeChild(div);
div = makeCal(year,month,date,x,y,id);
document.body.appendChild(div);
markNowRed(date);
}
// 判断是否是闰年
function isLeapYear(year) {
if (year % 4 == 0 && year % 100 != 0)
{
return true;
}
else {
if (year % 400 == 0)
{
return true;
}
return false;
}
}
function makeCal(year,month,date,x,y,id) {
var flag = 0;
var dd;
var div = document.createElement('div');
div.id = 'date_div';
div.style.width = "auto";
div.style.height = "auto";
div.style.position = "absolute";
div.style.border = "1px solid black";
div.style.background = '#D8D8D8';
div.style.left = x;
div.style.height = y + 20;
//第1行
var calTab = "<table id='dateTab'><tr align='center'><td colspan='7'>" + year+'年'+month+'月'+date+"日</td></tr>";
//第2行
calTab += "<tr><td colspan='2'><input type='button' value='<<' id='year1' onclick=reNewCal("+year+","+month+","+date+","+1+","+x+","+y+")><input type='button' value='<' id='month1' onclick=reNewCal("+year+","+month+","+date+","+3+","+x+","+y+")></td><td colspan='3'> </td><td colspan='2'><input type='button' value='>' id='month2' onclick=reNewCal("+year+","+month+","+date+","+4+","+x+","+y+")><input type='button' value='>>' id='year2' onclick=reNewCal("+year+","+month+","+date+","+2+","+x+","+y+")></td></tr>";
//第3行
calTab += "<tr><td>周日 </td><td>周一 </td><td>周二 </td><td>周三 </td><td>周四 </td><td>周五 </td><td>周六 </td></tr>";
//获取本月的天数
if (isLeapYear(year) && month == 2)
{
day = 28;
}
else if (!isLeapYear(year) && month == 2)
{
day = 29;
}
else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12)
{
day = 31;
}
else {
day = 30;
}
}
// 生成日历
for (var d=1;d<=day ;d++ )
{
if (d == 1)
{
da = new Date();
da.setYear(year);
da.setMonth(month-1);
da.setDate(d);
day1 = da.getDay();
}
if (flag % 7 == 0) // 1周
{
calTab += "<tr>";
}
dd = d;
if (d == 1) // 周日
{
// 补白(确定一个月的第一天是周几，后面就好确定了。)
// 如2011-09-01，这天是周四，那么周四之前的td就应该补白。
for (var j=0;j<day1;j++ )
{
calTab += "<td><font> </font></td>";
flag++;
}
calTab += "<td><font style='cursor:hand;' onclick=setDateVal("+year+","+month+",this)>"+dd+"</font></td>";
flag++;
}
else if(d > 1) {
calTab += "<td><font style='cursor:hand;' onclick=setDateVal("+year+","+month+",this)>"+dd+"</font></td>";
flag++;
}
if (flag % 7 == 0)
{
calTab += "</tr>";
flag = 0;
}
}
//第9行
//calTab += "<tr align='center'><td colspan='7'><input type='button' value='确定' onclick=''><input type='button' value='取消' onclick='hideDiv();'></td></tr></table>";
div.innerHTML = calTab;
return div;
}
function hideDiv() {
var div = document.getElementById('date_div');
document.body.removeChild(div);
}
function setDateVal(year,month,f) {
var dateString = year + '-' + (month<10?"0"+month:month) + '-' + (parseInt(f.innerText) < 10?"0"+f.innerText:f.innerText);
document.getElementById(id).value = dateString;
var div = document.getElementById('date_div');
document.body.removeChild(div);
}
</script>
<input type='text' id='startdate' name='startdate' onclick='Calendar(this);' value='2011-10-21'>
</body>
</html>
相关推荐
JavaScript日历是一个常见的网页交互元素，它为用户提供了一个方便的方式来选择日期，常见于表单填写、事件安排等场景。在Web开发中，JavaScript日历组件的实现主要依赖于JavaScript语言和CSS来完成页面布局和样式...
在这个主题中，我们主要关注的是“js日历 12种js日历”，这显然是一份包含了多种不同实现方式的JavaScript日历组件集合。 1. **日历组件的基本概念** 日历组件是网页中常见的交互元素，它允许用户选择日期，通常...
本文将详细介绍三款JavaScript日历插件，它们各具特色，能够为你的网页增添别致的用户体验。 第一款日历插件可能是“32008731155337.rar”中的内容。虽然具体名称未知，但我们可以假设它是一款简洁且功能丰富的日历...
【标题】"js日历控件自主选择颜色" 涉及的核心技术是JavaScript日历插件的开发，尤其强调用户可以根据个人喜好自定义颜色。这样的控件在网页设计中非常常见，主要用于处理与日期相关的交互，如日期选择、预约系统、...
JavaScript日历控件是网页开发中的重要组成部分，尤其在...这个“js日历控件大全”资源包是开发者学习和实践JavaScript日历控件的宝贵素材，通过研究和实践，你可以掌握不同日历控件的实现原理，提升网页交互设计能力。
JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛用于网页和网络应用开发，尤其是在客户端脚本处理上。JS日历控件是前端开发中常见的一种组件，主要用于显示日期选择器，用户可以通过它方便地选取日期。本文...
总结来说，这个压缩包提供了一个完整的JavaScript日历记事器，包括了前端展示所需的HTML、CSS和JS文件，以及必要的图片资源和用户指南。通过解压并运行index.htm，用户可以在本地浏览器中查看和测试这个日历组件的...
- **FullCalendar**: 这是一个全功能的JavaScript日历组件，支持显示日程、周视图和月视图，可以与其他数据源（如Google Calendar或JSON）集成，适合构建复杂的日历应用。 - **Pickadate.js**: 这是一个轻量级且...
总的来说，"史上最强js日历控件"可能是一个集成了各种高级特性和自定义选项的JavaScript日历组件，它可以帮助开发者快速地在网页应用中实现强大的日期选择功能。通过深入研究和理解提供的压缩包内容，开发者可以有效...
JavaScript日历组件是Web开发中常见的一种交互元素，主要用于用户在网页上进行日期选择操作。在前端开发领域，尤其在构建交互式用户界面时，一个功能强大的日历组件显得尤为重要。"My97DatePicker"是一个知名的...
这里我们将深入探讨如何优化JavaScript日历控件，特别是那些包含时分秒选择，以及支持年月日显示的组件。 1. **性能优化**：在创建日历控件时，减少DOM操作是关键。利用虚拟DOM或仅在必要时更新DOM可以显著提升性能...
JavaScript日历计算工具是一种在网页应用中常用的组件，主要用于处理日期和时间的计算与展示，尤其是在需要显示农历或者进行日期转换的场景下。这个工具能够帮助开发者轻松地获取每一天对应的农历日期，以及其他相关...
JavaScript日历控件是网页应用中常见的一种交互元素，它允许用户方便地选择日期，常用于事件安排、预订系统或表单输入等场景。在这个英文版的JS日历控件中，开发者为英文操作系统的用户提供了友好的界面和功能。 ...
My97 DatePicker 是一个非常流行的JavaScript日历插件，它功能强大，自定义选项丰富，支持多种语言，并且在各种浏览器上都有良好的兼容性。本文将详细介绍My97 DatePicker 的使用方法及其核心特性。 首先，我们来看...
总结，使用JavaScript日历文件在.NET中实现日期选择功能，主要涉及前端JavaScript库的引入、HTML元素的设置、JavaScript代码的编写以及与服务器端的通信。理解这些基本概念和操作，能帮助你有效地集成和使用JS日历...
JavaScript日历控件是一种常用的前端开发工具，它允许用户在网页上方便地选择日期，常用于表单输入、事件预订、时间安排等场景。在这个"js日历控件实例源码"中，我们有两个关键文件：`demo.html`和`setday.js`。 ...
7. **兼容性**：考虑到浏览器的多样性，编写JavaScript日历控件时需要关注跨浏览器的兼容性问题，确保在不同的浏览器（如Chrome、Firefox、Safari、Edge和IE）上都能正常工作。 在提供的文件名中，"calendar.html"...
3. **JavaScript日历实现** - **HTML**：创建基本的日历结构，如表格元素（`<table>`）、行元素（`<tr>`）和单元格元素（`<td>`）。 - **CSS**：定义日历的样式，包括背景色、字体、边框等，使其视觉效果更佳。 -...
总的来说，JavaScript日历控件是一个涉及HTML、CSS和JavaScript综合运用的实践领域。通过选择合适的库、理解和定制样式，以及关注无障碍性，我们可以创建出既美观又实用的日历组件，提升用户的交互体验。
JavaScript日历控件是网页开发中常见的一种交互元素，它为用户提供了一个直观的方式来选择日期，常用于表单填充、事件安排或时间管理等场景。在本主题中，我们讨论的是一款简单实用的JavaScript日历控件，其特点在于...