I have an input box where you should put your year of birth in. If the number is below 1998 you should gain access, if it's over 1998 you should go to another page.
I know this could possible be a mixture of javascript and html, but I can't figure out how to make the code and hoped you guys could help me!
This is the action that should happen, if the user is born in 1998 or before:
<div id="btn-close-modal" class="close-modal-03">
CLOSE MODAL
</div>
Hope you can help me :-)
I'm using jQuery.
Get the year from the input - $('input').val().
Get the current year - new Date().getFullYear().
Check if the diff between them is larger than 18.
Like this:
$('#age_validation_btn').click(function() {
var age = $('#age_validation_input').val();
if (new Date().getFullYear() - parseInt(age) >= 18) {
alert('older than 18');
}
else {
alert('younger then 18');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="age_validation_input" /><button id="age_validation_btn">Validate</button>
A better way is to use :::
db=new Date("original time string from input field with type date here");
db1=new Date();
var d= db1.getFullYear()-db.getFullYear();
if (d>limit) {alert("decide what to do you are not upto limit");}
Related
Hello I have input on registration form and want to retrieve the value of input and compare it with the current date using JavaScript and display message after check age if age less than 18 year and display custom message on the bottom of input.
var dateControl = document.querySelector('input[type="date"]').getFullYear();
var startDate = new Date(document.getElementById('date1').value);
and this is the HTML
<input type="date" name="date" class="form-control" id="date1" value="{{ old('date', date('Y-m-d')) }} " onclick="checkDate()">
<div id="currentdate"></div>
but is give old value after each click.
and the message not displayed
Best regards
Not much code to go from but I think you may need this function anyway to compare the date you receive from the form with the current date and get the difference
function process() {
var today = new Date();
var date = new Date(document.getElementById("date1").value);
var diff = Number((today.getTime() - date.getTime()) / 31536000000).toFixed(0);
if (diff >= 18) {
// Your form submission goes here
console.log("success");
} else {
// your error handeling goes here
console.log("error");
}
}
PS: That this method won't give you the difference in an exact way,
it will just give you the difference between the years.
I'm hoping someone can help me figure out how to code an app that allows you to select a mailing date with jquery datepicker, select Standard or First-class shipping from a dropdown, and calculate an estimated delivery date window (7-12 Days for Standard, 3-5 Days for First-class).
I had it working when the "Mailing in" [number] "Days" accepted a string input but then it broke when I added code for the datepicker.
I also need to keep weekends & holidays excluded from the shipping calculation.
Here's a link to the full pen: https://codepen.io/allyjfuller/pen/oNXvwJL
$('#calculateShippingEstimate').click(function( event ) {
//Prevent button from 'submitting' and reloading the page
event.preventDefault();
//Capture the mailing date
var $mailingDate = $("#mailingDate").val();
var $postageType = $("#postageType").val();
var $shipStateShippingDuration = eval('data.shipTimes.' + $postageType);
var $totalShippingTime = parseInt($mailingDate) + parseInt($shipStateShippingDuration);
//Create the date
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate() + parseInt($totalShippingTime);
var year = date.getFullYear();
<form>
<section>
<label>Mailing on</label>
<input id="mailingDate" placeholder="number"></input>
</section>
<section>
<label>Postage:</label>
<select id="postageType">
<option value="Standard">Standard</option>
<option value="FirstClass">First-Class</option>
</select>
</section>
<input class="button" id="calculateShippingEstimate" type="submit" value="Get Estimated Delivery Date"></input>
<div class="results"></div>
</form>
Looking through your code snippet it seems like you're trying to hand roll a lot of features that already exist within the JS Date framework.
Once you get the starting date and the number of days for shipping, you can add those days together to create a final shipping date. From there and within a loop, you may go day by day and check whether the current date index is a weekday or not (using Date.getDay()).
With that you may check for Saturday [6] and Sunday [0] and then add days needed on top of the final date.
I've included my version of the code below with some console debugging but have not added code holidays. Holidays may be checked for using an array or map. Get all the holiday dates for a year and then have the current index check the holiday array/map to see if there are any matches. If there are, add another day to the final date.
The function for addDays is pulled from here. It adds some explanation which I think you'll find helpful.
function addDays(date, days) {
const copy = new Date(Number(date))
copy.setDate(date.getDate() + days)
return copy
}
// FINAL SHIPPING ESTIMATE
$('#calculateShippingEstimate').click(function( event ) {
event.preventDefault();
let mailingDateVal = $("#mailingDate").val();
let shippingDuration = data.shipTimes[$("#postageType").val()];
let mailingDate = new Date(mailingDateVal);
console.log("final Date: " + addDays(mailingDate, shippingDuration));
let finalDate = addDays(mailingDate, shippingDuration)
let mailingDateIndex = new Date(mailingDate);
while(mailingDateIndex <= finalDate) {
console.log("current mailDateIndex: " + mailingDateIndex)
if (mailingDateIndex === finalDate) {
break;
}
// Weekend
console.log(mailingDateIndex.getDay());
if (mailingDateIndex.getDay() == 0 || mailingDateIndex.getDay() == 6) {
console.log("weekend day hit! Adding day to final...")
finalDate = addDays(finalDate, 1);
}
mailingDateIndex = addDays(mailingDateIndex, 1);
}
});
Thank you in advance
Q.1
I would like to format the Angular-UI Bootstrap date and time pickers. Every time I change the time or date the output is in the following manner Today is: "2015-03-19T22:00:00.000Z". Obviously this is in correct. And my Node-Mysql is filled with this date formatting
What's more bizzar is that There is 1 day subtracted in the date, On the time it subtracts 2 hours. My Time zone is GMT+2 See MyBin.
When I click on the date again to change it I want the date to stay as 2015-03-20 and the time to 11:20
Q.2
How can I properly validate the following
<form name="BookingForm" ng-repeat="adult in myAdults">
<h4>Adults</h4>
<p>
<input required
ng-required="true"
name="adultName"
ng-model="adultItem.name"
type="text"
class="form-control"
ng-minlength = 3
placeholder="Name">
<div class="error" ng-show="BookingForm.adultName.$dirty && BookingForm.adultName.$invalid">
<small class="error btn-danger"
ng-show="BookingForm.adultName.$error.required">
Your name is required.
</small>
<small class="error btn-danger"
ng-show="BookingForm.adultName.$error.minlength">
Your name is required to be at least 3 characters
</small>
</div>
</p>
</form>
My js Looks like this
$scope.adults = 4;
$scope.children = 2;
$scope.myAdults = [];
for (i = 0; i < $scope.adults; i ++) {
$scope.myAdults.push({});
}
If I have just one form it works fine. But if I have more than one The validation messages only show up on the last one.
Most Important is Q1
Thank you again.
datepicker is using angularjs date filter and it's localised but returned values are in GMT so 2015-03-19T22:00:00.000Z is correct for 2015-03-12T00:00:00.000Z as it will subtract 2 hours from midnight back which changes date as well, if you need a specific format you can do it with date filter as per plunker so
{{'2015-03-19T22:00:00.000Z' | date:'dd-MMMM-yyyy'}} in your timezone shall return 20-March-2015
http://angular-ui.github.io/bootstrap/#/datepicker
http://plnkr.co/edit/CoIS2BFK5O5EAaTu4Vc2?p=preview
javascript
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
I would like to have a function that checks if a date in a field is more than 50 years in the past from todays date. If the date is more than 50 years in the past, a message should be shown, but there should not be any minimum date (maximum years).
I have a form where it is possible to add more fields dynamically (name + birthdate), and every new "form" should show this message under the birthday field if it is more than 50 years in the past.
The warning message under each birthdate field should be something like this (if over 50):
<div class="alert alert-warning">This person is over 50 year. Remember to do...</div>
My html setup:
<label for="id_nested-0-name">Name</label>
<input id="id_nested-0-name" maxlength="200" name="nested-0-name" type="text" />
<label for="id_nested-0-birthdate">Birthdate</label>
<input class="dateinput" datadatepicker="datepicker" id="id_nested-0-birthdate" name="nested-0-birthdate" type="date" />
<!-- If nested-0-birthdate is over 50, add html with warning message -->
<!-- New person -->
<label for="id_nested-1-name">Name</label>
<input id="id_nested-1-name" maxlength="200" name="nested-1-name" type="text" />
<label for="id_nested-1-birthdate">Birthdate</label>
<input class="dateinput" datadatepicker="datepicker" id="id_nested-1-birthdate" name="nested-1-birthdate" type="date" />
<!-- If nested-1-birthdate is over 50, add html with warning message -->
Edit:
This code works great in chrome, but does not work in safari. Anyone see what could be wrong?
<script type="text/javascript">
$(document).ready(function() {
$(function(){
$("#collapse1 input.dateinput").on("change.dp change keyup paste click propertychange",function (e){
var timediff1 = moment().diff(moment($(this).val()), 'years');
if (timediff1 >= 50 ) {
$('#alert1').remove();
$('#collapse1 .panel-body').append('<div id="alert1">Over 50!</div>');
} else {
$('#alert1').remove();
}
});
});
});
</script>
Using http://eonasdan.github.io/bootstrap-datetimepicker/ for my date picker.
Edit 2:
I was missing data-format="DD/MM/YYYY" on my input. Now everything works!
If you dont mind using moment.js
JSFiddle with demo
boolean isOldGeezer = moment().diff(moment($(this).val()), 'years') > 50;
Three part answer to this question
First you need to get the date 50 years ago. I am using a small hack here. You can find better techniques in StackOverflow.
ago50y = new Date();
ago50y.setFullYear(ago50y.getUTCFullYear()-50);
Second, compare that date when the input changes. The following code uses jQuery.
$('input.dateinput').change(function (event) {
if ($(event.target).val() < ago50y.toJSON().slice(0,10)) {
$('#alert').text('This person is over 50 year. Remember to do...');
} else {
$('#alert').text('');
}
});
Third, invoke the second part whenever you add a new set of inputs. Put the above code in a function and include that in the callback while adding the new set.
http://jsfiddle.net/FA4hJ/
I want to create a very simple javascript form validation. I have two input boxes that are populated by a datetime picker. the datetime picker populates the input box with in the format 2011-12-21 09:58. I have an input box for collection date and arrival date.
I want to validate that the 'deliverdatetime' entered is greater than the 'collectdatetime'.
The output of a failed validation should just be in a popup window saying 'deliverdate' before 'coolectdate'.
Can this be done with javascript and if so can someone give me a brief example?
my basic html form code is:
...
<td>
<input type="text" id="collectdatetime" name="collectdatetime">
</td>
<td>
<input type="text" id="deliverdatetime" name="deliverdatetime" >
</td>
...
Thanks in advance for the assistance and happy holidays to everyone.
Regards,
Ryan Smith
GIven the ISO8601 format of the date/time string, you can just compare the values as strings. It's one of the beauties of using an ISO8601 format. You have asked for the delivery time to be after the collection time, which seems backwards to me but anyhow…
<form onsubmit="return checkDates(this)">
<table>
<tr>
<td>
<input type="text" id="collectdatetime" name="collectdatetime">
<td>
<input type="text" id="deliverdatetime" name="deliverdatetime">
<td>
<input type="submit">
</table>
</form>
<script>
function checkDates(form) {
if (form.collectdatetime.value >= form.deliverdatetime.value) {
alert('Collection time must be after deliver time');
return false;
}
}
</script>
You could do something like this:
var collectTime = (new Date(document.getElementById("collectdatetime").value)).getTime(),
deliverTime = (new Date(document.getElementById("deliverdatetime").value)).getTime();
if(deliverTime > collectTime) {
//Ok!
}
This creates 2 Date objects, passing the selected values to the constructor, and then compares the times. The getTime method returns a number representing the time that has passed since 1 January 1970 00:00:00 in milliseconds.
Here's a working example.
You can create Date object from this values and compare them:
var collect = new Date($('#collectdatetime').val());
var delivery = new Date($('#deliverdatetime').val());
if (delivery < collect) {
alert('Delivery date before collect!');
}