又玩日历控件(有很多好看的样式)

最新推荐文章于 2023-02-28 16:05:48 发布

facepp

最新推荐文章于 2023-02-28 16:05:48 发布

阅读量1.6k

点赞数

分类专栏： java 文章标签：日历 stylesheet calendar date input function

本文链接：https://blog.csdn.net/facepp/article/details/2443771

版权

java 专栏收录该内容

252 篇文章 0 订阅

订阅专栏

index.html 换样式,
随便选下面的一种样式就可以了.
<link rel="stylesheet" type="text/css" href="css/theme.css" title="Aqua" />
<link rel="stylesheet" type="text/css" href="css/calendar-blue.css" title="winter" />
<link rel="stylesheet" type="text/css" href="css/calendar-blue2.css" title="blue" />
<link rel="stylesheet" type="text/css" href="css/calendar-brown.css" title="summer" />
<link rel="stylesheet" type="text/css" href="css/calendar-green.css" title="green" />
<link rel="stylesheet" type="text/css" href="css/calendar-win2k-1.css" title="win2k-1" />
<link rel="stylesheet" type="text/css" href="css/calendar-win2k-2.css" title="win2k-2" />
<link rel="stylesheet" type="text/css" href="css/calendar-win2k-cold-1.css" title="win2k-cold-1" />
<link rel="stylesheet" type="text/css" href="css/calendar-win2k-cold-2.css" title="win2k-cold-2" />
<link rel="stylesheet" type="text/css" href="css/calendar-system.css" title="system" />
index.html 完整代码
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>The Coolest DHTML Calendar - Online Demo</title>
<link rel="stylesheet" type="text/css" media="all" href="css/theme.css" _fcksavedurl=""css/theme.css"" title="Aqua" />
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/lang/cn_utf8.js"></script>
<script type="text/javascript">

function selected(cal, date) {
cal.sel.value = date; // just update the date in the input field.
if (cal.dateClicked && (cal.sel.id == "sel1" || cal.sel.id == "sel3"))
cal.callCloseHandler();
}

function closeHandler(cal) {
cal.hide(); // hide the calendar

_dynarch_popupCalendar = null;
}
function showCalendar(id, format, showsTime, showsOtherMonths) {
var el = document.getElementById(id);
if (_dynarch_popupCalendar != null) {
    _dynarch_popupCalendar.hide();                 // so we hide it first.
} else {
    var cal = new Calendar(1, null, selected, closeHandler);
    if (typeof showsTime == "string") {
      cal.showsTime = true;
      cal.time24 = (showsTime == "24");
    }
    if (showsOtherMonths) {
      cal.showsOtherMonths = true;
    }
    _dynarch_popupCalendar = cal;                  // remember it in the global var
    cal.setRange(1900, 2070);        // min/max year allowed.
    cal.create();
}
_dynarch_popupCalendar.setDateFormat(format);    // set the specified date format
_dynarch_popupCalendar.parseDate(el.value);      // try to parse the text in field
_dynarch_popupCalendar.sel = el;                 // inform it what input field we use

_dynarch_popupCalendar.showAtElement(el.nextSibling, "Br"); // show the calendar

return false;
}

var MINUTE = 60 * 1000;
var HOUR = 60 * MINUTE;
var DAY = 24 * HOUR;
var WEEK = 7 * DAY;

function isDisabled(date) {
var today = new Date();
return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
}

function flatSelected(cal, date) {
var el = document.getElementById("preview");
el.innerHTML = date;
}

</script>
</head>
<body>
<br/>
</p>
<form action="#">
<br />
<b>Date #1:</b> <input type="text" name="date1" id="sel1" size="30"
><input type="reset" value=" ... "
οnclick="return showCalendar('sel1', '%Y-%m-%d [%W] %H:%M', '24', true);"> %Y-%m-%d [%W] %H:%M -- single
click<br />

<b>Date #2:</b> <input type="text" name="date2" id="sel2" size="30"
><input type="reset" value=" ... "
οnclick="return showCalendar('sel2', '%a, %b %e, %Y [%I:%M %p]', '12');"> %a, %b %e, %Y [%I:%M %p]
-- double click
<br /><br />
<b>Date #3:</b> <input type="text" name="date3" id="sel3" size="30"
><input type="reset" value=" ... "
οnclick="return showCalendar('sel3', '%d/%m/%Y');"> %d/%m/%Y
-- single click
<br />
<b>Date #4:</b> <input type="text" name="date4" id="sel4" size="30"
><input type="reset" value=" ... "
οnclick="return showCalendar('sel4', '%A, %B %e, %Y');"> %A, %B %e, %Y --
double click
</form>
</body>
</html>

整个程序包含 js文件夹,css文件夹和一个index.html

附件下载

facepp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
又玩日历控件(有很多好看的样式)

index.html 换样式,随便选下面的一种样式就可以了.index.html 完整代码http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> The Coolest DHTML Calendar - Online Demofunction selected(cal, date) { cal.sel.value = date; // j
复制链接

扫一扫