js日期控件

<script language="JavaScript">
<!--
var months = new
Array("一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二");
var
daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var
days = new Array("日", "一", "二", "三", "四", "五", "六");

today = new getToday(); 
var element_id;

function getDays(month, year)
{
 // Test for leap year when February
is selected.
 if (1 == month)
  return ((0 == year % 4) && (0 !=
(year % 100))) ||
   (0 == year % 400) ? 29 : 28;
 else
  return
daysInMonth[month];
}

function getToday()
{
 // Generate today‘s date.
 this.now = new
Date();
 this.year = this.now.getFullYear() ; // Returned year
XXXX
 this.month = this.now.getMonth();
 this.day =
this.now.getDate();
}

function newCalendar()
{
 var parseYear =
parseInt(document.all.year 
[document.all.year.selectedIndex].text);
 
 var newCal = new
Date(parseYear , document.all.month.selectedIndex, 1);
 var day = -1;
 var
startDay = newCal.getDay();
 var daily = 0;

today = new getToday(); // 1st call
 if ((today.year ==
newCal.getFullYear() ) &&   (today.month == newCal.getMonth()))
   
day = today.day;
 // Cache the calendar table‘s tBody section,
dayList.
 var tableCal = document.all.calendar.tBodies.dayList;

var intDaysInMonth =
    getDays(newCal.getMonth(), newCal.getFullYear()
);

for (var intWeek = 0; intWeek < tableCal.rows.length;  intWeek++)
    
for (var intDay = 0;
    intDay <
tableCal.rows[intWeek].cells.length;
    intDay++)
  {
    var cell =
tableCal.rows[intWeek].cells[intDay];

// Start counting days.
    if ((intDay == startDay) && (0 ==
daily))
    daily = 1;

// Highlight the current day.
    cell.style.color = (day == daily) ?
"red" : "";
    if(day == daily)
   
{
    document.all.todayday.innerText= "今天: " +  day + "/" +

(newCal.getMonth()+1) + "/" + newCal.getFullYear() ;
    }
    //
Output the day number into the cell.
    if ((daily > 0) && (daily
<= intDaysInMonth))
    cell.innerText = daily++;
    else
   
cell.innerText = "";
    }

}
  
function getTodayDay()
{
  document.all[element_id].value =
today.day + "/" + (today.month+1) +
   "/" + today.year;

//document.all.calendar.style.visibility="hidden";
  document.all.calendar.style.display="none";
  document.all.year.selectedIndex
=100;  
  document.all.month.selectedIndex = today.month;
}

function getDate()
{
 // This code executes when the user clicks on a
day
 // in the calendar.
 if ("TD" == event.srcElement.tagName)
    //
Test whether day is valid.
    if ("" != event.srcElement.innerText)
    {

var mn = document.all.month.selectedIndex+1;
   var Year =
document.all.year [document.all.year.selectedIndex].text;
  
document.all[element_id].value=event.srcElement.innerText+"/"+mn +"/" 
+Year;
   //document.all.calendar.style.visibility="hidden";
  
document.all.calendar.style.display="none";
  }
 }
 
function
GetBodyOffsetX(el_name, shift)
{
 var x;
 var y;
 x = 0;
 y =
0;

var elem = document.all[el_name];
 do
 {
  x +=
elem.offsetLeft;
  y += elem.offsetTop;
  if (elem.tagName ==
"BODY")
   break;
  elem = elem.offsetParent;
 } while  (1 >
0);

shift[0] = x;
 shift[1] = y;
 return  x;
}

function SetCalendarOnElement(el_name)
{
 if (el_name=="")
 el_name
= element_id;
 var shift = new Array(2);
 GetBodyOffsetX(el_name,
shift);
 document.all.calendar.style.pixelLeft  = shift[0]; //  -
document.all.calendar.offsetLeft;
 document.all.calendar.style.pixelTop =
shift[1] + 25 ;
}
  
   
           
function
ShowCalendar(elem_name)
{
  if (elem_name=="")
  elem_name =
element_id;

element_id = elem_name; // element_id is global
variable
  newCalendar();
  SetCalendarOnElement(element_id);
  //document.all.calendar.style.visibility
= "visible";
  document.all.calendar.style.display="inline";
}

function
HideCalendar()
{
 //document.all.calendar.style.visibility="hidden";
 document.all.calendar.style.display="none";
}

function toggleCalendar(elem_name)
{
 //if
(document.all.calendar.style.visibility ==
"hidden")
 if(document.all.calendar.style.display=="none")
  ShowCalendar(elem_name);
 else

HideCalendar();
}
-->
</script>

<style>
.today {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE:
10pt; FONT-WEIGHT: bold}
.days {COLOR: navy; FONT-FAMILY: sans-serif;
FONT-SIZE: 10pt; FONT-WEIGHT: bold; TEXT-ALIGN: center}
.dates {COLOR: black;
FONT-FAMILY: sans-serif; FONT-SIZE: 10pt}
</style>

<FORM name=myForm>
<INPUT type="text" id=MyDate name=MyDate
size=15 onfocus="toggleCalendar(‘MyDate‘)">
</form>

<TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar

style="cursor:hand; DISPLAY: none; POSITION: absolute; Z-INDEX: 4">
 
<TBODY>
  <TR>
    <TD colSpan=7
vAlign=center>
 <!-- Month combo box -->
 <SELECT id=month
onchange=newCalendar()>
     <SCRIPT language=JavaScript>
  //
Output months into the document.
  // Select current month.
  for (var
intLoop = 0; intLoop < months.length;
intLoop++)
   document.write("<OPTION " + (today.month == intLoop ?
"Selected" : "") + ">" +
months[intLoop]);
  </SCRIPT>
 </SELECT>
 月
 <!--
Year combo box -->
 <SELECT id=year onchange=newCalendar()>

<SCRIPT language=JavaScript>
  // Output years into the
document.
  // Select current year.
  for (var intLoop = 1900; intLoop
< 2028; intLoop++)
   document.write("<OPTION " + (today.year ==
intLoop ? "Selected" : "") + ">" +
intLoop);
  </SCRIPT>
 </SELECT>
 年
 </TD>
 
</TR>

<TR class="days">
 <!-- Generate column for each day.
-->
    <SCRIPT language=JavaScript>
 // Output days.
 for
(var intLoop = 0; intLoop < days.length;
intLoop++)
  document.write("<TD style=‘width:25px;‘>" + days[intLoop]
+ "</TD>");
 </SCRIPT>
  </TR>

<TBODY class="dates" id=dayList onclick="getDate(‘‘)"
vAlign=center>
  <!-- Generate grid for individual days. -->
 
<SCRIPT language=JavaScript>
 for (var intWeeks = 0; intWeeks < 6;
intWeeks++)
 {
  document.write("<TR>");
  for (var intDays = 0;
intDays < days.length;
intDays++)
   document.write("<TD></TD>");
  document.write("</TR>");
 }
 
</SCRIPT>
  </TBODY>

<!-- Generate today day. -->
  <TBODY>
 
<TR>
    <TD class="today" colSpan=5 id=todayday
onclick=getTodayDay()></TD>
    <TD align=right
colSpan=2><A href="javascript:HideCalendar();">
 <SPAN
style="COLOR: black; FONT-SIZE:
10px"><B>关闭</B></SPAN></A></TD>
 
</TR>
  </TBODY>

</TABLE>

时间: 2024-11-08 06:00:25

js日期控件的相关文章

layDate1.0正式发布,您一直在寻找的的js日期控件

你是时候换一款日期控件了,而layDate非常愿意和您成为工作伙伴.她正致力于成为全球最高大上的web日期支撑,为国内外所有从事web应用开发的同仁提供力所能及的动力.她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封闭与狭隘.layDate延续了layui一贯的简单与易用,本着资源共享的开发者精神和对网页日历交互的无穷追求,她将长年被维护和更新,

js 日期控件 可以显示为和历

日期控件的js 1 <!-- 2 /** 3 * Calendar 4 * @param beginYear 1990 5 * @param endYear 2010 6 * @param language 0(zh_cn)|1(en_us)|2(en_en)|3(zh_tw)|4(jp) 7 * @param patternDelimiter "-" 8 * @param date2StringPattern "yyyy-MM-dd" 9 * @param

js 日期控件laydate的使用

官网:http://laydate.layui.com/ API: 使用: 1. 下载官网上的压缩包,解压后复制laydate 文件夹到项目中; 2. 在页面引入 如: <script type="text/javascript" src="js/laydate/laydate.js"></script>: 3. 示例:(日期范围) 4. 运行效果

js 日期控件laydate使用

官网  http://sentsin.com/layui/laydate/ 1. 下载官网上的压缩包,解压后只需要复制laydate 文件夹到你的项目中; 2. 在页面引入  <script type="text/javascript" src="js/laydate/laydate.js"></script> 3. 在页面添加: <div class="inline layinput"> <input

jQuery LayDate 日期控件

她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封闭与狭隘.layDate本着资源共享的开发者精神和对网页日历交互无穷的追求,延续了layui一贯的简单与易用.她遵循LGPL协议,您可以免费将她用于任何个人项目. 版本 LayDate 1.1 作者:闲心贤 github 在线实例 实例预览 layDate - js日期控件与时间插件演示 实例预览 

日期控件处理

python写法 # 去掉元素的readonly属性 js = 'document.getElementById("HD_CheckIn").removeAttribute("readonly");' driver.execute_script(js) # 用js方法输入日期 js_value = 'document.getElementById("HD_CheckIn").value="2016-12-25"' driver

12 Python+selenium对日期控件进行处理(采用执行JS脚本)

[环境信息] Python34+IE+windows2008 [说明] 1.对于日期控件,没有办法通过定位元素再直接传值的方式处理.可以采用执行JavaScript处理. PS:还要去学学js怎么写,不然要用的时候就只有到处copy了. [示例] 1.对于如下格式的日期控件需要用JS处理. 2.处理方式:通过driver.execute_script(js)执行. #问题消除时间,调用JS的当前时间 js = "function getCurrentDate() {" " v

js 常用日期控件使用

一.My97DatePicker 当前最新版本: 4.8 官网:http://www.my97.net/ csdn下载地址: http://download.csdn.net/detail/czw2010/8585183 1. 使用说明: My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.htm是必须文件,不可删除(4.8以后不存在此文件) 各目录及文件的用途: WdatePicker.js 配置文件,在调用的

简洁JS 日历控件 支持日期和月份选择

原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种语言(英文和中文).支持自定义日期格式,设定时间范围. 默认为古典版,英文,下面来看简单的缩略图. 首先是简洁版: 日期选择器: 月份选择器: 然后是古典版: 日期选择器: 日期选择器中文语言 月份选择器 下面是使用方法: 在要使用这个控件的页面上引入这个JS <script type="te