简约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 相关文章推荐
javascript options属性集合操作代码
Dec 28 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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的5个入手程序
2006/11/23 PHP
FleaPHP的安全设置方法
2008/09/15 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
Django获取应用下的所有models的例子
2019/08/30 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
自我评价的范文
2014/02/02 职场文书
市政管理求职信范文
2014/05/07 职场文书
滞留工资返还协议书
2014/10/19 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
经典爱情感言
2015/08/03 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
聊聊redis-dump工具安装问题
2022/01/18 Redis
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript