Question

我想在html中使用自动格式化来构建输入日期。例如，如果我写'1994年12月1日'＆＃39;或者＆＃39; 12/1/1994＆＃39;它会自动检测到它是一个约会并重新格式化：＆＃39; 12.1.1994＆＃39;并创建一个日期对象：确切地说是excel。

我不想自己构建它因为它看起来太复杂而且选项太多所以你知道任何解决方案吗？

Answer 1

这是复杂的函数，应该将许多常见的日期字符串转换为日，月和年整数。这肯定有一些弱点，所以可以随意评论任何错误或想法升级。

这个脚本背后的想法是：

实际日期信息仅来自数字和字母
- 解决方案：将所有其他符号（点，斜线，短划线）转换为空格并最终删除多个空格
上面的步骤应创建包含3个日期部分的字符串除以空格
- 解决方案：按空格拆分日期字符串 - ＆gt;有三个部分分开，但哪一个是日，月和年？
4位数的部分必须是年份（日期或月份永远不会有4位数字）
1到2位且st | nd | rd | th的部分必须是
月份名称（jan | feb | mar | apr | may | jun | jul | aug | sep | oct | nov | dec）的部分必须是月份
如果为其变量分配了两个部分，则第三部分必须属于一个尚未设置的变量
如果上述条件仅设置了一个或非变量，则假设使用YYYYMMDD或MMDDYYYY格式
- 解决方案：如果日期的第一部分有4位数字，则必须为YYYYMMDD格式，否则请使用MMDDYYYY

定义变量

el =输入日期的输入
reg_day =匹配1到2位数字，不区分大小写（第1，2ND，3Rd）
reg_month =匹配任何月份名称，？：表示不会记住它，子字符串不会出现在结果数组中
reg_year =匹配任何4位数字符串

代码：

var el = document.getElementById("date_input"),
    reg_day = /\d{1,2}(st|nd|rd|th)/i,
    reg_month = /(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i.
    reg_year = /^\d{4}$/;

添加前导零功能

此函数将前导零（如有必要）添加到日期或月份整数（返回字符串）

将整数转换为字符串（因为整数不能有前导零）
如果长度小于2（数字1到9），请添加＆＃34; 0＆＃34;对它
返回零

代码：

function addZero(num) {
    var s = num.toString();
    while (s.length < 2) s = "0" + s;
    return s;
}

转换功能

如果month是单词，请找到其3个字母的缩写并返回月份数
如果月份是有效号码（01-12或1-12），请解析并返回
否则返回null（未知格式）

代码：

function getMonth(month) {
    if(month.search(reg_month) > -1) {
        var month_name = month.match(reg_month)[0];
        return new Date(Date.parse(month_name + " 1, 2000")).getMonth() + 1;
    } else if(month.search(/^(0?[1-9]|1[0-2])$/) > -1) {
        return parseInt(month);
    }
    return null;
}

删除任何字母（例如 st 或）
如果日期是有效号码（01-31或1-31），请解析并返回
否则返回null（未知格式）

代码：

function getDay(day) {
    day = day.replace(/\D+/g, "")
    if(day.search(/^(0?[1-9]|[12][0-9]|3[01])$/) > -1) {
        return parseInt(day);
    }
    return null;
}

如果年份是有效的4位数字，请解析并返回
否则返回null（未知格式）

代码：

function getYear(year) {
    if(year.search(reg_year) > -1) {
        return parseInt(year);
    }
    return null;
}

Onblur - 当输入失去焦点时

val =日期输入值
array =日，月，年值的数组
1. 按空格替换所有非数字或a-z字符
2. 仅用一个空格替换所有多个空格
3. 用空格分割字符串（应该给出3个元素的数组）
data_not_used = array 中的索引数组，未通过
日，月，年变量的声明

代码：

el.onblur = function(){
    var val = el.value,
        array = val.replace(/[^A-Za-z0-9]/g, " ").replace(/ +(?= )/g, "").split(" "),
        data_not_used = [],
        day = null, month = null, year = null;
// fn continues below

如果数组元素是带后缀的日期，请将其指定给日期变量
如果数组元素是月份名称，请将其编号分配给月份变量
如果数组元素为年，则将其指定给年变量
否则将数组索引添加到 data_not_used

（更多在变量部分以及getDay，getMonth和getYear函数中）

代码：

// fn continues above
    for(var i=0; i < array.length; i++) {
        if(array[i].search(reg_day) > -1) {
            day = getDay(array[i]);
        } else if(array[i].search(reg_month) > -1) {
            month = getMonth(array[i]);
        } else if(array[i].search(reg_year) > -1) {
            year = getYear(array[i]);
        } else {
            data_not_used.push(i);
        }
    }
// fn continues below

如果缺少一天，一个月，一年中的一个：
1. 如果数组中的第一个元素包含4位数，则假设为YYYYMMDD格式
2. 否则采用MMDDYYYY格式
如果只有一天，一个月，一年失踪，请填写剩余价值

代码：

// fn continues above
    if(data_not_used.length > 1) {
        if(array[0].search(/\d{4}/) > -1) {
            year = getYear(array[0]);
            month = getMonth(array[1]);
            day = getDay(array[2]);
        } else {
            month = getMonth(array[0]);
            day = getDay(array[1]);
            year = getYear(array[2]);
        }
    }

    else if(data_not_used.length === 1) {
        var data = array[data_not_used[0]];
        if(day === null) day = getDay(data);
        else if(month === null) month = getMonth(data);
        else if(year === null) year = getYear(data);
    }
// fn continues below

如果设置了全天，月，年，则转换日期和时间。月份为带前导零的字符串（1到01）并将其打印到控制台
带有调试值的其他打印错误

代码：

// fn continues above
    if(day!==null && month!==null && year!==null) {
        console.log(addZero(month) + "/" + addZero(day) + "/" + year);
    } else {
        console.error("Date not valid: " + month + "/" + day + "/" + year);
    }
};

不要忘记关闭 onblur（）功能！希望这很有用;）

HTML - 自定义输入日期格式

1 个答案:

定义变量

添加前导零功能

转换功能

Onblur - 当输入失去焦点时