简约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 相关文章推荐
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
用Angular实现一个扫雷的游戏示例
May 15 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
js的回调函数详解
2015/01/05 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
Python splitlines使用技巧
2008/09/06 Python
python类型强制转换long to int的代码
2013/02/10 Python
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Python基于requests库爬取网站信息
2020/03/02 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
知识竞赛主持词
2014/03/26 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs