This question may be a bit challenging :
How to use JavaScript to change input type="date" format to :YYYY-MM-DD and no matter which date the user chooses ,the date need always be converted to the last day of the Month.
For example if the user choose 2023-06-01 ,then in the final the date should be :
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=" " autoplete="nope" required="required"></input>
<span class="bar"></span>
</div>
</div>
</body>
</html>This question may be a bit challenging :
How to use JavaScript to change input type="date" format to :YYYY-MM-DD and no matter which date the user chooses ,the date need always be converted to the last day of the Month.
For example if the user choose 2023-06-01 ,then in the final the date should be :
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=" " autoplete="nope" required="required"></input>
<span class="bar"></span>
</div>
</div>
</body>
</html>Any friend can help ?
Share Improve this question asked Apr 13, 2023 at 20:34 WilliamWilliam 4,06411 gold badges53 silver badges103 bronze badges 7- I see you have provided the design, but where is your attempt at getting it to work? – imvain2 Commented Apr 13, 2023 at 20:35
-
Get the date, add one month, set the day to
0. – Emiel Zuurbier Commented Apr 13, 2023 at 20:41 - @imvain2 this is too hard ,I don't even have any idea. – William Commented Apr 13, 2023 at 21:04
- 1 I'm remending to close the question. SO isn't a code writing service and no attempt is being made to learn or try it out. – imvain2 Commented Apr 13, 2023 at 21:14
- 1 @imvain2 if you don't have any insight or idea ,please just ignore this question ,thanks – William Commented Apr 13, 2023 at 21:16
3 Answers
Reset to default 2To get the last day of the month you can pass the next month, with day 0 to Date() it should roll back to the last day of previous month. To to format the date you can use toLocaleDateString with Swedish locale. To display it in UI, you can make an overlay span that covers original input.
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=" " autoplete="nope" required="required">
<span class="date-display">YYYY-MM-DD</span>
</div>
<span class="bar"></span>
</div>
</div>Base on this idea, You can try this:
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.log(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=" " autoplete="nope" required="required" />
<span class="bar"></span>
</div>
</div>
</body>
</html>Unfortunately it's not possible to change the visual representation of the date. This is determined by the locale of your system. Though the output will always be the same (ISO 8601) format.
You can read the value of the date input as a Date object with the valueAsDate property. This object can be manipulated. Add 1 to the current month and set the current date to 0. The value 1 would represent the first date of the month, 0 represents one day less, which is the last day of the previous month.
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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744835541a4596239.html
评论列表（0条）