简约JS日历控件 实例代码


Posted in Javascript onJuly 12, 2013

运行结果如下:

简约JS日历控件 实例代码

<script type="text/javascript" language="javascript">
function choose_date_czw(date_id,objtd){
if(date_id=="choose_date_czw_close"){
    document.getElementByIdx_x_x("choose_date_czw_id").style.display="none";
    return;
}
if(objtd!=undefined){
    if(objtd=="choose_date_czw_empty"){
        document.getElementByIdx_x_x(date_id).value="";
    }else{
        var year1 = document.getElementByIdx_x_x("choose_date_czw_year").value;
        var month1 = document.getElementByIdx_x_x("choose_date_czw_month").value;
        document.getElementByIdx_x_x(date_id).value=year1+"-"+month1+"-"+objtd.innerHTML;
    }
    document.getElementByIdx_x_x("choose_date_czw_id").style.display="none";
    return;
}
var nstr=new Date(); //当前
if(document.getElementByIdx_x_x("choose_date_czw_year")!=null){
    var year = document.getElementByIdx_x_x("choose_date_czw_year").value;
    var month = document.getElementByIdx_x_x("choose_date_czw_month").value;
    var str=year+"/"+month+"/1";
    nstr=new Date(str); //当前
}
var ynow=nstr.getFullYear(); //年份
var mnow=nstr.getMonth(); //月份
var dnow=nstr.getDate(); //今日日期
var n1str=new Date(ynow,mnow,1); //当月第一天
var firstday=n1str.getDay(); //当月第一天星期几
function is_leap(year) {
   return (year0==0 ? res=(year@0==0 ? 1 : 0) : res=(year%4==0 ? 1: 0));
}
var dstr="<select id=\"choose_date_czw_year\" onchange=\"choose_date_czw('"+date_id+"')\">";
for(var y=1901;y<2050;y++){
    if(y==ynow){
        dstr+="<option value='"+y+"' selected>"+y+"</option>"
    }else{
        dstr+="<option value='"+y+"'>"+y+"</option>"
    }
}
dstr+="</select> <select id=\"choose_date_czw_month\" onchange=\"choose_date_czw('"+date_id+"')\">";
for(var m=1;m<13;m++){
    if(parseInt(mnow+1)==m){
        dstr+="<option value='"+m+"' selected>"+m+"</option>"
    }else{
        dstr+="<option value='"+m+"'>"+m+"</option>"
    }
}
dstr+="</select> <span style='cursor:pointer;' onclick=\"choose_date_czw('choose_date_czw_close')\">关闭</span>|<span style='cursor:pointer;' onclick=\"choose_date_czw('"+date_id+"','choose_date_czw_empty')\">清空</span>";
//一三五七八十腊(十二月),三十一日永不差;四六九冬(十一月)三十日,唯有二月二十八(闰年二十九).
var m_days = new Array(31,28+is_leap(ynow),31,30,31,30,31,31,30,31,30,31);
var tr_str=Math.ceil((m_days[mnow] + firstday)/7);
dstr+="<table border='0' cellpadding='5' cellspacing='0'><tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>";
var dqdate=new Date(); //当前
for(i=0;i<tr_str;i++) { //外层for语句- tr标签
   dstr+="<tr>";
   for(k=0;k<7;k++) { //内层for语句- td标签
      idx=i*7+k; //表格单元的自然序号
      date_str=idx-firstday+1; //计算日期
     if(date_str<=0 || date_str>m_days[mnow]){
          dstr+="<td> </td>";
     }else{
        if(ynow==dqdate.getFullYear() && mnow==dqdate.getMonth() && dqdate.getDate()==date_str){
            dstr+="<td onmouseover=\"this.style.backgroundColor='#6FF'\" onmouseout=\"this.style.backgroundColor='#fff'\" onclick=\"choose_date_czw('"+date_id+"',this)\" style='cursor:pointer; background-color:#6FF;'>"+date_str+"</td>";
        }else{
            dstr+="<td onmouseover=\"this.style.backgroundColor='#6FF'\" onmouseout=\"this.style.backgroundColor='#fff'\" onclick=\"choose_date_czw('"+date_id+"',this)\" style='cursor:pointer;'>"+date_str+"</td>";
        }
     }
   }
   dstr+="</tr>";
}
dstr+="</table>";
if(document.getElementByIdx_x_x("choose_date_czw_id")==null){
var obj = document.getElementByIdx_x_x(date_id);
var odiv = document_createElement_x_x("div");
odiv.id="choose_date_czw_id";
odiv.innerHTML=dstr;
odiv.style.position="absolute";
odiv.style.border="1px #0CF solid";
odiv.style.fontSize="12px";
odiv.style.zIndex=99999;
odiv.style.top=obj.offsetTop+obj.offsetHeight+"px";
odiv.style.left=obj.offsetLeft+"px";
document.body.a(odiv);
}else{
    document.getElementByIdx_x_x("choose_date_czw_id").style.display="block";
    document.getElementByIdx_x_x("choose_date_czw_id").innerHTML=dstr;
}
}
</script>
<input type="text" id="add_date" onclick="choose_date_czw('add_date')"/>
Javascript 相关文章推荐
JS 图片缩放效果代码
Jun 09 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
javascript中自定义对象的属性方法分享
Jul 12 #Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 #Javascript
javascript中的parseInt和parseFloat区别
Jul 12 #Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 #Javascript
JS代码同步文本框内容的实例方法
Jul 12 #Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 #Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 #Javascript
You might like
PHP连接access数据库
2015/03/27 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
Web服务器框架 Tornado简介
2014/07/16 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
int在python中的含义以及用法
2019/06/27 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
Python实现自动整理文件的脚本
2020/12/17 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
会计实习自我鉴定
2013/12/04 职场文书
购房意向书范本
2014/04/01 职场文书
医学专业自荐信
2014/06/14 职场文书
个人总结与自我评价
2014/09/18 职场文书
英语邀请函范文
2015/02/02 职场文书
学校社团活动总结
2015/05/07 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript