简约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程序来实现动画功能
Mar 06 Javascript
简单的JS多重继承示例
Mar 13 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
package.json各个属性说明详解
Mar 11 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短域名转换为实际域名函数
2011/01/17 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
Javascript Object.extend
2010/05/18 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
Python中os.path用法分析
2015/01/15 Python
小小聊天室Python代码实现
2016/08/17 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python读取文件名并改名字的实例
2019/01/07 Python
详解Python中is和==的区别
2019/03/21 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
Python转换时间的图文方法
2019/07/01 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
金融学专科生自我鉴定
2014/02/21 职场文书
珍惜资源的建议书
2014/08/26 职场文书
个人剖析材料范文
2014/09/30 职场文书
实习介绍信范文
2015/05/05 职场文书
保护动物的宣传语
2015/07/13 职场文书
培训后的感想
2015/08/07 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript