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/
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 am building an auction website in php. I have calculated remaining time till an auction is live. The remaining time is calculated as $remaning = $date - time(); where $date is the last date till auction of a product is live and it is fetched from the database using mysqli as shown below
<?php
if ($stmts = $mysqli->prepare('SELECT end_date FROM products WHERE pid = ?')) {
$stmts->bind_param("i",$pid);
$stmts->execute(); // Execute the prepared query.
$stmts->bind_result($endDate); // get variables from result.
$stmts->fetch();
$stmts->close();
$date = strtotime($endDate);
$remaning = $date - time();
}
?>
I am accepting bidding amount through a text box in my page as shown below.
<form ...> <!-- Form to submit bidding amount starts here -->
<input type="text" placeholder = "Bid Price" name="bid_price" id="bid_price" title="Enter your Bid for auction" required />
<input type="submit" class="sbmt" name="bidsubmit" id="bidsubmit" value="Submit"/>
</form> <!-- Form ends here -->
How can I make that text box having id bid_price disabled or hide it after remaining time is over, so that no user can bid after that.
With what you've provided I can simply suggest using a condition as to whether the date is after now like so:
$date = DateTime('now');
$date->modify('+ 2 day');//testing negative
if ($date > DateTime('now')) {
//show form
} else {
//auction has ended
}
In the snippet above if you set the modify function to - 1 days the form will not show! Yeyyyyys
Note that I've set the operator to > rather than >= so that the form does not show exactly when the action is set to end.
Another thing to bear in mind is timezones! But this shouldn't matter too much in your question?
Furthermore
Being a lover of packages in the packagist sense there is a package called Carbon which I think is really cool and simple to use.
if ($date->lt(Carbon::now()) {
}
It also has some cool features for date formatting and interval formatting. In this scenario I'd recommend using the diffForHumans method which gives some cool output like 2 days, 30 seconds ago. There's probably a method or parameter you can set to say Ends in 30 seconds time
http://carbon.nesbot.com/docs/
Prepare an if statement like
(pseudo code):
if (remainingTime <= 0) {
//auction ends
//html + php code here
?>
<input type="text" placeholder = "Auction Ended" name="bid_price" id="bid_price" title="Auction has ended" required disabled/>
}else{
<input type="text" placeholder="Bid Price" name="bid_price" id="bid_price" title="Enter your bid price" required/>
}
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");}
I am using Bootstrap datetimepicker in a form insider my Meteor.JS app in order to have two time picker elements. Below is the code I have so far which detect the onChange event for each of the two time picker elements in my form but I can't figure out how to get the selected time? So can someone please tell me how to do so? Thanks
$('.set-start-time').datetimepicker({
pickDate: false
});
$('.set-end-time').datetimepicker({
pickDate: false
});
$('.set-end-time').on("dp.change",function (e) {
var now = $('.set-start-time').data("DateTimePicker").getDate();
var then = $('.set-end-time').data("DateTimePicker").getDate();
//Above code won't return time...
});
I hope this helps some one.
HTML
<div name="startTime" class="input-group time">
<input class="form-control" type="text" value="" >
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
JS
$('.time').datetimepicker({
format: 'LT'
}).on("dp.change",function(e){
var date = e.date;//e.date is a moment object
var target = $(e.target).attr('name');
console.log(date.format("HH:mm:ss"))//get time by using format
})
e.date is a moment object thus time can derived by using format("HH:mm:ss")
I am giving two dates manually in the form after that one more empty box is there date difference should get calculated in terms of days in third box dynamically using java script
for me its working when i am clicking submit button and using submit button property but i want it should get calculated after entering second date into second box and it should display in third box here is my code....
please help me out here..
Script
function dateDiff() {
date1 = new Date();
date2 = new Date();
diff = new Date();
date1temp = new Date(dateform.firstdate.value);
date1.setTime(date1temp.getTime());
date2temp = new Date(dateform.seconddate.value);
date2.setTime(date2temp.getTime());
diff.setTime(Math.abs(date1.getTime() - date2.getTime()));
timediff = diff.getTime();
days = Math.floor(timediff / (1000 * 60 * 60 * 24));
dateform.difference.value = days;
return false;
}
html
<form>
<fieldset>
<label for="Enter leave starting date">Enter leave starting date
<input type="text" name="firstdate" />
</label>
<label for="Enter leave ending date">Enter leave ending date
<input type="text" name="seconddate" onkeyup="return dateDiff();" />
</label>
<label>
Date Difference (in days): <input type=text name=difference>
</label>
</fieldset>
</form>
Actually, the code works...the only thing you need is to give the form the name you use in the script
<form name="dateform">
....i tested it on your fiddle, it works like a charm: http://jsfiddle.net/byJKg/5/
...tough you might want to check if the datediff is not NaN
if(!isNaN(days)){
dateform.difference.value = days;
}
[edit] ...i just saw it wasn't your fiddle....but the fiddle posted by Felix Lahmer, with your source code