28,391
社区成员
发帖
与我相关
我的任务
分享加入两个文本框实现显示日历的功能
下载这个压缩包，可以看到点击文本框，就会弹出一个日历，选择日期后，日期会写入文本框中，我想在一个网页中加入两个这样的文本框，都可以实现这个功能，请问应该怎样改写代码？？？
有大神帮一下忙，不知道怎么上传文件，就把代码复制下来了，由于字符太多，js和css源代码在下面的回复中。求大神帮帮忙。。。我觉得就跟input那一行，和my.js最后一个函数有关，怎么加入两个input，都可以实现呢？
my.html源代码：
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="author" content="jQer"/>
<title>Eui Demo</title>
<link type="text/css" rel="stylesheet" href="css/eui-calendar.css" />
<script src="js/eui-calendar.js"></script>
<style>
html {
background: rgb(238,238,238);
}
body {
font-size: 14px;
line-height: 1.5;
font-family: 微软雅黑, Verdana, sans-serif;
}
#main{
width: 600px;
margin: 0 auto;
}
h1{
margin-bottom: 50px;
}
label[for="birthday"]{
font-weight: bold;
color: rgb(101,101,101);
}
#birthday{
border: 1px solid rgb(212,212,212);
}
#intro{
position: absolute;
top: -1px;
left: 50%;
margin-left: 50px;
color: rgb(72,72,72);
width: 250px;
padding: 30px 50px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 -5px 16px rgba(0,0,0,0.1) inset;
}
</style>
<link rel="stylesheet" type="text/css" href="my.css">
<script type="text/javascript" src="my.js"></script>
</head>
<body>
<div id="main">
<h1>原生日历控件 [ 新 ]</h1>
<p id="">
<label for="birthday">您的出生日期</label><br />
<input type="text" id="birthday" name="birthday" value="" />
</p>
<div id="intro">
</div>
</div>
</body>
</html>
有大神帮一下忙，不知道怎么上传文件，就把代码复制下来了，由于字符太多，js和css源代码在下面的回复中。求大神帮帮忙。。。我觉得就跟input那一行，和my.js最后一个函数有关，怎么加入两个input，都可以实现呢？
my.html源代码：
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="author" content="jQer"/>
<title>Eui Demo</title>
<link type="text/css" rel="stylesheet" href="css/eui-calendar.css" />
<script src="js/eui-calendar.js"></script>
<style>
html {
background: rgb(238,238,238);
}
body {
font-size: 14px;
line-height: 1.5;
font-family: 微软雅黑, Verdana, sans-serif;
}
#main{
width: 600px;
margin: 0 auto;
}
h1{
margin-bottom: 50px;
}
label[for="birthday"]{
font-weight: bold;
color: rgb(101,101,101);
}
#birthday{
border: 1px solid rgb(212,212,212);
}
#intro{
position: absolute;
top: -1px;
left: 50%;
margin-left: 50px;
color: rgb(72,72,72);
width: 250px;
padding: 30px 50px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 -5px 16px rgba(0,0,0,0.1) inset;
}
</style>
<link rel="stylesheet" type="text/css" href="my.css">
<script type="text/javascript" src="my.js"></script>
</head>
<body>
<div id="main">
<h1>原生日历控件 [ 新 ]</h1>
<p id="">
<label for="birthday">您的出生日期</label><br />
<input type="text" id="birthday" name="birthday" value="" />
</p>
<div id="intro">
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
csdn_aspnet 2014-08-04
- 打赏
- 举报
xuzuning 2014-08-03
- 打赏
- 举报
分析了一下，没有找到门
但是发现他是 My97日期控件 的早期版本，感觉应该放弃了
可到他官网 http://www.my97.net/ 去下载新版的
使用说明和样例代码都很详尽
十三- 2014-08-03
- 打赏
- 举报
实在不行，就再换一个
u010317264 2014-08-03
- 打赏
- 举报
my.css
.eui-calendar {
display: none;
position: absolute;
left: 20px;
top: 50px;
width: 238px;
min-width: 200px;
min-height: 200px;
padding: 10px 5px;
background: rgb(255,255,255);
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
border: 1px solid rgb(232,239,243);
border-radius: 8px;
overflow: hidden;
font-family: 微软雅黑, Verdana, sans-serif;
}
.eui-calendar-selectcontent, .eui-calendar-datecontent, .eui-calendar-week{
margin: 0;
padding: 0;
list-style: none outside none;
}
.eui-calendar-selectcontent li {
display: inline;
}
select[data-calendar="year"], select[data-calendar="month"] {
width: 119px;
border: 1px solid rgb(223,229,233);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
}
.eui-calendar-week{
margin: 0 0 40px;
}
.eui-calendar-weekday, .eui-calendar-lastmonthdate, .eui-calendar-date {
float: left;
width: 30px;
height: 30px;
margin: 2px;
font-size: 12px;
line-height: 30px;
text-align: center;
}
.eui-calendar-weekday {
font-weight: bold;
color: rgb(89, 89, 112);
}
.eui-calendar-date {
background: rgb(236, 236, 239);
color: rgb(60, 187, 246);
text-shadow: 0px 1px 1px rgba(250, 250, 250, 0.6);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 3px 3px 3px 3px;
cursor: pointer;
}
.eui-calendar-today{
box-shadow: 0px 0px 12px rgba(0, 160, 250, 0.5) inset;
background: rgb(195, 226, 250)\9;
}
.eui-calendar-date:hover {
box-shadow: 0px 0px 6px rgba(0, 160, 250, 0.6) inset;
background: rgb(185, 196, 220)\9;
color: rgb(255,255,255)\9;
}
u010317264 2014-08-03
- 打赏
- 举报
my.js源代码
"use strict";
(function(){
/* eui 命名空间 */
var _eui = window.eui;
var eui = window.eui = {};
eui.noConflict = function () {
window.eui = _eui;
};
eui.addHandler = function (elem, type, handler) {
if (elem.addEventListener) {
elem.addEventListener(type, handler, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, handler);
} else {
elem['on' + type] = handler;
}
};
// 卸载监听器
eui.removeHandler = function (elem, type, handler) {
if (elem.removeEventListener) {
elem.removeEventListener(type, handler, false);
} else if (elem.detachEvent) {
elem.detachEvent('on' + type, handler);
} else {
elem['on' + type] = null;
}
};
eui.getEvent = function (e) {
return e ? e : window.event;
};
eui.getTarget = function (e) {
return e.target || e.srcElement;
};
eui.getElemLeft = function (element) {
var currentLeft = element.offsetLeft;
var current = element.offsetParent;
while (current) {
currentLeft += current.offsetLeft;
current = current.offsetParent;
}
return currentLeft;
};
eui.getElemTop = function (element) {
var currentTop = element.offsetTop;
var current = element.offsetParent;
while (current) {
currentTop += current.offsetTop;
current = current.offsetParent;
}
return currentTop;
};
eui.isContent = function(elem, content){
while(elem){
if(elem === content) {
return true;
}
elem = elem.parentNode;
}
return false;
};
})();
(function () {
// 判断y年是不是闰年
function _isLeapYear(y){
return (y > 0) && !(y % 4) && ((y % 100) || !(y % 400));
}
// 判断当前月份从星期几开始
function _getDayofWeek(y, m, daynum) {
var days = 1;
for (var i = 1, len = m; i < len; i++) {
days += daynum[i - 1];
}
var w = (y - 1) + Math.floor((y - 1) / 4) - Math.floor((y - 1) / 100) +
Math.floor((y - 1) / 400) + days;
w = w % 7;
return w;
}
// class Calendar
// 日历数据仓库
var Calendar = {};
// 初始化，设定当前年、月、日期
Calendar.initialize = function(o){
var currentYear = o.currentYear,
currentMonth = o.currentMonth;
this.change(currentYear, currentMonth);
};
// 更新日历数据库的数据
// 需要提供年、月
Calendar.change = function (year, month) {
this.currentYear = year;
this.currentMonth = month;
this.daynums = [31, _isLeapYear(year) ? 29 : 28,
31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var currentDaynum = this.daynums[month - 1];
this.currentDays = [];
for (var i = 0; i < currentDaynum; i++) {
this.currentDays.push(i + 1);
}
};
// 获取当前月从星期几开始
Calendar.getWeekday = function(){
var currentYear = this.currentYear,
currentMonth = this.currentMonth,
currentDaynums = this.daynums;
return _getDayofWeek(currentYear, currentMonth, currentDaynums);
};
// 获取当前年
Calendar.getCurrentYear = function(){
return this.currentYear;
};
// 获取当前月
Calendar.getCurrentMonth = function(){
return this.currentMonth;
};
// 获取当前日期
Calendar.getCurrentDays = function(){
return this.currentDays;
};
// class CalendarWidget
// 日历控件的UI
var CalendarWidget = {};
CalendarWidget.initialize = function (o) {
var self = this;
// 提取配置参数
var now = new Date();
var currentYear = parseInt(o.currentYear || now.getFullYear()),
currentMonth = parseInt(o.currentMonth || now.getMonth() + 1),
startYear = parseInt(o.startYear || 1900),
endYear = parseInt(o.endYear || now.getFullYear()),
input = o.input;
this.input = input;
// 日历控件容器
var content = document.createElement('div');
content.className = 'eui-calendar';
// 设置年、月选择UI
var selectContent = document.createElement('ul'),
yearHTML = '',
monthHTML = '';
yearHTML += '<li><select data-calendar="year">';
for (var j = startYear; j <= endYear; j++) {
yearHTML += '<option value="' + j + '">' + j + '年</option>';
}
yearHTML += '</select></li>';
monthHTML += '<li><select data-calendar="month">';
for (var i = 1, MONTHS_LENGTH = 12; i <= MONTHS_LENGTH; i++) {
monthHTML += '<option value="' + i + '">' + i + '月</option>';
}
monthHTML += '</select></li>';
selectContent.innerHTML = yearHTML + monthHTML;
selectContent.className = 'eui-calendar-selectcontent';
var yearSelect = selectContent.getElementsByTagName('select')[0],
monthSelect = selectContent.getElementsByTagName('select')[1];
yearSelect.selectedIndex = currentYear - startYear;
monthSelect.selectedIndex = currentMonth - 1;
// 星期UI
var weekContent = document.createElement('ul'),
weeks = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
weekHTML = '';
for (var m = 0, len = weeks.length; m < len; m++) {
weekHTML += '<li class="eui-calendar-weekday">' + weeks[m] + '</li>';
}
weekContent.innerHTML = weekHTML;
weekContent.className = 'eui-calendar-week';
// 初始化日历数据仓库，并建立日期UI
this.calendar = Calendar;
this.calendar.initialize({
currentYear: currentYear,
currentMonth: currentMonth
});
this.dateContent = document.createElement('ul');
this.dateContent.className = 'eui-calendar-datecontent';
this.resetDateContent();
// 添加控件到HTML文档
content.appendChild(selectContent);
content.appendChild(weekContent);
content.appendChild(this.dateContent);
document.body.appendChild(content);
_setPosition(content, input);
function onchange(e) {
self.change(yearSelect.value, monthSelect.value);
}
function onputdate(e) {
e = eui.getEvent(e);
var target = eui.getTarget(e),
data = target.getAttribute('data-calendar');
if (data === 'day') {
var date = self.getDate(target.innerHTML);
input.value = date.year + '-' + date.month + '-' + date.date;
_hide(content);
}
if (!eui.isContent(target, content) && target !== input) {
_hide(content);
}
}
function onshow() {
_show(content);
}
eui.addHandler(yearSelect, 'change', onchange);
eui.addHandler(monthSelect, 'change', onchange);
eui.addHandler(document, 'click', onputdate);
eui.addHandler(input, 'focus', onshow);
};
// 设置日期控件
CalendarWidget.resetDateContent = function () {
var now = new Date(),
todayYear = now.getFullYear(),
todayMonth = now.getMonth() + 1,
todayDate = now.getDate(),
currentYear = this.calendar.getCurrentYear(),
currentMonth = this.calendar.getCurrentMonth();
var currentDays = this.calendar.getCurrentDays(),
weekdays = this.calendar.getWeekday(),
dateHTML = '';
for (var i = 0; i < weekdays; i++) {
dateHTML += '<li class="eui-calendar-lastmonthdate"></li>'
}
for (var n = 0, daysLength = currentDays.length; n < daysLength; n++) {
if (todayYear == currentYear && todayMonth == currentMonth
&& todayDate == n + 1) {
dateHTML += '<li class="eui-calendar-date eui-calendar-today" data-calendar="day">' +
currentDays[n] + '</li>';
} else {
dateHTML += '<li class="eui-calendar-date" data-calendar="day">' +
currentDays[n] + '</li>';
}
}
this.dateContent.innerHTML = dateHTML;
};
CalendarWidget.change = function (year, month) {
this.calendar.change(parseInt(year), parseInt(month));
this.resetDateContent();
};
CalendarWidget.getDate = function (date) {
return {
year:this.calendar.getCurrentYear(),
month:this.calendar.getCurrentMonth(),
date:date
};
};
function _setPosition(elem, input){
var left = eui.getElemLeft(input),
top = eui.getElemTop(input),
height = input.offsetHeight;
elem.style.left = left + 'px';
elem.style.top = top + height + 5 + 'px';
}
function _show (elem) {
elem.style.display = 'block';
};
function _hide (elem) {
elem.style.display = 'none';
};
eui.calendar = function (o) {
var calendarWidget = CalendarWidget;
calendarWidget.initialize(o);
};
})();
(function () {
eui.addHandler(window, 'load', function () {
eui.calendar({
startYear: 1900,
input: document.getElementById('birthday')
});
});
})();
