自己用js写的日期控件

最新推荐文章于 2024-04-20 13:50:15 发布
最新推荐文章于 2024-04-20 13:50:15 发布
阅读量358 收藏
点赞数
文章标签： date javascript function class float object
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aiwo429001/article/details/6286256
版权

 

datepicker.js：

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;
}

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 = "";

 /* http://www.codefans.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'>&raquo;</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'>&laquo;</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
    // ↓2010.10.26バグ対応（日期コントロール） CIJ対応
    + "<div class='calender' id='calender'><div class='calenderTitle'>"
    // ↑2010.10.26バグ対応（日期コントロール） CIJ対応
    + 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><iframe src='javascript:false' style='position:absolute; visibility:inherit; top:0px; left:0px; width:170px; height:auto; z-index:-1;filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';'></iframe></div>";
  return CalenderBox;
 }
}
function _selectThisDay(d) {
 var boxObj = d.parentNode.parentNode.parentNode.parentNode.parentNode;
 
 var tmpResult
 
 if (d.title.split("-")[1].length < 2) {
  tmpResult = "/" + "0" + d.title.split("-")[1];
 } else {
  tmpResult = "/" + d.title.split("-")[1];
 }
 
 if (d.title.split("-")[2].length < 2) {
  tmpResult += "/" + "0" + d.title.split("-")[2];
 } else {
  tmpResult += "/" + d.title.split("-")[2];
 }
 
 boxObj.targetObj.value = d.title.split("-")[0] + tmpResult ;
 boxObj.parentNode.removeChild(boxObj);
}
function closeCalender(d) {
 var boxObj = d.parentNode.parentNode.parentNode;
 boxObj.parentNode.removeChild(boxObj);
}

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);
}

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;
}

function selectThisMonth(obj) {
 HS_calender(obj.parentNode.parentNode.getElementsByTagName("span")[0]
   .getElementsByTagName("a")[0].innerHTML
   + "-" + obj.value + "-1", obj.parentNode);
}

function HS_setDate(inputObj) {
 // ↓2010.10.26バグ対応（日期コントロール） CIJ対応
 var oldObj = document.getElementById("calender");
 if(oldObj != null) {
  var boxObj = oldObj.parentNode;
  boxObj.parentNode.removeChild(boxObj);
 }
 // ↑2010.10.26バグ対応（日期コントロール） CIJ対応
 var calenderObj = document.createElement("span");
 calenderObj.innerHTML = HS_calender(new Date());
 calenderObj.style.position = "absolute";
 calenderObj.targetObj = inputObj;
 inputObj.parentNode.insertBefore(calenderObj, inputObj.nextSibling);
 
 return false;
}

function HS_setDateGds0101(inputObj,argleft,argtop) {
 var calenderObj = document.createElement("span");
 calenderObj.innerHTML = HS_calender(new Date());
 calenderObj.style.position = "absolute";
 calenderObj.style.left = argleft;
 calenderObj.style.top = argtop;
 calenderObj.targetObj = inputObj;
 inputObj.parentNode.insertBefore(calenderObj, inputObj.nextSibling);
 
 return false;
}

 

调用方法：在jsp中添加如下代码：
<s:textfield name="etbFrom" id= "txtEtbFrom" cssClass="in-ship" theme="simple" />
<s:submit type="image" οnclick="return HS_setDate(etbFrom);" src="D:/EclipseWorkSpace/newportal1/WebContent/jsp/img/calendarpicture.jpg" id="btnEtbFrom" cssStyle="width:17px;height:17px;"  theme="simple"/>
注意要在<body>下面加上<script type="text/javascript" src="../js/datepicker.js"></script>

jimware
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript自己写的日历控件及实例
06-26
自己手写的日历控件，不是很完整，希望可以抛砖引玉
JS 日期时间控件
一直专注于互联网
07-23 414
laydate.dev.js ;!function(win){ //全局配置，如果采用默认均不需要改动 var config = { path: '', //laydate所在路径 defSkin: 'default', //初始化皮肤 format: 'YYYY-MM-DD', //日期格式 min: '1900-01-01 00:00:00...
【js】日期控件的实现
m0_46459413的博客
11-28 3057
链接：https://pan.baidu.com/s/1KRXSjfqpyguZ67vBrOWM8g。注：src="My97DatePicker/WdatePicker.js"需要根据实际情况改变路径。maxDate:’%y-%M’设置最大日期只能到今天，再往前就无法选择了。minDate:‘{%y-1}-%M’设置最小日期只能向前选择12个月。1、解压后将其复制到项目中，在jsp中进行引用。
JS 原始代码时间控件插件
林中随行的博客
08-19 1149
时间插件 JS
js实现日期控件
玉案轩窗的博客
10-15 1万+
前言最近花了点时间写了个日期控件，首先说说写日期控件的初衷，有两点： 第一点是没有写过对于日期的生成不甚了解 工作中使用框架的日期控件，但是想要自己实现下该日期控件主要是学习使用，功能不多，支持输出天以及日期范围的选择。 实现思路日期控件实现了单日期以及日期范围的功能，单日期实现效果如下图： 日期范围实现效果图如下： 下面主要说说主要的实现思路，首先说说面板日期的生成，日期面板如下图： 日期面
JavaScript用select实现日期控件
10-23
主要介绍了JavaScript用select实现日期控件的相关资料,需要的朋友可以参考下
一起学写js Calender日历控件
10-22
主要和大家一起学写js Calender控件，自己动手编写了一个简易日历控件，感兴趣的小伙伴们可以参考一下
纯javascript版日历控件
10-21
主要介绍了纯javascript版日历控件，引用calendar.js文件，再把input的id设置成calendar,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一个js写的日历控件
07-01
为了酒店选择入住日期和离店日期写的一个控件
js自己编写的时间控件，手把手教你
08-03
js自己编写的时间控件，手把手教你，有详细注释
自己写的一个简单的jquery 日期插件
04-12
NULL 博文链接：https://chen106106.iteye.com/blog/1676296
js选择时间控件-方便实用
07-29
都是JS代码，没什么好描述的，附上调用方法 onclick="SelectDate(this)" 年月日，默认格式yyyy-MM-dd onclick="SelectDate(this,'yyyy 年')" 年份 onclick="SelectDate(this,'yyyy 年 MM 月')" 年月 onclick="SelectDate(this,'yyyy\-MM\-dd')" 年月日 onclick="SelectDate(this,'yyyy-MM-dd HH时')" 年月日时 onclick="SelectDate(this,'yyyy-MM-dd HH:mm')" 年月日时分 onclick="SelectDate(this,'yyyy年MM月dd日 HH时mm分ss秒',5,5)" 年月日时分秒 前后5年 onclick="SelectDate(this,'yyyy年MM月dd日 HH时mm分ss秒',0,-150)" 年月日时分秒 偏移量
自己用JS写了一个简单的时间控件。。。
wenzhibincom的博客
05-26 1793
//绘画时间选择器 var timeSelect={ obj:'' } //绘画时间选择器开始 timeSelect.Window=function(obj){ if($('.T_time').length&gt;0){ return ; } timeSelect.obj=$(obj); var time=new Date(); va...
自己写了个JS日历控件与大家分享
五只鸭子的专栏
10-29 3195
一时兴起用原生态JS写了个日历控件，不依赖js框架。 特地与大家分享下，供大家使用 与大家一起学习进步。 /* 使用方法介绍： 在html里加上如下文本框则可 为了计算弹出来的位置这里文本框ID必须为txt_calendar 后续可以改成取其他属性的值或者写个 方法把id当参数传入 主要功能介绍: 鼠标滚轮上滚翻倒上一个月 鼠标滚轮下滚翻到下一个月 方向键的左右键分
js 常用日期控件使用
热门推荐
雾里看花
04-11 1万+
一、My97DatePicker当前最新版本: 4.8 官网：http://www.my97.net/ csdn下载地址: http://download.csdn.net/detail/czw2010/8585183 1. 使用说明: My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
caladar日期输入
yizhenfengdx的专栏
10-30 763
 JS日期选择器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
JavaScript 高性能编程 —— Data Access 数据访问
最新发布
cccloveforever的博客
04-20 1459
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 1131
​​​​​​​。
用jQuery日期控件做一个日期输入
06-06
- 在引入jQuery和jQuery日期控件的js和css文件后，我们在`script`标签中使用了`$(function(){})`，这是jQuery的快捷方式，表示在页面加载完成后执行函数内的代码。 - 我们在函数内使用了`$("#datepicker")....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值