jQuery实现简单的日期输入格式化控件
js代码有一百多行。
先上效果图
html代码
日期： <input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="请输入日期">
设置input元素类名为 hhm-dateInputer,通过这个类来绑定这个日期输入控件。
js代码
这里应用了jQuery的库， 主要用于选择元素和绑定事件。
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
因为有大量的获取和设置光标位置操作，用到了上一篇博客介绍的几个工具函数。
//获取光标位置
function getCursor(elem) {
//IE 9 ，10，其他浏览器
if (elem.selectionStart !== undefined) {
return elem.selectionStart;
} else { //IE 6,7,8
var range = document.selection.createRange();
range.moveStart("character", -elem.value.length);
var len = range.text.length;
return len;
}
}
//设置光标位置
function setCursor(elem, index) {
//IE 9 ，10，其他浏览器
if (elem.selectionStart !== undefined) {
elem.selectionStart = index;
elem.selectionEnd = index;
} else { //IE 6,7,8
var range = elem.createTextRange();
range.moveStart("character", -elem.value.length); //左边界移动到起点
range.move("character", index); //光标放到index位置
range.select();
}
}
//获取选中文字
function getSelection(elem) {
//IE 9 ，10，其他浏览器
if (elem.selectionStart !== undefined) {
return elem.value.substring(elem.selectionStart, elem.selectionEnd);
} else { //IE 6,7,8
var range = document.selection.createRange();
return range.text;
}
}
//设置选中范围
function setSelection(elem, leftIndex, rightIndex) {
if (elem.selectionStart !== undefined) { //IE 9 ，10，其他浏览器
elem.selectionStart = leftIndex;
elem.selectionEnd = rightIndex;
} else { //IE 6,7,8
var range = elem.createTextRange();
range.move("character", -elem.value.length); //光标移到0位置。
//这里一定是先moveEnd再moveStart
//因为如果设置了左边界大于了右边界，那么浏览器会自动让右边界等于左边界。
range.moveEnd("character", rightIndex);
range.moveStart("character", leftIndex);
range.select();
}
}
------------------------- Boom! -----------------------
先讲讲主要的思路。 其实是可以画个图这里的，不过我都不晓得该怎么画，大家提提意见。
首先找到类名为 hhm-dateInputer的元素。
给它绑定两个事件处理函数。 keydown、focus 、blur
focus
判断如果input元素内容为空，那么设置其初始值为"____-__-__"
blur (感谢下面评论里小伙伴的建议，加上这个事件更加完美)
判断如果input元素内容为初始值"____-__-__"，将其值置为空""
keydown
为什么不是keyup,而是keydown: 我们知道，keydown事件发生时，键盘上的字符还没有输入到输入框中，这很重要。如果需要，我们在程序中就可以阻止不合适的字符输入。
1.首先从事件对象event中取得keyCode值，判断为数字时，将数字后面的下划线删除一位。
2.keyCode值代表删除键时，删除数字，添加一位下划线。
3.keyCode的其他情况返回false，阻止字符的输入。
上面一二步会用到setTimeouthtml" target="_blank">函数，在其中执行某些操作。 使用这个函数是因为keyup事件中按键字符实际还没有作用到文本框中，setTimeout中的操作可以解决这个问题。
另外代码中还有一个很重要的方法 resetCursor,程序中多次调用这个方法来把光标设置到合适的输入位置。
//设置光标到正确的位置
function resetCursor(elem) {
var value = elem.value;
var index = value.length;
//当用户通过选中部分文字并删除时，此时只能将内容置为初始格式洛。
if (elem.value.length !== dateStr.length) {
elem.value = dateStr;
}
//把光标放到第一个_下划线的前面
//没找到下划线就放到末尾
var temp = value.search(/_/);
index = temp > -1 ? temp : index;
setCursor(elem, index);
}
完整的js代码贴在下面咯。
$(function(){
var inputs = $(".hhm-dateInputer");
var dateStr = "____-__-__";
inputs.each(function(index,elem){
var input = $(this);
input.on("keydown",function(event){
var that = this; //当前触发事件的输入框。
var key = event.keyCode;
var cursorIndex = getCursor(that);
//输入数字
if(key >= 48 && key <= 57){
//光标在日期末尾或光标的下一个字符是"-",返回false,阻止字符显示。
if(cursorIndex == dateStr.length || that.value.charAt(cursorIndex) === "-") {return false;}
//字符串中无下划线时，返回false
if(that.value.search(/_/) === -1){return false;}
var fron = that.value.substring(0,cursorIndex); //光标之前的文本
var reg = /(\d)_/;
setTimeout(function(){ //setTimeout后字符已经输入到文本中
//光标之后的文本
var end = that.value.substring(cursorIndex,that.value.length);
//去掉新插入数字后面的下划线_
that.value = fron + end.replace(reg,"$1");
//寻找合适的位置插入光标。
resetCursor(that);
},1);
return true;
//"Backspace" 删除键
}else if( key == 8){
//光标在最前面时不能删除。 但是考虑全部文本被选中下的删除情况
if(!cursorIndex && !getSelection(that).length){ return false;}
//删除时遇到中划线的处理
if(that.value.charAt(cursorIndex -1 ) == "-"){
var ar = that.value.split("");
ar.splice(cursorIndex-2,1,"_");
that.value = ar.join("");
resetCursor(that);
return false;
}
setTimeout(function(){
//值为空时重置
if(that.value === "") {
that.value = "____-__-__";
resetCursor(that);
}
//删除的位置加上下划线
var cursor = getCursor(that);
var ar = that.value.split("");
ar.splice(cursor,0,"_");
that.value = ar.join("");
resetCursor(that);
},1);
return true;
}
return false;
});
input.on("focus",function(){
if(!this.value){
this.value = "____-__-__";
}
resetCursor(this);
});
input.on("blur",function(){
if(this.value === "____-__-__"){
this.value = "";
}
});
});
//设置光标到正确的位置
function resetCursor(elem){
var value = elem.value;
var index = value.length;
//当用户通过选中部分文字并删除时，此时只能将内容置为初始格式洛。
if(elem.value.length !== dateStr.length){
elem.value = dateStr;
}
var temp = value.search(/_/);
index = temp> -1? temp: index;
setCursor(elem,index);
//把光标放到第一个_下划线的前面
//没找到下划线就放到末尾
}
});
function getCursor(elem){
//IE 9 ，10，其他浏览器
if(elem.selectionStart !== undefined){
return elem.selectionStart;
} else{ //IE 6,7,8
var range = document.selection.createRange();
range.moveStart("character",-elem.value.length);
var len = range.text.length;
return len;
}
}
function setCursor(elem,index){
//IE 9 ，10，其他浏览器
if(elem.selectionStart !== undefined){
elem.selectionStart = index;
elem.selectionEnd = index;
} else{//IE 6,7,8
var range = elem.createTextRange();
range.moveStart("character",-elem.value.length); //左边界移动到起点
range.move("character",index); //光标放到index位置
range.select();
}
}
function getSelection(elem){
//IE 9 ，10，其他浏览器
if(elem.selectionStart !== undefined){
return elem.value.substring(elem.selectionStart,elem.selectionEnd);
} else{ //IE 6,7,8
var range = document.selection.createRange();
return range.text;
}
}
function setSelection(elem,leftIndex,rightIndex){
if(elem.selectionStart !== undefined){ //IE 9 ，10，其他浏览器
elem.selectionStart = leftIndex;
elem.selectionEnd = rightIndex;
} else{//IE 6,7,8
var range = elem.createTextRange();
range.move("character",-elem.value.length); //光标移到0位置。
//这里一定是先moveEnd再moveStart
//因为如果设置了左边界大于了右边界，那么浏览器会自动让右边界等于左边界。
range.moveEnd("character",rightIndex);
range.moveStart("character",leftIndex);
range.select();
}
}
结束语
这个插件可能还有一些需要完善的地方。
缺少通过js调用为元素绑定此插件的接口
插件可能有些bug
上面的代码如果有任何问题，请大家不吝赐教。
以上就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍jQuery实现简单日期格式化功能示例，包括了jQuery实现简单日期格式化功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现简单日期格式化功能。分享给大家供大家参考，具体如下： 代码如下，引入jquery后直接后加入以下代码刷新可测试 运行结果如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery日期与时间操作技巧总结》、《jQ
-
我正在使用iReport 4.6.0和JasperReports Server 4.5.0。我创建了一个报告，希望在其中向MySQL数据库传递日期值。我创建了一个参数并使用了java。util。日期类。在输入控件上，我将其设置为单值类型和日期数据类型。在iReport中运行报告（使用预览）时，系统会提示我选择日期，并使用指定的日期生成报告。将报告部署到JasperReports服务器后，当系统提示
-
我正在尝试将DatePicker日期格式化为简单的数据格式（“yyyy-MM-dd HH： mm： ss Z”）。有人告诉我，我需要使用简单的数据格式将其解析为日期对象-简单的数据格式（“yyyy-MM-dd”），然后将其格式化为我需要的内容，如下所示。但是，我在尝试捕捉块中收到错误“重复局部变量eDate”。任何专家都可以查看我的代码并提出建议吗？ 已更新
-
问题内容： 我有一个活动的编辑页面，我的一个字段是日期。在某些浏览器中，它看起来像纯文本框（IE8），但是在chrome中，它显示“ dd / mm / yyyy”，如果单击它，它还有一些其他选项可用于设置日期。 我的问题是在编辑页面上，它没有填充现有日期（我想是因为日期格式不正确？）。MVC控制器以“ 2014-03-08T00：00：00”格式返回数据（仅使用基本的CRUD控制器操作）。 我已
-
问题内容： 我正在使用Liferay 6.2，并想使用 liferay-ui：input-date 字段。现场本身工作正常。但是我想更改显示的日期格式 毫米/日/年 至 dd.mm.yyyy 但是该怎么做呢？我看不到有什么衣服可以设置这个… 问题答案： 我查看了输入日期标记库代码，如果要更改模式，则必须修改其代码。文件的路径：\ webapps \ ROOT \ html \ taglib \ u
-
我有一个变量在一个类在测试情况下，我需要嘲笑它。我尝试过这样 但事实的确如此 giving me无法将给定对象格式化为日期 在一台机器和另一台机器上 它给我的日期不能为空。 我是Junit新手，需要帮助解决这个问题