jq 日期和时间插件
来源：互联网 发布：英文软件公司名称 编辑：程序博客网 时间：2024/04/26 18:27
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@taglib prefix="s" uri="/struts-tags" %><%String serverName= request.getContextPath();;//项目名 %><!DOCTYPE html><html ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="<%=serverName%>/css/jHsDate.css" /> <style> input { height: 20px; padding: 5px; width: 400px; border: 1px solid #3ab2d0; } </style></head><body> <div style="text-align:center;margin-top:50px;"> <span>时间日期格式化</span> <s:textfield id="datetimeformat" name="jHsDateStart"></s:textfield> </div> </body> <script type="text/javascript" src="<%=serverName%>/js/jquery-1.10.2.js"></script> <script type="text/javascript" src="<%=serverName%>/js/jHsDate.js"></script> <script> $('#datetimeformat').jHsDate({ format: 'yyyy年MM月dd日 hh时mm分' }); </script></html>css
body { position: static;}[name='jHsDate'] { position: absolute; max-width: 336px; width: auto; height: 164px; border: 1px solid #dddddd; border-radius: 2px; background-color:#ffffff;}.yearHsDate,.dayHsDate,.hourHsDate,.minuteHsDate { height: 164px; width: 95px; margin: 0; padding: 0; text-align: center; overflow-y: auto; overflow-x: hidden; font-size: 14px; display: inline-block;}.hs_year,.hs_day,.hs_hour,.hs_minute { list-style: none; width: 72px; height: 32px; line-height: 32px; cursor: pointer;} .hs_year:hover, .hs_day:hover, .hs_mon:hover { background-color: #eeeeee; color: #000000; }.hs_check,.hs_check :hover{ background-color: #3ab2d0!important; color: #ffffff!important;}.monHsDate { width: 150px; display: inline-block; padding: 4px 5px; margin: 0;}.hs_mon { list-style: none; width: 29px; height: 15px; text-align: center; line-height: 15px; font-size: 14px; display: inline-block; padding: 7px 5px; border-radius: 4px; float: left; cursor: pointer; margin: 5px;}.noCheck { background-color: #f4f4f4; cursor: not-allowed;}.dayHsDate { width: 77px; border-left: 1px solid #dddddd;}jq
(function ($) { var defaultSettings = { format: 'yyyy-MM-dd',//默认日期格式 callBack: function () { },//回掉函数 maxDate: new Date(),//最大日期 minDate: '1949-10-01',//最小日期 defDate: '',//默认日期 defIsShow: false,//是否在文本框中显示默认日期 inputIsRead: false }; $.fn.jHsDate = function (options) { options = $.extend({}, defaultSettings, options || {}); var $this = this; if (options.inputIsRead) { $this.attr("readonly","readonly"); } $this.attr("name", "jHsDateInput"); if (options.maxDate == options.minDate) { alert("最大值最小值错误"); } if (options.maxDate < options.defDate && options.defDate!='') { options.defDate = options.maxDate; } if (options.minDate > options.defDate && options.defDate != '') { options.defDate = options.minDate; } var html = "", yearHtml = "", monHtml = "", dayHtml = "", hourHtml = "", minuteHtml = ""; var thisId = $this.attr("id"); if (thisId == undefined) { alert('元素Id或元素不存在'); return; } html = "<div id='" + thisId + "hsdate' name='jHsDate' style='box-shadow: 0 3px 5px rgba(221,221,221,0.5);'>"; var formatTmp = options.format; var maxDateTmp = chromeDateToDate(options.maxDate); var minDateTmp = chromeDateToDate(options.minDate); var yearDateTmp = ""; var clickType = ""; if (formatTmp.indexOf("y") > -1) { yearHtml = setYear(maxDateTmp.split('-')[0], minDateTmp.split('-')[0]); clickType += "y" } if (formatTmp.indexOf("M") > -1) { monHtml = setMon(); clickType += "M" } if (formatTmp.indexOf("d") > -1) { dayHtml = setDay(31); clickType += "d" } html += yearHtml + monHtml + dayHtml + hourHtml + minuteHtml; html += "</div>" $this.click(function () { if ($("#" + thisId + "hsdate").length > 0) { return false; } $('body').append(html); setDefDate(options.defDate, thisId + "hsdate"); if (options.format.indexOf("h") > -1) { bindCkeckClick(clickType+"h") } //定位日期框 var y = $this.offset().top; var x = $this.offset().left; var eleHeight = $this.outerHeight(false); var checkYear = ""; $("#" + thisId + "hsdate").css({ "top": y + (eleHeight + 5), "left": x }); $('.hs_year').click(function () { $('.yearHsDate> .hs_check').removeClass('hs_check'); $(this).addClass('hs_check'); //设置最大月份 $('.monHsDate> .noCheck').removeClass('noCheck'); checkYear = $(this).text(); if (checkYear == new Date(maxDateTmp).getFullYear()) { $('.monHsDate> .hs_check').removeClass('hs_check'); $("#" + thisId + "hsdate") .children(".monHsDate") .children(':gt(' + (new Date(maxDateTmp).getMonth()) + ')') .addClass('noCheck'); } //设置最小月份 if (checkYear == new Date(minDateTmp).getFullYear()) { $('.monHsDate> .hs_check').removeClass('hs_check'); $("#" + thisId + "hsdate") .children(".monHsDate") .children(':lt(' + (new Date(minDateTmp).getMonth()) + ')') .addClass('noCheck'); } }); $('.hs_mon').click(function () { if (!$(this).hasClass('noCheck')) { $('.monHsDate> .hs_check').removeClass('hs_check'); $(this).addClass('hs_check'); if (clickType.indexOf('d') > -1) { showDay($(this).text()); } //设置最大日 $('.dayHsDate> .noCheck').removeClass('noCheck'); if (checkYear == new Date(maxDateTmp).getFullYear() && $(this).text() == (new Date(maxDateTmp).getMonth() + 1) + "月") { $('.dayHsDate> .hs_check').removeClass('hs_check'); $("#" + thisId + "hsdate") .children(".dayHsDate") .children(':gt(' + (new Date(maxDateTmp).getDate() - 1) + ')') .addClass('noCheck'); } //设置最小日 if (checkYear == new Date(minDateTmp).getFullYear() && $(this).text() == (new Date(maxDateTmp).getMonth() + 1) + "月") { $('.dayHsDate> .hs_check').removeClass('hs_check'); $("#" + thisId + "hsdate") .children(".dayHsDate") .children(':lt(' + (new Date(minDateTmp).getDate() - 1) + ')') .addClass('noCheck'); $('[class="hs_day"]').parent().scrollTop($('[class="hs_day"]').position().top); } bindCkeckClick(clickType); } }); }); //点击空白处关闭选择框 $(document).click(function (e) { e = window.event || e; // 兼容IE7 obj = $(e.srcElement || e.target); if (!$(obj).is("[name='jHsDateInput']") && !$(obj).is('[class^="hs_"]')) { $('[name="jHsDate"]').remove(); } }); if (options.defIsShow && options.defDate != '') { $this.val(DateFormat(options.defDate, options.format)); } function bindCkeckClick(clickType) { switch (clickType) { case "y": $('.hs_year').click(function () { $($this).val($('[class="hs_year hs_check"]').text()); closeHsDate($("#" + thisId + "hsdate")); options.callBack(); }); break; case "yM": $('.hs_mon').click(function () { var dateTmp = $('[class="hs_year hs_check"]').text() + "-" + $('[class="hs_mon hs_check"]').text(); $($this).val(DateFormat(dateTmp.replace("月", ""), options.format)); closeHsDate($("#" + thisId + "hsdate")); options.callBack(); }); break; case "yMd": $('.hs_day').click(function () { $('.dayHsDate>.hs_check').removeClass('hs_check'); $(this).addClass('hs_check'); var dateTmp = $('[class="hs_year hs_check"]').text() + "-" + $('[class="hs_mon hs_check"]').text() + "-" + $('[class="hs_day hs_check"]').text(); if (formatTmp.indexOf("h") > -1) { hourHtml = setHour(); minuteHtml = setMinute(); $("#" + thisId + "hsdate").html(hourHtml + minuteHtml); $("#" + thisId + "hsdate").children('.hourHsDate').children().click(function () { dateTmp = dateTmp.split(' ')[0] dateTmp += " " + $(this).text().replace("时", ""); $(this).parent().children().removeClass('hs_check'); $(this).addClass('hs_check'); }); $("#" + thisId + "hsdate").children('.minuteHsDate').children().click(function () { dateTmp = dateTmp.split(':')[0] dateTmp += ":" + $(this).text().replace("分", ""); $(this).parent().children().removeClass('hs_check'); $(this).addClass('hs_check'); $($this).val(DateFormat(dateTmp.replace("月", ""), options.format)); closeHsDate($("#" + thisId + "hsdate")); options.callBack(); }); } else { $($this).val(DateFormat(dateTmp.replace("月", ""), options.format)); closeHsDate($("#" + thisId + "hsdate")); options.callBack(); } }); break; case "h": var dateTmp = ""; hourHtml = setHour(); minuteHtml = setMinute(); $("#" + thisId + "hsdate").html(hourHtml + minuteHtml); $("#" + thisId + "hsdate").children('.hourHsDate').children().click(function () { dateTmp = ""; dateTmp = $(this).text().replace("时", ""); $(this).parent().children().removeClass('hs_check'); $(this).addClass('hs_check'); }); $("#" + thisId + "hsdate").children('.minuteHsDate').children().click(function () { dateTmp = dateTmp.split(':')[0] dateTmp += ":" + $(this).text().replace("分", ""); $(this).parent().children().removeClass('hs_check'); $(this).addClass('hs_check'); $($this).val(dateTmp); closeHsDate($("#" + thisId + "hsdate")); }); break; default: $('.hs_day').click(function () { $('.dayHsDate>.hs_check').removeClass('hs_check'); $(this).addClass('hs_check'); var dateTmp = $('[class="hs_mon hs_check"]').text() + "-" + $('[class="hs_day hs_check"]').text(); if (formatTmp.indexOf("h") > -1) { hourHtml = setHour(); minuteHtml = setMinute(); $("#" + thisId + "hsdate").html(hourHtml + minuteHtml); $("#" + thisId + "hsdate").children('.hourHsDate').children().click(function () { dateTmp += " " + $(this).text().replace("时", ""); $(this).parent().children().removeClass('hs_check'); $(this).addClass('hs_check'); }); $("#" + thisId + "hsdate").children('.minuteHsDate').children().click(function () { dateTmp = dateTmp.split(':')[0] dateTmp += ":" + $(this).text().replace("分", ""); $(this).parent().children().removeClass('hs_check'); $(this).addClass('hs_check'); $($this).val(DateFormat(dateTmp.replace("月", ""), options.format)); closeHsDate($("#" + thisId + "hsdate")); }); } else { $($this).val(DateFormat(dateTmp.replace("月", ""), options.format)); closeHsDate($("#" + thisId + "hsdate")); } }); break; } } //显示天 function showDay(chekMon) { if (isLeapYear($('.yearHsDate>.hs_check').text()) && chekMon == "2月") { dayHtml = setDay(29); } else if (chekMon == "1月" || chekMon == "3月" || chekMon == "5月" || chekMon == "7月" || chekMon == "8月" || chekMon == "10月" || chekMon == "12月") { dayHtml = setDay(31); } else if (chekMon == "4月" || chekMon == "6月" || chekMon == "9月" || chekMon == "11月") { dayHtml = setDay(30); } else if (!isLeapYear($('.yearHsDate>.hs_check').text()) && chekMon == "2月") { dayHtml = setDay(28); } $('.dayHsDate').remove(); $('.monHsDate').after(dayHtml); } //设置默认值 function setDefDate(defDate, dateid) { var d = new Date(defDate); var yeardef = d.getFullYear(); var mondef = (d.getMonth() + 1) + "月"; var daydef = d.getDate(); $('#' + dateid).children('.yearHsDate').children('.hs_year').each(function () { if ($(this).text() == yeardef) { $(this).addClass('hs_check'); $(this).parent().scrollTop($(this).position().top); return false; } }); $('#' + dateid).children('.monHsDate').children('.hs_mon').each(function () { if ($(this).text() == mondef) { $(this).addClass('hs_check'); if (clickType.indexOf('d') > -1) { showDay(mondef); } bindCkeckClick(clickType); return false; } }); $('#' + dateid).children('.dayHsDate').children('.hs_day').each(function () { if ($(this).text() == daydef) { $(this).addClass('hs_check'); $(this).parent().scrollTop($(this).position().top); return false; } }); } }; function setYear(maxYear, minYear) { var setYearHtml = "<ul class='yearHsDate'>"; for (var i = maxYear; i >= minYear; i--) { setYearHtml += "<li class='hs_year' >" + i + "</li>"; } setYearHtml += "</ul>"; return setYearHtml; } function setMon() { var setMonHtml = "<ul class='monHsDate'>"; for (var i = 1; i <= 12; i++) { setMonHtml += "<li class='hs_mon'>" + i + "月</li>" } setMonHtml += "</ul>" return setMonHtml; } function setHour() { var setHourHtml = "<ul class='hourHsDate'>"; for (var i = 1; i <= 24; i++) { if (i <= 9) { setHourHtml += "<li class='hs_hour'>0" + i + "时</li>" } else { setHourHtml += "<li class='hs_hour'>" + i + "时</li>" } } setHourHtml += "</ul>" return setHourHtml; } function setDay(days) { var setDayHtml = "<ul class='dayHsDate'>"; for (var i = 1; i <= days; i++) { setDayHtml += "<li class='hs_day' >" + i + "</li>"; } setDayHtml += "</ul>"; return setDayHtml; } function setMinute() { var setminuteHtml = "<ul class='minuteHsDate'>"; for (var i = 0; i < 60; i++) { if (i <= 9) { setminuteHtml += "<li class='hs_minute'>0" + i + "分</li>" } else { setminuteHtml += "<li class='hs_minute'>" + i + "分</li>" } } setminuteHtml += "</ul>" return setminuteHtml; } //部分浏览器时间转换问题 function chromeDateToDate(cdate) { var d = new Date(cdate); return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); } //计算闰年 function isLeapYear(Year) { if (((Year % 4) == 0) && ((Year % 100) != 0) || ((Year % 400) == 0)) { return true; } else { return false; } } //日期格式化 function DateFormat(now, mask) { var d = new Date(now); var zeroize = function (value, length) { if (!length) length = 2; value = String(value); for (var i = 0, zeros = ''; i < (length - value.length); i++) { zeros += '0'; } return zeros + value; }; return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g, function ($0) { switch ($0) { case 'd': return d.getDate(); case 'dd': return zeroize(d.getDate()); case 'ddd': return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()]; case 'dddd': return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()]; case 'M': return d.getMonth() + 1; case 'MM': return zeroize(d.getMonth() + 1); case 'MMM': return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()]; case 'MMMM': return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()]; case 'yy': return String(d.getFullYear()).substr(2); case 'yyyy': return d.getFullYear(); case 'h': return d.getHours() % 12 || 12; case 'hh': return zeroize(d.getHours() % 12 || 12); case 'H': return d.getHours(); case 'HH': return zeroize(d.getHours()); case 'm': return d.getMinutes(); case 'mm': return zeroize(d.getMinutes()); case 's': return d.getSeconds(); case 'ss': return zeroize(d.getSeconds()); case 'l': return zeroize(d.getMilliseconds(), 3); case 'L': var m = d.getMilliseconds(); if (m > 99) m = Math.round(m / 10); return zeroize(m); case 'tt': return d.getHours() < 12 ? 'am' : 'pm'; case 'TT': return d.getHours() < 12 ? 'AM' : 'PM'; case 'Z': return d.toUTCString().match(/[A-Z]+$/); // Return quoted strings with the surrounding quotes removed default: return $0.substr(1, $0.length - 2); } }); }; function closeHsDate(ele) { $(ele).remove(); }})(jQuery); 阅读全文
0 0
- jq 日期和时间插件
- JQ插件：日期时间选择器date picker
- DateTimePicker：jQuery日期和时间插件
- DateTimePicker：jQuery日期和时间插件
- DateTimePicker：jQuery日期和时间插件
- DateTimePicker：jQuery日期和时间插件
- Js获取当前日期时间和我的JQ关于日期的一些例子
- Js获取当前日期时间和我的JQ关于日期的一些例子
- Js获取当前日期时间和我的JQ关于日期的一些例子
- 好用的JQ日期時間選擇插件
- JS JQ 获取当前时间 日期
- jqury 日期时间插件
- 时间日期选择插件
- 五、jq前端-时间轴插件
- 推荐16个免费的jQuery日期和时间插件
- 日历插件，日期插件，时间插件
- Jquery日期、时间选择插件
- angular js 日期时间插件
- datastage出现中文乱码
- gulp-gulp使用小结(一)
- 30分钟掌握ES6/ES2015核心内容（下）
- ThinkPHP5-数据库操作和事务支持
- Java 动态代理
- jq 日期和时间插件
- js如何实现继承（js实现继承的五种方式）
- 设置相机参数导致java.lang.RuntimeException: setParameters failed
- 通向超神之路：跟我学编写Unity3D插件:创建插件菜单（一）
- ThinkPHP5-模型和关联操作
- yii2框架数据库的常用操作
- 【技术分享】EternalBlue之32位exploit编写(一)
- Redis的安装和部署
- spring中的懒加载与事务--排坑记录
