Change date when status is updated - javascript

Hi guys I'm looking to write a javascript to change the date in the date box when I update the status select box.
For example the initial date on the datebox is 6/1/2021. And I will click on status rejected. The date should automatically change to today 6/3/21 without manually clicking the date picker box
<html>
<body>
<select>
<option value="Offered">Offered</option>
<option value="Accepted">Accepted</option>
<option value="Rejected">Rejected</option>
</select">
<input type="date" id="date" name="date">
<input type="submit" value="Submit">```
</body>
</html>

Then you have to call the onChange() event on select and remove the if condition-
<html>
<head>
<script>
function myFunction() {
let date = new Date();
let year = date.getFullYear();
let month = (date.getMonth() + 1).toString().length == 1 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
let day = date.getDay().toString().length == 1 ? '0' + date.getDay().toString() : date.getDay().toString();
let showDate = year + '-' + month + '-' + day;
document.getElementById("date").value = showDate;
}
</script>
</head>
<body>
<select id="mySelect" onchange="myFunction();">
<option value="Offered">Tesla</option>
<option value="Accepted">Volvo</option>
<option value="Rejected">Mercedes</option>
</select>
<input type="date" id="date" name="date">
<input type="submit" value="Submit">
</body>
</html>

I hope this answers your question. I have added comments for better clarity. In case you have any issues, let me know.
//Getting the select HTML node.
const select = document.querySelector("#select");
//Getting the date input node.
const date = document.querySelector("#date");
//Adding a change event listener to the select node.
select.addEventListener('change', () => {
//Had to use ISOString with slice method, since the date picker only accepts the date value in "yyyy-MM-dd" format.
date.value = new Date().toISOString().slice(0, 10);
});
<html>
<body>
<select id="select">
<option value="Offered">Offered</option>
<option value="Accepted">Accepted</option>
<option value="Rejected">Rejected</option>
</select>
<input type="date" id="date" name="date">
<input type="submit" value="Submit">
</body>
</html>

This should work. When using type="date" you need to provide a date in this format YYYY-MM-DD (rfc3339).
HTML
<html>
<body>
<select onchange="changeDate()">
<option value="Offered">Tesla</option>
<option value="Accepted">Volvo</option>
<option value="Rejected">Mercedes</option>
</select">
<input type="date" id="date" name="date">
<input type="submit" value="Submit">
</body>
</html>
Javascript
const changeDate = (val) => {
// Format date to your need
const now = new Date();
const day = ("0" + now.getDate()).slice(-2);
const month = ("0" + (now.getMonth() + 1)).slice(-2);
const today = `${now.getFullYear()}-${month}-${day}`;
console.log(`Today is: ${today}`);
// Set date input
let date = document.getElementById('date');
date.value = today;
}

Related

How to set the year value in input date

I want to set just the year in my input date
var dateVal = $('#mydate').val();
new Date(dateVal).setFullYear(2015);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="mydate">My input</label>
<input id="mydate" type="date">
It's probably not the most effective one, but try this:
function clicked() {
alert(new Date(document.getElementById("year").value, 01, 01, 00, 00, 00, 00));
}
<input type="number" name="year" min="1000" max="9999" id="year">
<input type="button" onclick="clicked()" value="Click Me!">
This gives me a year right. You can change the min and max value of the text box.
Try below code, Here you can set the year value as required but you cannot show only year to date field as it will be invalid date and you cannot choose date format to show only year. You can show year in normal text input as shown below.
$(document).ready(function(){
var dateVal = $('#mydate').val();
var now;
if(dateVal) {
now = new Date(dateVal);
} else {
now = new Date();
}
now.setFullYear(2015);
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var myDate = now.getFullYear()+"-"+(month)+"-"+(day) ; // for full date
$('#mydate').val(myDate);
$('#myyear').val(now.getFullYear());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="mydate">My input</label>
<input id="mydate" type="date">
<input id="myyear" type="text">
You can do it like this. As only year is not supported in input type date i had taken another input field.
$('#mydate').change(function() {
var dateVal = $('#mydate').val();
console.log(dateVal);
getYear = dateVal.split('-');
$("#year").val(getYear[0]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="mydate">My input</label>
<input id="mydate" type="date">
<input id="year" type="text" disabled>

DatePicker in HTML5 setting current date

I have a problem with my datepicker in HTML5.
I want to set the current date with Javascript but I always get how the date should be provided.
Here is my code:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<script>
//Declare variables
var today = new Date();
// Set values
$("#datePicker").val(getFormattedDate(today));
// Get date formatted as YYYY-MM-DD
function getFormattedDate (date) {
return date.getFullYear()
+ "-"
+ ("0" + (date.getMonth() + 1)).slice(-2)
+ "-"
+ ("0" + date.getDate()).slice(-2);
}
</script>
<title>Report</title>
<body>
<h1 align="center">Report für informative Ansichten</h1>
<form action="#" th:action="#{/pdf}" method="post">
<div><input name="datePicker" id="datePicker" type="date" min="1900-01-01" required></div>
<span class="validity"></span>
<input type="submit" value="PDF Ausgabe erzeugen"/>
</form>
</body>
</html>
Maybe someone can tell me what I am doing wrong here?
Thanks in advance.
Your code is fine, however, the script tag is above the the HTML so $("#datePicker") is null, because the HTML has not been yet created.
Either place the script below your HTML or wait for $(document).ready()
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Report</title>
</head>
<body>
<h1 align="center">Report für informative Ansichten</h1>
<form action="#" th:action="#{/pdf}" method="post">
<div><input name="datePicker" id="datePicker" type="date" min="1900-01-01" required></div>
<span class="validity"></span>
<input type="submit" value="PDF Ausgabe erzeugen"/>
</form>
<script>
//Declare variables
var today = new Date();
// Set values
$("#datePicker").val(getFormattedDate(today));
// Get date formatted as YYYY-MM-DD
function getFormattedDate (date) {
return date.getFullYear()
+ "-"
+ ("0" + (date.getMonth() + 1)).slice(-2)
+ "-"
+ ("0" + date.getDate()).slice(-2);
}
</script>
</body>
</html>

Change attribute min of input type=date in javascript

I have two input fields of type date.
<input id="startdate" type="date" min='#DateTime.Now.AddDays(1).ToShortDateString()' onchange="handler(event)" />
<input id="enddate" type="date" min="#DateTime.Now.AddDays(2).ToShortDateString()" onchange="handler(event)" />
I want in enddate min date be alaways two days ahead towards selected date in start date. So far I use script adding days and selecting attribute min.
<script type="text/javascript">
function handler(e) {
var someDate = new Date($("#startdate").val());
document.getElementById("enddate").setAttribute('min', addDays($("#startdate").val(),2));
}
</script>
<script type="text/javascript">
function addDays(date, days) {
var result = new Date(date);
result.setDate(result.getDate() + days);
return result;
}
</script>
This proposition is not working. Any ideas?
using moment.js
<input id="startdate" type="date" min='' />
<input id="enddate" type="date" min="" />
<!-- import moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script>
(function(){
$('#startdate').attr('min', moment().format('YYYY-MM-DD'))
$('#startdate').on('change', function(e){
var startDate = $(this).val();
var endDate = moment(startDate).add(2, 'days').format('YYYY-MM-DD');
$('#enddate').attr('min', endDate);
})
})()
</script>

Adding days by 7, when I choose a date?

I just want to ask here about on how to add dates in the "input" statement in the form? When I choose a date, it will increment the days by 7 and display it to the "input" statement the type is date. Here's my code.
just click this link, to view the image.
<html>
<head>
<title>Date Sample</title>
</head>
<body>
<form>
Start Date:<br/>
<input type="date" name="sdate" id="sdate"/>
<br/>
End Date:<br/>
<input type="date" name="edate" id="edate"/>
</form>
</body>
</html>
Attach change listener
Use DateObj.getDate and DateObj.setDate methods to get required Date
Format the DateObj in YYYY-MM-DD to set the value
Note: I have added readonly attribute for end-date so that user can not edit that value.
$('#sdate').change(function() {
if (this.value) {
var d = new Date(this.value);
var newDate = d.setDate(d.getDate() + 7);
var dateObj = new Date(newDate);
var day = ("0" + dateObj.getDate()).slice(-2);
var month = ("0" + (dateObj.getMonth() + 1)).slice(-2);
$('#edate').val(dateObj.getFullYear() + "-" + (month) + "-" + (day));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
Start Date:
<br/>
<input type="date" name="sdate" id="sdate" />
<br/>End Date:
<br/>
<input type="date" name="edate" id="edate" readonly />
</form>

Input Date Object Step Up method in my Form that is Using Javascript

I'm currently trying to create a form that will extend on click using the method shown from this site. http://www.quirksmode.org/dom/domform.html
I have the Extending of the form more or less working fine, My issue is getting the Date field to correctly step up from the date that the user inputs in the first field.
Right now if I click on Add another Date, it adds a day to 1970-01-01 which i'm assuming is a default start date somewhere.
I'm not familiar enough with javascript to reference the generated date to the date that is initially selected by the User.
Here is a fiddle link of you want to see what I mean. https://jsfiddle.net/2nvz6kqj/9/
Note i'm pretty sure you can only get the date field to show up in Chrome correctly.
And here is my code.
<script type="text/javascript">
var counter = 0;
function moreFields() {
var date = document.getElementById("myDate").value;
counter++;
var newFields = document.getElementById("readroot").cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name;
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById("writeroot");
insertHere.parentNode.insertBefore(newFields,insertHere);
document.getElementById("myDate").stepUp(1);
}
window.onload = moreFields;
</script>
<body>
<div id="readroot" style="display: none">
<input type="button" value="Remove Date"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<input type="date" id="myDate" value="">
<select name="rankingsel">
<option>School Day</option>
<option value="day1">Day 1</option>
<option value="day2">Day 2</option>
<option value="day3">Day 3</option>
<option value="day4">Day 4</option>
<option value="day5">Day 5</option>
<option value="closed">School Closed</option>
</select><br /><br />
</div>
<form method="post" action="/cgi-bin/show_params.cgi">
<span id="writeroot"></span>
<input type="button" onclick="moreFields()" value="Add Another Date" />
<input type="submit" value="Send form" />
</form>
</body>
Ultimately once i get this working correctly, I'll submit it to a DB with PHP.
Ok, I changed a few things, but this should work for you.
NOTE: In order to keep the code and markup close to what you had, I didn't "fix" some of the JavaScript and HTML that I consider to be bad practice.
I also took some liberties with the readroot element IDs and writeroot is now a DIV not a SPAN as you had it.
<html>
<head>
<script type="text/javascript">
var counter = 0;
var date = new Date();
// this function adds a day to the date variable
function addDay (dateObj) {
var ticks = dateObj.getTime();
var newTicks = ticks + (24 * 60 * 60 * 1000);
dateObj.setTime(newTicks);
}
function moreFields() {
//var dateVal = document.getElementById("myDate").value;
counter++;
// querySelector is nicer way to get your elements
var newFields = document.querySelector("#readroot").cloneNode(true);
newFields.id = newFields.id + counter;
newFields.style = null;
// nifty way to convert node list into an array
var fields = Array.prototype.slice.call(newFields.childNodes);
// now use forEach instead of old-style for loop
fields.forEach(function (f,i,nodes) {
var theName = f.name;
if (theName) {
f.id = theName + counter;
}
});
// convert "writeroot" to div and just append the newFields container
var form = document.querySelector('#writeroot');
form.appendChild(newFields);
// to set the date, you need to use an ISO-format date string
var dateFields = form.querySelectorAll('[name="myDate"]');
var len = dateFields.length;
var dateField = dateFields[len - 1];
if (dateField) {
var dateISO = date.toISOString().substr(0,10);
dateField.value = dateISO;
addDay(date);
}
}
window.onload = moreFields;
</script>
</head>
<body>
<div id="readroot" style="display: none">
<input type="button" value="Remove Date"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<input type="date" name="myDate">
<select name="rankingsel">
<option>School Day</option>
<option value="day1">Day 1</option>
<option value="day2">Day 2</option>
<option value="day3">Day 3</option>
<option value="day4">Day 4</option>
<option value="day5">Day 5</option>
<option value="closed">School Closed</option>
</select><br /><br />
</div>
<form method="post" action="/cgi-bin/show_params.cgi">
<div id="writeroot"></div>
<input type="button" onclick="moreFields()" value="Add Another Date" />
<input type="submit" value="Send form" />
</form>
</body>
</html>

Categories

Resources