<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>日历控件</title>
<style type="text/css">
#calendar{ width:142px; padding:5px; height:198px; background:#FCF; -webkit-user-select:none; position:absolute;}
#calendar div.week span,#calendar span.date{ width:14px; font-size:12px; height:20px; text-align:center; line-height:20px; border:1px solid #ccc; margin:2px; float:left;}
#calendar span.date{ background:#fff; cursor:pointer;}
#calendar div.week{ clear:both; overflow:hidden;}
#calendar div.week span{ font-weight:bold;}
#calendar h6{ margin:0; padding:0; font-size:14px; line-height:20px; text-align:center; position:relative; overflow:hidden; height:20px;}
#prev,#next{ width:45px; text-align:center; position:absolute; color:blue; cursor:pointer; }
#prev{ left:0;}
#next{ right:0;}
</style>
</head> <body>
<input type="text" value="请输入……" id="input1">
</body>
</html>
<script>
input1.onfocus=function(){
  createCalendar(this);
}
//input1.onfocus=new Function("this;calendar(this)");
function createCalendar(ele){
var obj=offset(ele);
var l=obj.left;
var t=obj.top;
var oCalendar=document.getElementById('calendar');
if(oCalendar)return;
oCalendar=document.createElement('div');
oCalendar.style.top=t+'px';
oCalendar.style.left=l+ele.offsetWidth+5+'px';
oCalendar.id="calendar";
var oTitle=document.createElement('h6');
oCalendar.appendChild(oTitle);
oTitle.className="title";
//创建上prev按钮
var oPrev=document.createElement('span');
oPrev.id="prev";
oPrev.innerHTML="prev";
oTitle.appendChild(oPrev);
oPrev.onclick=function(){activeCalendar(--month);}
//创建中间titleContent
var oTitleContent=document.createElement('span');
//oTitleContent.id="titleContent";
oTitle.appendChild(oTitleContent);
var d=new Date;
var year=d.getFullYear();
var month=d.getMonth();
var m=month;
//oTitleContent.innerHTML=year+"年"+(month+1)+"月"
//创建next按钮
var oNext=document.createElement('span');
oNext.id="next";
oNext.innerHTML="next";
oNext.onclick=function(){activeCalendar(++month);}
oTitle.appendChild(oNext);
//创建周的导航栏
var aWeek=["日","一","二","三","四","五","六"];
var oWeek=document.createElement('div');
oWeek.className="week";
oCalendar.appendChild(oWeek); for(var i=0;i<7;i++){
var oSpan=document.createElement('span');
oSpan.innerHTML=aWeek[i];
oWeek.appendChild(oSpan);
}
//创建日期的容器
var oDateContent=document.createElement('div');
oDateContent.id="dateContent";
oCalendar.appendChild(oDateContent);
document.body.appendChild(oCalendar);
activeCalendar(month);
function activeCalendar(month){
oDateContent.innerHTML="";
var d1=new Date(year,month,1);
var diff=1-d1.getDay();
month=d1.getMonth();
if(diff==1)diff=-6;
d1.setDate(diff); oTitleContent.innerHTML=d1.getFullYear()+"年"+(d1.getMonth()+2)+"月"
for(var i=0;i<42;i++){
var oSpan=document.createElement('span');
oSpan.className="date";
var currentDate=d1.getDate();
oSpan.innerHTML=currentDate;
oSpan.curDate=d1.getFullYear()+"-"+(d1.getMonth()+1)+"-"+currentDate;
if(d1.getMonth()!=month){
oSpan.style.backgroundColor="#ccc";
}
oSpan.onclick=function(){
ele.value=this.curDate;
document.body.removeChild(oCalendar);
oCalendar=null }
d1.setDate(++currentDate);
oDateContent.appendChild(oSpan);
}
}
} function offset(ele){
var l=ele.offsetLeft;
var t=ele.offsetTop;
var p=ele.offsetParent;
while(p){
if(window.navigator.userAgent.indexOf("MSIE 8")>-1){
l+=p.offsetLeft;
t+=p.offsetTop;
}else{
l+=p.offsetLeft+p.clientLeft;
t+=p.offsetTop+p.clientTop;
}
p=p.offsetParent;
}
return {left:l,top:t}
} </script>

原生js-日历插件的更多相关文章

  1. 原生js日历选择器,学习js面向对象开发日历插件

    在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...

  2. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. js日历插件 中文、英文日历

    日历插件 来源网站:http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 六款英文日历 http://www.bobd.cn/desi ...

  4. 原生Js弹窗插件|web弹出层组件|对话框

    wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...

  5. My97DatePicker{js日历插件}

    VS自带了一个日历控件:Calendar,但是它有一个缺陷:即在选择,隐藏,显示的时候都会引起回传 Calendar控件的一些用法:    取值:Calendar1.SelectedDate.ToSh ...

  6. JS日历插件 - My97 DatePicker用法详解

    一.简介 1. 注意事项 (1)My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名: (2)各目录及文件的用途: WdatePicker.js 配 ...

  7. 原生JS日历 + JS格式化时间格式

    公司项目中用到,以前没做过,废了好几个小时 终于做好了 先来效果图(暂时没写样式 凑合着看吧) 点击左右按钮都能改变月份 下方表格中的数据也会跟着变化 贴上代码 : html部分: <div s ...

  8. 纯js日历插件

    成品的效果图 1.HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  9. (三)原生JS实现 - 插件 - 弹出层

    创建遮罩层 _createCover: function() { var newMask = document.createElement("div"); newMask.id = ...

  10. 原生js封装插件

    https://www.jianshu.com/p/937c6003851a object-fit: cover:https://www.jianshu.com/p/a2ce70fa9584 flex ...

随机推荐

  1. dojo布局(layout)

    使用BorderContainer和ContentPane实现布局 1.效果图如下: 2.HTML代码: <div id="appLayout" class="de ...

  2. [整理]S-Record数据格式解析

    S-Reord是一种由摩托罗拉公司创建的文件格式(不得不说,摩托罗拉厉害啊,SPI和S-Record都是他们创造的).S-Record的基本字符为ASCII字符,用以表示相应的十六进制数据.该数据格式 ...

  3. 关于 cellForRor中给cell setSelected的时机问题?

    我在  cell  里边 - (void)setSelected:(BOOL)selected animated:(BOOL)animated { [super setSelected:selecte ...

  4. nignx软件安装与调试

    1.通过yum或下载相应软件包安装nginx所需要的辅助软件:pcre.pcre-devel.openssl.openssl-devel.make.gcc.gcc+ 2.解压已经下载好的nginx软件 ...

  5. linux用户管理

    管理用户的文件 添加用户组 添加用户 修改权限

  6. Java汉字转拼音

    import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin4j.format.HanyuPinyinCase ...

  7. Java常用的7大排序算法汇总

    1.插入排序算法 插入排序的基本思想是在遍历数组的过程中,假设在序号 i 之前的元素即 [0..i-1] 都已经排好序,本趟需要找到 i 对应的元素 x 的正确位置 k ,并且在寻找这个位置 k 的过 ...

  8. Spring 4 官方文档学习(十三)集成其他web框架

    重点是通用配置,非常建议看一下!有助于理解Spring的ApplicationContext与Servlet Container的关系! 1.介绍 Spring Web Flow SWF目标是成为we ...

  9. <head></head>

    <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8&qu ...

  10. js如何找到方法在哪个js文件

    在Console窗口中输入var f = methodA.prototype.constructor;console.log(f); 网络搜索到的方法.