JavaScript для изменения формата и значения input type="date"
Этот вопрос может быть немного сложным:
Как использовать JavaScript для изменения формата ввода type="date" на: ГГГГ-ММ-ДД, и независимо от того, какую дату выберет пользователь, дату всегда нужно преобразовать в последний день месяца.
Например, если пользователь выбирает 2023-06-01, то в финале дата должна быть:
2023-06-30
<!DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
<meta charset = "utf-8">
<title>Test</title>
</head>
<style media = "screen">
.form-question {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0 3rem;
min-height: 3rem;
}
.form-question__title {
color: #342357;
font-size: 1.5rem;
padding: 1rem;
}
.input-container {
border-bottom: solid 2px #333333;
}
.input-container input {
border: none;
box-sizing: border-box;
outline: 0;
padding: .75rem;
width: 100%;
}
</style>
<body>
<div class = "form-question">
<div class = "form-question__title">
<span>Effective Date</span>
</div>
<div class = "input-container">
<input id = "effective-date" type = "date" name = "effective-date" minlength = "1" maxlength = "64" placeholder = " " autocomplete = "nope" required = "required"></input>
<span class = "bar"></span>
</div>
</div>
</body>
</html>Любой друг может помочь?
Получите дату, добавьте один месяц, установите день на 0.
@ imvain2 это слишком сложно, я даже понятия не имею.
вы хотите изменить формат в пользовательском интерфейсе stackoverflow.com/questions/7372038/…
Я рекомендую закрыть вопрос. SO не является службой написания кода, и не предпринимается никаких попыток изучить или опробовать ее.
@ imvain2 Я устал менять формат в теге html в пользовательском интерфейсе, это не сработало, поэтому я прошу решение для JavaScript
@imvain2 если у вас нет понимания или идеи, пожалуйста, просто игнорируйте этот вопрос, спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Основываясь на этой идее, вы можете попробовать это:
document.querySelector('#effective-date').addEventListener('change',(e)=>{
let date = new Date(e.target.value);
date = (new Date(new Date(date.setMonth(date.getMonth() + 1)).setDate(0))).toJSON().split('T')[0];
console.info(date);
});<!DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
<meta charset = "utf-8">
<title>Test</title>
</head>
<style media = "screen">
.form-question {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0 3rem;
min-height: 3rem;
}
.form-question__title {
color: #342357;
font-size: 1.5rem;
padding: 1rem;
}
.input-container {
border-bottom: solid 2px #333333;
}
.input-container input {
border: none;
box-sizing: border-box;
outline: 0;
padding: .75rem;
width: 100%;
}
</style>
<body>
<div class = "form-question">
<div class = "form-question__title">
<span>Effective Date</span>
</div>
<div class = "input-container">
<input id = "effective-date" type = "date" name = "effective-date" minlength = "1" maxlength = "64" placeholder = " " autocomplete = "nope" required = "required" />
<span class = "bar"></span>
</div>
</div>
</body>
</html>Чтобы получить последний день месяца, вы можете перейти к следующему месяцу, с дня 0 до Date() он должен вернуться к последнему дню предыдущего месяца. Чтобы отформатировать дату, вы можете использовать toLocaleDateString со шведской локалью. Чтобы отобразить его в пользовательском интерфейсе, вы можете создать диапазон наложения, который покрывает исходный ввод.
const el = document.getElementById('effective-date');
const displayEl = document.querySelector('.date-display');
el.addEventListener('input', function(event) {
const selectedDate = new Date(el.value);
const lastDayDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 0);
const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
const formattedDate = lastDayDate.toLocaleDateString('se-SE', options);
displayEl.textContent = formattedDate;
}); .form-question {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0 3rem;
min-height: 3rem;
}
.form-question__title {
color: #342357;
font-size: 1.5rem;
padding: 1rem;
}
.input-container {
border-bottom: solid 2px #333333;
}
.input-container input {
border: none;
box-sizing: border-box;
outline: 0;
padding: .75rem;
width: 100%;
}
.date-container{
position:relative;
}
.date-display{
font-family:sans-serif;
display:block;
position:absolute;
top:0;
bottom:0;
font-size:12px;
line-height:12px;
padding:15px 5px;
width:calc(100% - 50px);
background:white;
}<div class = "form-question">
<div class = "form-question__title">
<span>Effective Date</span>
</div>
<div class = "input-container">
<div class = "date-container">
<input id = "effective-date" class = "effective-date" type = "date" name = "effective-date" minlength = "1" maxlength = "64" placeholder = " " autocomplete = "nope" required = "required">
<span class = "date-display">YYYY-MM-DD</span>
</div>
<span class = "bar"></span>
</div>
</div>К сожалению, изменить визуальное представление даты невозможно. Это определяется локалью вашей системы. Хотя вывод всегда будет в одном и том же формате (ISO 8601).
Вы можете прочитать значение ввода даты как объект Date со свойством valueAsDate. Этим объектом можно манипулировать. Добавьте 1 к текущему месяцу и установите текущую дату на 0. Значение 1 будет представлять первое число месяца, 0 представляет собой на один день меньше, то есть последний день предыдущего месяца.
const input = document.querySelector('#effective-date');
const output = document.querySelector('#actual-date');
input.addEventListener('input', event => {
const date = event.target.valueAsDate;
date.setMonth(date.getMonth() + 1);
date.setDate(0);
output.value = date.toISOString();
});<label for = "effective-date">Effective Date</label>
<input id = "effective-date" type = "date" name = "effective-date" required />
<label for = "actual-date">The Actual Date</label>
<output id = "actual-date"></output>
Я вижу, вы предоставили дизайн, но где ваша попытка заставить его работать?