<!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. MongoDB导入(mongoimport)-导出(mongoexport)工具使用

    1.导出工具-mongoexport Mongodb中的mongoexport工具可以把一个collection导出为JSON格式或者CSV格式文件. (1).导出为JSON文件 /opt/mongo ...

  2. 数据库imp导表dmp的方法

    1>sqlplus / as sysdba 进入sqlplus 2>drop user USER cascade 3>create user USER IDENTIFIED BY P ...

  3. DUILIB 实现微信气泡聊天效果

    最近由于项目原因,需要做一个产品内嵌的IM聊天系统.而且要象微信类似的效果:界面也要比较炫: 开始考虑用MFC,但MFC的控件自绘很麻烦,后来又考虑QT,倒是使用控件使用方便,但QT库太大,所以也放弃 ...

  4. C# Using 用法

    using 语句允许程序员指定使用资源的对象应当何时释放资源.为 using 语句提供的对象必须实现 IDisposable 接口.此接口提供了 Dispose 方法,该方法将释放此对象的资源. 一起 ...

  5. java中的算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运算符

    一.算术运算符 算术运算符主要用于进行基本的算术运算,如加法.减法.乘法.除法等. Java 中常用的算术运算符: 其中,++ 和 -- 既可以出现在操作数的左边,也可以出现在右边,但结果是不同滴 例 ...

  6. 30分钟groovy快速入门并掌握(ubuntu 14.04+IntelliJ 13)

    本文适合于不熟悉 Groovy,但想快速轻松地了解其基础知识的 Java开发人员.了解 Groovy 对 Java 语法的简化变形,学习 Groovy 的核心功能,例如本地集合.内置正则表达式和闭包. ...

  7. 16.10.18学到的Java知识

    1. 突然间发现自己忘了关于自增自减运算符放在变量前后的区别是什么了? 于是乎,我查了资料. 如果只对自变量进行加1或减1的时候,放在前面和后面都是没有区别的. 但是,如果自增自减运算符使用在需要赋值 ...

  8. delphi7 在虚拟机 vbox里面安装失败

    提示Error 1324.The path My Pictures contains an invalid character. 解决办法:新建一个文件夹,123, 设置 我的文档文件夹 目录指向 “ ...

  9. 从tomcat启动到springIoC容器初始化（编辑中）

    tomcat的启动一般是从startup.bat/startup.sh开始,然后启动catalina.bat/catalina.sh,然后启动bootstrap.jar包 那么它们启动的时候都做了哪些 ...

  10. django+nginx+xshell简易日志查询,接上<关于《rsyslog+mysql+loganalyzer搭建日志服务器<个人笔记>》的反思>

    纠正一下之前在<关于<rsyslog+mysql+loganalyzer搭建日志服务器<个人笔记>>的反思>中说到的PHP+MySQL太慢,这里只是说我技术不好,没 ...