时间拾取器

最新推荐文章于 2019-12-17 20:53:16 发布
最新推荐文章于 2019-12-17 20:53:16 发布
阅读量214 收藏
点赞数
分类专栏： JavaScript 文章标签： Microsoft JavaScript XHTML HTML ViewUI 
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/jscript">

// 日期选择
var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"); 
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
var days = new Array("日","一", "二", "三", "四", "五", "六"); 
var today;

document.writeln("<div id='Calendar' style='position:absolute; z-index:1; visibility: hidden; filter:\"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)\"'></div>");

function getDays(month, year)
{ 
    //下面的这段代码是判断当前是否是闰年的 
    if (1 == month) 
        return ((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400) ? 29 : 28; 
    else 
        return daysInMonth[month]; 
}

function getToday() 
{ 
    //得到今天的年,月,日 
    this.now = new Date(); 
    this.year = this.now.getFullYear(); 
    this.month = this.now.getMonth(); 
    this.day = this.now.getDate(); 
}

function getStringDay(str) 
{ 
    //得到输入框的年,月,日
    var str=str.split("-")
    
    this.now = new Date(parseFloat(str[0]),parseFloat(str[1])-1,parseFloat(str[2])); 
    this.year = this.now.getFullYear(); 
    this.month = this.now.getMonth(); 
    this.day = this.now.getDate(); 
}

function newCalendar() { 
    var parseYear = parseInt(document.getElementById("Year").options[document.getElementById("Year").selectedIndex].value); 
    var newCal = new Date(parseYear, document.getElementById("Month").selectedIndex, 1); 
    var day = -1; 
    var startDay = newCal.getDay(); 
    var daily = 0; 
    
    if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth())) 
        day = today.day; 
if(navigator.appName.indexOf("Explorer") > -1){ 
   var tableCal = document.all.calendar; 
} else{ 
   var tableCal = document.getElementById("calendar"); 
} 
    var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());
     
    for (var intWeek = 1; intWeek < tableCal.rows.length;intWeek++)
{
        for (var intDay = 0;intDay < tableCal.rows[intWeek].cells.length;intDay++) 
        { 
            var cell = tableCal.rows[intWeek].cells[intDay]; 
            if ((intDay == startDay) && (0 == daily)) 
                daily = 1; 
                
            if(day==daily) //今天，调用今天的Class 
            {
                cell.style.background='#6699CC';
                cell.style.color='#FFFFFF';
                //cell.style.fontWeight='bold';
            }
            else if(intDay==6) //周六 
                cell.style.color='green'; 
            else if (intDay==0) //周日 
                cell.style.color='red';
            
            if ((daily > 0) && (daily <= intDaysInMonth)) 
            { 
     if(navigator.appName.indexOf("Explorer") > -1){ 
      cell.innerText = daily; 
     } else{ 
        cell.textContent = daily; 
     } 
                //cell.innerText = daily; 
                daily++; 
            } 
            else 
     if(navigator.appName.indexOf("Explorer") > -1){ 
      cell.innerText = ""; 
     } else{ 
        cell.textContent = ""; 
     } 
                //cell.innerText = ""; 
        } 
}

if(navigator.appName.indexOf("Explorer") > -1){
}
else
{
   tableCal.rows[5].style.visibility="visible";
   tableCal.rows[6].style.visibility="visible";  
   if(tableCal.rows[5].cells[0].textContent=="")
   {
    tableCal.rows[5].style.visibility="hidden";
   }
   if(tableCal.rows[6].cells[0].textContent=="")
   {
    tableCal.rows[6].style.visibility="hidden";
   }  
}
}

function GetDate(InputBox,evt)
{ 
    var sDate;
if (window.navigator.userAgent.indexOf("MSIE")>=1){
   obj   =   event.srcElement;
}
else
{
   obj=evt.target;
}
    //这段代码处理鼠标点击的情况 
    if (obj.tagName == "TD") 
   if(navigator.appName.indexOf("Explorer") > -1){ 
    strtext=obj.innerText;
   } else{ 
    strtext=obj.textContent;
   } 
        if (strtext != "") 
        { 
            sDate = document.getElementById("Year").value + "-" + document.getElementById("Month").value + "-" + strtext;
            document.getElementById(InputBox).value=sDate;
            HiddenCalendar();
        } 
}

function HiddenCalendar()
{
    //关闭选择窗口
if(navigator.appName.indexOf("Explorer") > -1){ 
    //document.getElementById("calendar").rows[5].style.visibility="hidden"
   //document.getElementById("calendar").rows[6].style.visibility="hidden" 
} else{ 
    document.getElementById("calendar").rows[5].style.visibility="hidden"
   document.getElementById("calendar").rows[6].style.visibility="hidden"
} 
    document.getElementById("Calendar").style.visibility='hidden'; 
}

function ShowCalendar(InputBox)
{
    var x,y,intLoop,intWeeks,intDays;
    var DivContent;
    var year,month,day;
    var o=document.getElementById(InputBox);
    var thisyear; //真正的今年年份
    
    thisyear=new getToday();
    thisyear=thisyear.year;
    
    today = o.value;
    if(isDate(today))
        today = new getStringDay(today);
    else
        today = new getToday(); 
    
    //显示的位置
    x=o.offsetLeft;
    y=o.offsetTop;
    while(o=o.offsetParent)
    {
        x+=o.offsetLeft;
        y+=o.offsetTop;
    }
    document.getElementById("Calendar").style.left=x+"px";
    document.getElementById("Calendar").style.top=y+24+"px";
    document.getElementById("Calendar").style.visibility="visible";
    
    //下面开始输出日历表格(border-color:#9DBAF7)
    DivContent="<table border='0' cellspacing='0' style='border:1px solid #72A9CF; background-color:#EDF2FC'>";
    DivContent+="<tr>";
    DivContent+="<td style='border-bottom:1px solid #72A9CF; background-color:#C7D8FA'>";
    
    //年
    DivContent+="<select name='Year' id='Year' onChange='newCalendar()' style='font-family:Verdana; font-size:12px'>";
    for (intLoop = thisyear; intLoop < (thisyear + 2); intLoop++) 
        DivContent+="<option value= " + intLoop + " " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop + "</option>"; 
    DivContent+="</select>";
    
    //月
    DivContent+="<select name='Month' id='Month' onChange='newCalendar()' style='font-family:Verdana; font-size:12px'>";
    for (intLoop = 0; intLoop < months.length; intLoop++) 
        DivContent+="<option value= " + (intLoop + 1) + " " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop] + "</option>"; 
    DivContent+="</select>";
    
    DivContent+="</td>";
    
    DivContent+="<td style='border-bottom:1px solid #72A9CF; background-color:#C7D8FA; font-weight:bold; font-family:Wingdings 2,Wingdings,Webdings; font-size:16px; padding-top:2px; color:#4477FF;cursor: pointer' align='center' title='关闭' onClick='javascript:HiddenCalendar()'><img src='skin/btn_closeDate.gif' border='0'></td>";
    DivContent+="</tr>";
     
    DivContent+="<tr><td align='center' colspan='2'>";
    DivContent+="<table name='calendar' id='calendar' border='0' width='100%'>";
    
    //星期
    DivContent+="<tr>";
    for (intLoop = 0; intLoop < days.length; intLoop++) 
        DivContent+="<td align='center' style='font-size:12px'>" + days[intLoop] + "</td>"; 
    DivContent+="</tr>";
    
    //天
    for (intWeeks = 0; intWeeks < 6; intWeeks++)
    { 
        DivContent+="<tr>"; 
        for (intDays = 0; intDays < days.length; intDays++) 
            DivContent+="<td onClick='GetDate(\"" + InputBox + "\",event)' style='cursor: pointer;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #99bbdd; border-bottom:1px solid #99bbdd; color:#215DC6; font-family:Verdana;font-size:12px;line-height:16px' align='center'></td>"; 
        DivContent+="</tr>"; 
    } 
    DivContent+="</table></td></tr></table>";


DivContent+="<iframe frameborder='0' style='position:absolute;visibility:inherit;top:0px;left:0px;width:expression(this.parentNode.offsetWidth);height:expression(this.parentNode.offsetHeight);z-index:-1;filter='progid XImageTransform.Microsoft.Alpha(style=0,opacity=0)';'></iframe>";

    document.getElementById("Calendar").innerHTML=DivContent;
    newCalendar();
}

function isDate(dateStr)
{ 
    var datePat = /^(\d{4})(\-)(\d{1,2})(\-)(\d{1,2})$/;
    var matchArray = dateStr.match(datePat);
    if (matchArray == null) return false; 
    var month = matchArray[3];
    var day = matchArray[5]; 
    var year = matchArray[1]; 
    if (month < 1 || month > 12) return false; 
    if (day < 1 || day > 31) return false; 
    if ((month==4 || month==6 || month==9 || month==11) && day==31) return false; 
    if (month == 2)
    {
        var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)); 
        if (day > 29 || (day==29 && !isleap)) return false; 
    } 
    return true;
}
</script>
</head>

<body>
<input type="text" id="aa" οnclick="avascript:ShowCalendar(this.id)" />
</body>
</html>
 
D564457199
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
菜鸟的Android学习之路11——时间日期拾取器
werewofe的专栏
12-19 677
1
javascript的时间拾取器
09-15
javascript的时间拾取器工具文件，用来嵌入到网页中做时间选择工具，里面有说明和使用文档
安卓时间拾取器(DatePicker And TimePicker)
记录移动开发相关的知识
09-23 2290
为了让用户能够选择日期和时间，Android提供了日期、时间拾取器，分别是DatePicker组件和TimePicker组件。这两个组件使用比较简单。可以在Eclipse的可视化界面设计鹅中，选择对应的组件并拖曳到布局文件中。为了可以在程序中获取用户选择的日期、时间。还需要为〔ratePicker和TimePicker组件添加率件监听器。其中。r目已OZi组件对应的事件监听器是OnDateChan
UI控件--时间选择（日期拾取器）
小白的秘密空间
08-26 1244
初始化日期拾取器 let datePicker = UIDatePicker() //初始化一个日期拾取器 datePicker.center = CGPoint(x: 160, y: 200) datePicker.tag = 1 datePicker.minimumDate = Date() ...
javascript适合移动端的日期时间拾取器
11-25
总结一下，`javascript适合移动端的日期时间拾取器`这个话题主要涉及了以下知识点： 1. 移动端开发中日期时间选择器的重要性。 2. `jQuery UI`的`datepicker`插件在桌面应用中的常见使用。 3. `mobiscroll.js`插件...
Android时间日期拾取器学习使用（DatePicker、TimePicker）
01-04
为了能够让用户选择时间日期，安卓提供了DatePicker日期拾取器和TimePicker时间拾取器。这两个组建的使用十分简单，在eclipse的可视化界面上直接拖拽到布局中即可。当用户在事件日期选择器上进行选择之后，需要加将...
日期、时间拾取器（待修改）
程序员深夜写bug
12-21 1175
1、添加日期、时间拾取器 <DatePicker android:id="@+id/datePicker1" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TimePicker android:id="@+id/tim
color拾取器
09-13
颜色拾取器
颜色拾取器
11-05
一个非常方便快捷的桌面颜色拾取器，不需要各种麻烦的操作即可以使用
高德坐标拾取器.rar
05-27
高德坐标拾取器,里面有几个本来是想找个现在的自己用但是发现都不是我想要的,里面的修改版amap.html是我在原来文件基础上修改的.
【Android】日期拾取器、时间拾取器与菜单
编程记录，亲测有效
06-18 2620
在安卓4.4的工程中，每次新建工程同样会出现Helloworld，但不同于以前的版本，现在的Helloworld还自带菜单。这篇文章配合安卓的常用组件日期拾取器、时间拾取器来讲解安卓菜单怎么修改。日期拾取器、时间拾取器两个组件很大，一般情况下，建议使用《【Android】多个Activity之间利用bundle传递数值》（点击打开链接）中介绍的方式，为日期拾取器、时间拾取器新开一个Activity
1.18 使用DateTimePicker创建强大、灵活的日期时间拾取器 [iOS开发中的神兵利器]
互动教程网[www.hdjc8.com]
05-09 545
原文：http://coolketang.com/staticCoding/5a995089ee920a671bb6d5b4.html1. 本节课将为您演示，如何制作一款强大又灵活的日期和时间拾取器。首先确保在您的项目中，已经安装了所需的第三方库，双击查看此处的Pod配置文件。 2. 根据配置文件中的相关设置，安装第三方库。安装完成之后，双击打开此处的项目文件。 3. 然后在左侧的项目导航区，打开...
VTK笔记——拾取器Picker
Andy的专栏
09-13 8421
拾取是可视化应用程序中常见的一种功能。拾取主要是用于选择数据和actor或者获取底层的数据值，比如说，拾取点，拾取actor，拾取cell等。
java 时间处理放入map
sixteen_cicle的博客
06-13 2496
java 时间处理放入map       String registertime ="2016/11/25 13:00:20";                  registertime = registertime.substring(0, 10).replaceAll("/","");         String today = StringFuncti
小案例：js获取当前时间的前一天/后一天（昨天/明天）
kk2442687723的博客
12-17 1519
首先获取当前时间，代码如下： var nowDay = new Date(); //获取当前时间 由于时间不能直接进行计算，所以需要转成时间戳的形式，代码如下：var day = var toDay = nowDay.getTime(); //将当前时间转换成时间戳形式并赋值给toDay变量 为了方便查看，我们封装一段函数来将时间格式转换为年/月/日的形式 // 封装一个函数getToda...
html选择日期选择器
hello
02-05 2万+
1. input class="form-control date-picker" type="text" name="year1"  placeholder="选择年" data-date-format="yyyy"> script type="text/javascript"> $(document).ready(function () { $('[name=y
HTML5日期输入框(date)
热门推荐
z_xiaocun的博客
07-17 6万+
HTML5的出现大大提高了程序员的开发效率，date日期选择器只是其中之一，还有其他一些新的特性，我们一起学习。
Qwt中picker(拾取器)显示设置
lovebird_27的专栏
01-16 4591
Qwt中有些时候会用到QwtPlotPicker类来设置绘图中的拾取器，显示当前位置的坐标信息。 若坐标轴的刻度值不是自定义，只需要将picker跟踪模式设置为AlwaysOn picker->setTrackerMode( QwtPicker::AlwaysOn ); 若坐标轴的刻度值是自定义，若将x轴定义为系统时间(分、秒)，y轴保持不变，此时显示当前信息，需要继承QwtPlot

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值