js 点击文本框后弹出选择日期

最新推荐文章于 2021-11-16 14:45:19 发布
最新推荐文章于 2021-11-16 14:45:19 发布
阅读量1.2k 收藏
点赞数
文章标签： date javascript function class float border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangmurong/article/details/6258061
版权

以下代码只要复制到html 即可看到效果。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网">
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网">
<title>一款非常不错的日期选择效果，sky整理收集，站长特效欢迎您。</title>
<script type="text/javascript">
function HS_DateAdd(interval,number,date){
    number = parseInt(number);
    if (typeof(date)=="string"){var date = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2])}
    if (typeof(date)=="object"){var date = date}
    switch(interval){
    case "y":return new Date(date.getFullYear()+number,date.getMonth(),date.getDate()); break;
    case "m":return new Date(date.getFullYear(),date.getMonth()+number,checkDate(date.getFullYear(),date.getMonth()+number,date.getDate())); break;
    case "d":return new Date(date.getFullYear(),date.getMonth(),date.getDate()+number); break;
    case "w":return new Date(date.getFullYear(),date.getMonth(),7*number+date.getDate()); break;
    }
}
function checkDate(year,month,date){
    var enddate = ["31","28","31","30","31","30","31","31","30","31","30","31"];
    var returnDate = "";
    if (year%4==0){enddate[1]="29"}
    if (date>enddate[month]){returnDate = enddate[month]}else{returnDate = date}
    return returnDate;
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function WeekDay(date){
    var theDate;
    if (typeof(date)=="string"){theDate = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2]);}
    if (typeof(date)=="object"){theDate = date}
    return theDate.getDay();
}
function HS_calender(){
    var lis = "";
    var style = "";
    /*可以把下面的css剪切出去独立一个css文件zzjs.net*/
    style +="<style type='text/css'>";
    style +=".calender { width:170px; height:auto; font-size:12px; margin-right:14px; background:url(calenderbg.gif) no-repeat right center #fff; border:1px solid #397EAE; padding:1px}";
    style +=".calender ul {list-style-type:none; margin:0; padding:0;}";
    style +=".calender .day { background-color:#EDF5FF; height:20px;}";
    style +=".calender .day li,.calender .date li{ float:left; width:14%; height:20px; line-height:20px; text-align:center}";
    style +=".calender li a { text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}";
    style +=".calender li a:hover { color:#f30; text-decoration:underline}";
    style +=".calender li a.hasArticle {font-weight:bold; color:#f60 !important}";
    style +=".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}";
    style +=".selectThisYear a, .selectThisMonth a{text-decoration:none; margin:0 2px; color:#000; font-weight:bold}";
    style +=".calender .LastMonth, .calender .NextMonth{ text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}";
    style +=".calender .LastMonth { float:left;}";
    style +=".calender .NextMonth { float:right;}";
    style +=".calenderBody {clear:both}";
    style +=".calenderTitle {text-align:center;height:20px; line-height:20px; clear:both}";
    style +=".today { background-color:#ffffaa;border:1px solid #f60; padding:2px}";
    style +=".today a { color:#f30; }";
    style +=".calenderBottom {clear:both; border-top:1px solid #ddd; padding: 3px 0; text-align:left}";
    style +=".calenderBottom a {text-decoration:none; margin:2px !important; font-weight:bold; color:#000}";
    style +=".calenderBottom a.closeCalender{float:right}";
    style +=".closeCalenderBox {float:right; border:1px solid #000; background:#fff; font-size:9px; width:11px; height:11px; line-height:11px; text-align:center;overflow:hidden; font-weight:normal !important}";
    style +="</style>";
    var now;
    if (typeof(arguments[0])=="string"){
        selectDate = arguments[0].split("-");
        var year = selectDate[0];
        var month = parseInt(selectDate[1])-1+"";
        var date = selectDate[2];
        now = new Date(year,month,date);
    }else if (typeof(arguments[0])=="object"){
        now = arguments[0];
    }
    var lastMonthEndDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+now.getMonth()+"-01").getDate();
    var lastMonthDate = WeekDay(now.getFullYear()+"-"+now.getMonth()+"-01");
    var thisMonthLastDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-01");
    var thisMonthEndDate = thisMonthLastDate.getDate();
    var thisMonthEndDay = thisMonthLastDate.getDay();
    var todayObj = new Date();
    today = todayObj.getFullYear()+"-"+todayObj.getMonth()+"-"+todayObj.getDate();
    for (i=0; i<lastMonthDate; i++){  // Last Month's Date
        lis = "<li class='lastMonthDate'>"+lastMonthEndDate+"</li>" + lis;
        lastMonthEndDate--;
    }
    for (i=1; i<=thisMonthEndDate; i++){ // Current Month's Date
        if(today == now.getFullYear()+"-"+now.getMonth()+"-"+i){
            var todayString = now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-"+i;
            lis += "<li><a href=javascript:void(0) class='today' οnclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";
        }else{
            lis += "<li><a href=javascript:void(0) οnclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";
        }
    }
    var j=1;
    for (i=thisMonthEndDay; i<6; i++){  // Next Month's Date
        lis += "<li class='nextMonthDate'>"+j+"</li>";
        j++;
    }
    lis += style;
    var CalenderTitle = "<a href='javascript:void(0)' class='NextMonth' οnclick=HS_calender(HS_DateAdd('m',1,'"+now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+"'),this) title='Next Month'>»</a>";
    CalenderTitle += "<a href='javascript:void(0)' class='LastMonth' οnclick=HS_calender(HS_DateAdd('m',-1,'"+now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+"'),this) title='Previous Month'>«</a>";
    CalenderTitle += "<span class='selectThisYear'><a href='javascript:void(0)' οnclick='CalenderselectYear(this)' title='Click here to select other year' >"+now.getFullYear()+"</a></span>年<span class='selectThisMonth'><a href='javascript:void(0)' οnclick='CalenderselectMonth(this)' title='Click here to select other month'>"+(parseInt(now.getMonth())+1).toString()+"</a></span>月";
    if (arguments.length>1){
        arguments[1].parentNode.parentNode.getElementsByTagName("ul")[1].innerHTML = lis;
        arguments[1].parentNode.innerHTML = CalenderTitle;
    }else{
        var CalenderBox = style+"<div class='calender'><div class='calenderTitle'>"+CalenderTitle+"</div><div class='calenderBody'><ul class='day'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class='date' id='thisMonthDate'>"+lis+"</ul></div><div class='calenderBottom'><a href='javascript:void(0)' class='closeCalender' οnclick='closeCalender(this)'>×</a><span><span><a href=javascript:void(0) οnclick='_selectThisDay(this)' title='"+todayString+"'>Today</a></span></span></div></div>";
        return CalenderBox;
    }
}
function _selectThisDay(d){
    var boxObj = d.parentNode.parentNode.parentNode.parentNode.parentNode;
        boxObj.targetObj.value = d.title;
        boxObj.parentNode.removeChild(boxObj);
}
function closeCalender(d){
    var boxObj = d.parentNode.parentNode.parentNode;
        boxObj.parentNode.removeChild(boxObj);
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function CalenderselectYear(obj){
        var opt = "";
        var thisYear = obj.innerHTML;
        for (i=1970; i<=2020; i++){
            if (i==thisYear){
                opt += "<option value="+i+" selected>"+i+"</option>";
            }else{
                opt += "<option value="+i+">"+i+"</option>";
            }
        }
        opt = "<select οnblur='selectThisYear(this)' οnchange='selectThisYear(this)' style='font-size:11px'>"+opt+"</select>";
        obj.parentNode.innerHTML = opt;
}
function selectThisYear(obj){
    HS_calender(obj.value+"-"+obj.parentNode.parentNode.getElementsByTagName("span")[1].getElementsByTagName("a")[0].innerHTML+"-1",obj.parentNode);
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function CalenderselectMonth(obj){
        var opt = "";
        var thisMonth = obj.innerHTML;
        for (i=1; i<=12; i++){
            if (i==thisMonth){
                opt += "<option value="+i+" selected>"+i+"</option>";
            }else{
                opt += "<option value="+i+">"+i+"</option>";
            }
        }
        opt = "<select οnblur='selectThisMonth(this)' οnchange='selectThisMonth(this)' style='font-size:11px'>"+opt+"</select>";
        obj.parentNode.innerHTML = opt;
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function selectThisMonth(obj){
    HS_calender(obj.parentNode.parentNode.getElementsByTagName("span")[0].getElementsByTagName("a")[0].innerHTML+"-"+obj.value+"-1",obj.parentNode);
}
function HS_setDate(inputObj){
    var calenderObj = document.createElement("span");
    calenderObj.innerHTML = HS_calender(new Date());
    calenderObj.style.position = "absolute";
    calenderObj.targetObj = inputObj;
    inputObj.parentNode.insertBefore(calenderObj,inputObj.nextSibling);
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  </script>
<style>
  body {font-size:12px}
  td {text-align:center}
  h1 {font-size:26px;}
  h4 {font-size:16px;}
  em {color:#999; margin:0 10px; font-size:11px; display:block}
  </style>
</head><body>
<a href="http://js.alixixi.com/%3C#ZC_BLOG_HOST#%3E">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<h1>Date Picker</h1>
<h4 style="border-bottom: 1px solid rgb(204, 204, 204);">ver:1.0</h4>
<table border="1" width="400" height="150">
    <tbody><tr>
        <td>文本文本文本</td>
        <td>点击输入框</td>
        <td>文本文本文本</td>
    </tr>
    <tr>
        <td>点击输入框</td>
        <td><input style="width: 70px;" οnfοcus="HS_setDate(this)" type="text">文本</td>
        <td>文本文本文本</td>
    </tr>
    <tr>
        <td>文本文本文本</td>
        <td>点击输入框</td>
        <td>文本<input style="width: 70px;" οnfοcus="HS_setDate(this)" type="text">文本</td>
    </tr>
</tbody></table>
<ul>
    <li>不需要其他框架类库</li>
    <li>支持ie6、firefox、opera</li>
    <li>点击年份与月份可以下拉选择</li>
</ul>
</body></html>

jiangmurong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS轻松实现单击文本框弹出选择日期
04-11
以上就是使用JavaScript实现单击文本框弹出日期选择器的基本步骤。通过结合HTML、CSS和JavaScript，我们可以创建出交互性良好的前端界面，提升用户的操作体验。无论选择哪种方式，关键在于理解JavaScript事件处理和...
选择日期弹框html,JS——点击文本框弹出选择日期表格
weixin_42185419的博客
06-03 1695
最近用到了一个选择日期的代码，和大家分享一下： //日期挑选框var DS_x,DS_y;function dateSelector()//构造dateSelector对象，用来实现一个日历形式的日期输入框。{var myDate=new Date();this.year=myDate.getFullYear(); //定义year属性，年份，默认值为当前系统年份。this.month=myDat...
js获取日期选择器值html,利用Query+bootstrap和js两种方式实现日期选择器
weixin_28739079的博客
06-03 2461
前言所谓日期选择是在下拉列表中选择年、月、日，年显示前后的五年，12个月，日就是有30、31、29、28天的区别，随着月份的变而变，本文介绍了利用Query+bootstrap和js实现日期选择器的两种方法，下面来一起学习学习吧。一、js方式的日期选择(1)首先就是三个下拉列表了，点击年、月、日显示列表中的内容，这样就是要给这三个列表加“点击事件”onclick年月日也就是这样的效果：(2)写js...
js 移动端 日期选择底部弹出插件
jinse29的博客
11-16 2661
先放一张效果图,没用使用框架,H5原生实现 插件是我在网上找的,叫Mdate.js 这是下载地址https://download.csdn.net/download/jinse29/43001045 使用非常简单,看下面代码 <input type="text" id="dateSelectorStart" placeholder="选择日期"> <script src="../lib/Mdate/iScroll.js"></script> <sc
javaScript实现点击文本框text弹出日期选择控件源码.zip
11-04
在这个特定的案例中，"javaScript实现点击文本框text弹出日期选择控件源码.zip"是一个包含源代码的压缩包，其目标是提供一个功能，即当用户点击文本框时，会弹出一个日期选择器，帮助用户方便地输入日期。...
点击text文本框弹出日期选择器
05-07
"点击text文本框弹出日期选择器"是一个常见的需求，它提高了用户输入日期的便捷性和准确性。这一功能通常借助JavaScript库如jQuery实现，因为jQuery提供了丰富的DOM操作和事件处理功能，使得开发者能够轻松创建这种...
点击text文本框弹出日期选择器特效代码
03-20
总的来说，"点击text文本框弹出日期选择器特效代码"是前端开发中一个实用的交互功能，通过JavaScript可以实现高效且友好的用户界面。如果你正在学习前端开发，理解并实现这样的功能将有助于提升你的技能。记得查看...
点击文本框弹出日历控件（可以选择日期）
04-28
实例，只要把JS代码调用就可以了，方法在文档里有写，非常详细，可以直接插入使用。
jquery日期日历插件 单击文本框弹出日期选择控件
07-24
jquery date选择日历控件鼠标点击text文本框弹出日期选择 单击文本框弹出日期选择控件 实用的日历效果，兼容性好。
html+javascript的简单带文本框选择日期控件
09-20
简单的文本框日期控件，只需要一个js文件+文本框上一个触发事件。
js在文本框通过日历选择日期的控件
04-03
js文本框时间控件,点击输入框后出现日历选择框的JS控件。
单击文本框弹出日期选择控件
06-01
单击文本框弹出日期选择控件,选择时间后显示在文本框中。
点击input，弹出日期选择框
06-06
在页面中加入input，type=text，设置onclick事件调用js
JS弹出日期控件升级版(带时间选择)
我是一棵树
06-18 1771
 http://download1.csdn.net/down3/20070618/18183951606.rar 请下载上面的文件包,里面有JS文件以及相关的图片和实例,如果有什么BUG请大提出来!
js弹出选择时间窗口选择时间
cheng - cheer up。。。 。。。
11-06 1707
日期选择 - BY ziyue /*=======Calendar.js=======By Jiang Hongbin=======*/ var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月&q
html+css+js做一个点击选择日期的效果
最新发布
06-01
好的，以下是一个简单的示例代码，可以实现点击选择日期的效果： ...当用户点击文本框时，会弹出日期选择器，日期选择器中的单元格可以点击选择日期，选择后日期选择器会自动隐藏，选择的日期会显示在文本框中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值