要使用jQuery / JavaScript将日期格式转换为24/05/2021到24/may /2021

我有一个日期24/05/2021，我想将其日期格式转换为24/May/2021使用Javascript或jquery作为用户离开textbox，我的客户端不想使用日期选择器，他只是想直接输入日期，并在离开文本框时自动转换日期，就像他在excel中做的那样。

我找到了很多方法，但一无所获，我知道如何在服务器端做，但它必须在客户端完成。

正如你所说的客户端不想使用日期选择器，您需要定义用户输入的格式。

您可以拆分每个片段，然后格式化月份，然后将值放在DOM上的input元素的值中。

对于下面的例子，我假设用户使用/作为输入的分隔符。

function formatDate(val){
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

var parts = val.split('/');
var d = parts[0];
var y = parts[2];
var m = months[parseInt(parts[1], 10) - 1];

var inp = document.querySelector('#inp');
if(/[0-9]{1,2}/[0-9]{1,2}/[0-9]{4}/.test(val)){
inp.value = `${d}/${m}/${y}`;
} else inp.value = "";
}

<input type="text" id="inp" required pattern="[0-9]{1,2}/[0-9]{1,2}/[0-9]{4}" onchange="formatDate(this.value)"/>

您可以使用regex检查输入的日期是否正确，如果正确则可以更改其格式，否则可以显示错误。下面是代码:

const month = ["January","February","March","April","May","une","July","August","September","October","November","December"];
const dateregex = /^[0-3]?[0-9]/[0-1]?[0-9]/[0-9][0-9][0-9][0-9]/
class DateField {
constructor(id) {
this.elem = document.getElementById(id);
this.elemInp = this.elem.children[1];
this.elemError = this.elem.children[0];
this.date = null;
this.elemInp.addEventListener('blur', () => {
console.log(dateregex.test(this.elemInp.value), dateregex, this.elemInp.value);
if (!dateregex.test(this.elemInp.value)) {
this.showError();
this.date = null;
return;
}
var datesplits = this.elemInp.value.split('/');

this.date = new Date();
this.date.setYear(parseInt(datesplits[2],10));
this.date.setDate(parseInt(datesplits[0],10));
this.date.setMonth(parseInt(datesplits[1],10) - 1);

var newDateString = this.date.getDate() + '/' + month[this.date.getMonth()] + '/' + this.date.getFullYear();
this.elemInp.value = newDateString;
this.removeError();

});
this.elemInp.addEventListener('focus', () => {
if (this.date !== null && !isNaN(this.date.getTime())) {
var newDateString = this.date.getDate() + '/' + (this.date.getMonth() + 1) + '/' + this.date.getFullYear();
this.elemInp.value = newDateString;
}
});
}

showError() {
this.elemError.innerText = "date is invalid";
}

removeError() {
this.elemError.innerText = "";
}
}
var d1 = new DateField("dateContainer");

<html>
<head>
<title>try js</title>
</head>
<body>
<div id="dateContainer">
<p style="color: red;"></p>
<input type="text" id="date" />
</div>
</body>
</html>

你可以在"/"然后对于第二个数组元素，我们用月份组成一个数组，像这样:

const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];

然后用"/"分割字符串并获得如下日期:

const split = document.querySelector("#input").split("/");
const date = new Date(`${split[1]}/${split[0]}/${split[2]}`);

最后:

const month = monthNames[date.getMonth()];

HTML应该是这样的:

<input type="text" id="input" required onchange="formatDate(this.value)"/>

相关内容

最新更新

热门标签：