Display age on selecting date from date picker - javascript

I have written following jQuery for calculating age when user selects date from date picker and the focus of textbox(#dobfield) is lost then the calculated age should get displayed on textbox (#age).
function GetAge(dateString) {
var today = new Date();
var birthDate = new Date(dateString);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
}
$(document).ready(function() {
$("#dobfield").onblur(function() {
var dob = $("#dobfield").val().trim();
var calculatedDob = GetAge(dob);
$("#age").text(calculatedDob);
});
});
The html is as
<input aria-required="true" id="dobfield" class="form-control" required="" type="text" onclick="css()">
<input type="text" id="age" class="form-control" required>
The above code is not working!!!
Please help !!!

All the comments and answers here are great. However, the only problem with your code was that you were using the incorrect method to update the textbox.
To change the text of an input field (textbox):
$("#inputId").val("new value");
To change the text of a different element (label, span, et.c.):
$("#otherId").text("new value");

Here is the exact example what you want. This function will calculate age as soon as you change the date from datepicker and it will show the age in the field. In this example #dob is datepicker field's id.
$('#dob').datepicker({
onSelect: function(value, ui) {
var today = new Date(),
dob = new Date(value),
age = new Date(today - dob).getFullYear() - 1970;
$('#age').value(age); // Changed it to `val()` as it is the textbox.
},
maxDate: '+0d',
yearRange: '1920:2010',
changeMonth: true,
changeYear: true
});
jsfiddle

Check it out.
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<input type="text" name="birthdate" value="10/24/1984" />
<input type="text" id="age" class="form-control" required readonly>
<script type="text/javascript">
$(function() {
$('input[name="birthdate"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true
},
function(start, end, label) {
var years = moment().diff(start, 'years');
alert("You are " + years + " years old.");
$("#age").val("You are " + years + " years old.");
});
});
</script>
Example: https://jsfiddle.net/m2fdprrL/
Same with appending the result to age field. https://jsfiddle.net/m2fdprrL/2/

Related

for daterange picker in the form how to set isinvalid date when already applied the callback function for getting the dates on click of apply button

List item
html form
<div class="form-group " id="input-dates">
<input class="form-control date-range-picker" id="dateRange_n" type="text" name="dates" placeholder="<?php echo get_phrase('when'); ?>.." autocomplete="off" required>
<i class="icon_calendar"></i>
i have used the callback function
function myCallback(start, end) {
$('#dateRange_n').html(start.format('MM DD, YYYY') + ' - ' + end.format('MM DD, YYYY'));
}
let options = {} // you can add more options to this, but need at least this
$('#dateRange_n').daterangepicker(options, myCallback)
.on("input change", function(e) {
var days = e.target.value;
console.log("Date changed: ",days); });
now i want to use isinvalid date function for disable particular date. i have used the following function on document.ready()
$('#dateRange_n').daterangepicker({
// you can use this optionally -> maxSpan: 50
"startDate": today,
"endDate": today2,
"minDate": today,
isInvalidDate: function(ele) {
var currDate = moment(ele._d).format('MM-DD-YYYY');
return ["06-15-2021"].indexOf(currDate) != -1;
}
});
it is working but callback function is not working when i add the above function on document ready
You can pass the callback function after the option.
Example below
function myCallback(start, end) {
console.log("callback");
$("#dateRange_n").html(
start.format("MM DD, YYYY") + " - " + end.format("MM D, YYYY")
);
}
let options = {
startDate: "12-01-2018",
endDate: "12-01-2023",
minDate: "10-06-2021",
isInvalidDate: function (ele) {
var compareDate = moment(ele);
var startDate = moment("12/01/2019", "DD/MM/YYYY");
var endDate = moment("5/06/2021", "DD/MM/YYYY");
return compareDate.isBetween(startDate, endDate);
},
};
$("#dateRange_n").daterangepicker(options, myCallback);
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div class="form-group" id="input-dates">
<input
class="form-control date-range-picker"
id="dateRange_n"
type="text"
name="dates"
placeholder="test...."
autocomplete="off"
required
/>
<i class="icon_calendar"></i>
</div>

Air Datepicker inline javascript for enabling date 15 days from newDate

I am using air datepicker for a form element and want to set the calendar to show dates which are 15 days from the current date and disabling selection of all previous dates.
However, I haven't been able to find a solution to this.
The following is the input field code so far:
<input type="text" data-date-format="dd-mm-yyyy" data-range="true" data-multiple-dates-separator=" - " data-language="en" data-startDate= newDate(+new Date + 12096e5) class="datepicker-here" name="Schedule">
Any help will be really appreciated.
Using jQuery UI
var dateToday = new Date();
var dates = $("#date").datepicker({
defaultDate: "+15",
changeMonth: true,
minDate: "+15",
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<label for="from">From</label> <input type="text" id="date" name="from"/>
Using air Datepicker
set minDate while initializing datepicker
var dateToday = new Date();
var dates = $("#date").datepicker({
language: 'en',
minDate: getMinDate(15)
});
function getMinDate(days) {
var date = new Date();
date.setDate(date.getDate() + days);
return date;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.en.min.js"></script>
<label for="from">From</label> <input type="text" id="date" name="from"/>

air-datepicker js : hour+2

I try to set hours (+2h) to actual day and not for the others.
Example:
Today is October 18th, time: 10am.
If I click (without changing the date) -> Time is 12pm.
If I click and choose tomorrow (19th October) -> I choose any time.
Today is October 19th, time: 08am.
If I click (without changing the date) -> Time is 10am.
If I click and choose tomorrow (20th October) -> I choose any time.
PS : If possible, I want to disable the entry in the input (because we can change the time)
Thx
var start = new Date()
var hour = start.getHours()+2;
$('#date').datepicker({
language: 'en',
timepicker: true,
minHours: hour
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.en.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet"/>
<input type='text' id="date" class="" />
EDIT: I thought you want to disable previous dates (everything < now + 2hours). If not, just change minDate: start to startDate: start.
Try with:
var start = new Date();
// first available date and time
start.setHours(start.getHours() + 2);
$('#date').datepicker({
language: 'en',
timepicker: true,
minDate: start,
onSelect: function(fd, d, picker) {
if (d < start) {
return;
}
if (d.getDate() == start.getDate() &&
d.getMonth() == start.getMonth() &&
d.getYear() == start.getYear()) {
// set minHours to start hours
picker.update({
minHours: start.getHours()
});
} else {
// set minHours to 0 hours
picker.update({
minHours: 0
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.en.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet" />
<input type='text' id="date" class="" />
Also, air-timepicker docs: http://t1m0n.name/air-datepicker/docs/

Invalid Date using moment.js and Pikaday

Im trying to pass a user selected date using Pikaday into a variable to be processed in a form using the following javascript, but my page is returning "Invalid Date".
<script src="moment.js"></script>
<script src="pikaday.js"></script>
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
firstDay: 1,
minDate: moment().add({days: 20}).toDate(),
disableDayFn: function(date){// Disable Monday
return date.getDay() === 0 || date.getDay() === 6;
},
onSelect: function(date) {
field.value = moment(picker.toString()).format("MM/DD/YY");
}
});
var selecteddate = moment(picker.toString()).format("MM/DD/YY");
</script>
Can anyone see what I'm doing wrong here?
You put a new option "format" and change "onSelect":
Example
<html>
<head>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.js"></script>
</head>
<body>
<div>
<input type="text" id="datepicker">
<input type="text" id="datepicker2">
</div>
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
firstDay: 1,
format:'MM/DD/YY',
minDate: moment().add({days: 20}).toDate(),
disableDayFn: function(date){// Disable Monday
return date.getDay() === 0 || date.getDay() === 6;
},
onSelect: function(date) {
this._o.field.value =this.getMoment().format("MM/DD/YY");
document.getElementById('datepicker2').value = picker.toString("MM/DD/YY");
}
});
var selecteddate = moment(picker.toString()).format("MM/DD/YY");
</script>
</body>
</html>

How to autoinsert date in second field after there were already inserted some date into the 1st field?

Lets say i have two fields:
Start Date: <input type="date" name=""/>
End Date: <input type="date" name=""/>
I want when i add for example 03/12/2014 in the first field to autoinsert 7 days after the added date into the 2nd field ( in this case it will be 10/12/2014).
I will make my question more clear.
<title>Ha</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.min.js" type="text/javascript" ></script>
<script src="jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
I use jquery datepicker calendar.
And here are my fields:
<div class='ddate'><p>Start date:<input type="date" id="datepicker" name="d1" required="required"></p></div>
<div class='ddate'><p>End date:<input type="date" id="datepicker1" name="d2" ></p></div>
So i should use some JS function or ?
Doing date math in Javascript is hard because the native Date object in Javascript is one of the more poorly implemented objects in the language. My goto date library is moment.js.
The below code should get you pretty close and show you how to validate the fields for invalid date strings.
var $startDate = $('#startDate'),
$endDate = $('#endDate');
$startDate.on('change', function(e) {
var currentDate = moment($(this).val(), "YYYY-MM-DD");
$startDate.css('background', 'none');
if (currentDate.isValid()) {
var weekLater = currentDate.add(7, 'days');
$endDate.val(weekLater.format('YYYY-MM-DD'));
} else {
$startDate.css('background', 'red');
}
});
EDIT:
Working example http://jsbin.com/puwaco/1/edit?html,js,output
If you are using jQuery, you can simply attach an on event when start date changes ...
Start Date: <input type="date" name="date" id="start_date" />
End Date: <input type="date" name="date" id="end_date" />
... then ...
$("#start_date").on('blur', function() {
var self = this;
var new_date = new Date($(self).val());
new_date.setDate(new_date.getDate() + 8);
$("#end_date").val(new_date.yyyymmdd());
});
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
};
See jsFiddle

Categories