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>
Related
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;
}
I'm trying to calculate the date of birth from a given age.
My logic is
When we enter an age say '5'. The date of birth will be calculated as exactly 5 years from the current date. Example current date is 20/8/2018.
Then date of birth will be 20/8/2013 if the age is 5.
So below is my code:
function validatedob() {
var dob_value = document.getElementById('dob').value;
var age_value = document.getElementById('age').value;
var current_date = new Date();
var birth_date = new Date();
var birth_year = current_date.getFullYear() - age_value;
var birth_month = current_date.getMonth();
var birth_day = current_date.getDate();
birth_date.setDate(current_date.getFullYear() - age_value);
birth_date.setMonth(current_date.getMonth());
birth_date.setFullYear(current_date.getDate());
document.getElementById('dob').setDate(birth_day);
document.getElementById('dob').setMonth(birth_month);
document.getElementById('dob').setFullYear(birth_year);
}
<div class="form-inline" id="Age">
<label for="age">Age</label>
<input id="age" type="integer" name="age" onchange="validatedob()">
</div>
<div class="form-inline" id="birth">
<label for="DOB">Date of Birth</label>
<input id="dob" type="date" value="Unknown" name="date_of_birth" max="31-12-2030">
</div>
This is not working. I'm not goodwith html properties.
Can someone help me? how to achieve this?
Here is the simple answer:
> d1 = new Date(2018, 00, 01)
Date 2018-01-01T00:00:00.000Z
> d2 = new Date(d1.getFullYear() - 5, d1.getMonth(), d1.getDate())
Date 2013-01-01T00:00:00.000Z
But, I would suggest to use a library such as Luxon.
Date manipulation is an absolute nightmare if you do it by yourself. This video from Computerphile summarizes it better than I could:
https://www.youtube.com/watch?v=-5wpm-gesOY
Here is a really simple solution that works and some changes to your HTML.
Changes to HTML:
The div and label both had the id "age", this must be unique.
type="integer"doesn't exist, so i changed it to type="number".
And value="unknown"isn't the right format "yyy-MM-dd", so i just removed it.
for="DOB"to for="dob", now that works aswell
Code:
HTML
<div class="form-inline">
<label for="age">Age</label>
<input id="age" type="number" name="age"onchange="validatedob()">
</div>
<div class="form-inline" id="birth">
<label for="dob">Date of Birth</label>
<input id="dob" type="date" name="date_of_birth" max="31-12-2030">
</div>
JavaScript
function validatedob() {
var age_value = document.getElementById("age").value;
var current_date = new Date();
var birth_date = new Date(current_date.getFullYear() - age_value, current_date.getMonth(), current_date.getDate() + 1);
document.getElementById("dob").valueAsDate = birth_date;
}
Here is some sample code for your reference
https://codepen.io/ji_in_coding/pen/wEvoMK
<div class="form-inline" id="Age">
<label for="age">Age</label>
<input id="age" type="integer" name="age" onchange="validatedob()">
</div>
<div class="form-inline" id="birth" >
<label for="DOB">Date of Birth</label>
<input id="dob" type="input" name="date_of_birth">
</div>
Javascript
function validatedob()
{
var age_value = document.getElementById("age").value;
var today = new Date();
var calculated_birthday = new Date(
parseInt(today.getFullYear())+parseInt(age_value),
today.getMonth(),
today.getDate());
document.getElementById("dob").value = calculated_birthday.toLocaleDateString("en-US");
}
You're issue is that you are trying to setDate and cie on a HTMLElement. The input dob expect a string formatted as yyyy-MM-dd. You can try something like that:
var $dob = document.getElementById('dob');
var $age = document.getElementById('age');
function validatedob() {
var age = $age.value;
var date = new Date();
date.setFullYear(date.getFullYear() - age);
$dob.value = formatDate(date);
}
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
<div class="form-inline" id="Age">
<label for="age">Age</label>
<input id="age" type="integer" name="age" onchange="validatedob()">
</div>
<div class="form-inline" id="birth">
<label for="DOB">Date of Birth</label>
<input id="dob" type="date" value="Unknown" name="date_of_birth" max="31-12-2030">
</div>
PS: For performance purpose avoid to repeat document.getElementById(...) in each method call. Do it once as done in my example.
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>
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>
I have a list of datepickers i need to set the value based on selection of first date picker, if we select the value in first date picker same value should be passed to all other date pickers
<input name="start" id='from' class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />
<input name="start" id='to' class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />
<input name="start" id='return' class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />
<input name="start" id='depart' class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />
Here is my jquery
$('input.date-pick, .input-daterange input[name="start"]').datepicker().on('changeDate', function (ev) {
var date2 = $('.date-pick').datepicker('getDate', '+1d');
//alert (date2);
date2.setDate(date2.getDate()+1);
$('input.date-pick).datepicker('setDate', date2);
});
But its not working.Please help to resolve this
Thanks in advance
$(function () {
$("#datepicker1, #datepicker2, #datepicker3, #datepicker4").datepicker();
$("#datepicker1").datepicker("option", "onSelect", function (dateText, inst) {
var date1 = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);
var date2 = new Date(date1.getTime());
date2.setDate(date2.getDate() + 1);
$("#datepicker2").datepicker("setDate", date1);
var date3 = new Date(date1.getTime());
date3.setDate(date3.getDate() + 2);
$("#datepicker3").datepicker("setDate", date1);
var date4 = new Date(date1.getTime());
date4.setDate(date4.getDate() + 3);
$("#datepicker4").datepicker("setDate", date1);
});
});
Link Here.