Develop Reference

Show the date always without seconds is not working

I have a page to edit the administrators of a post. I have some radio buttons in this page, each radio button corresponds to an administrator. When an administratotr is selected the details of that administrator appears on the form fields below the radio buttons.
One form field is a date. Im using cabon to show in this edit post administrators page the date in this format "format('d F Y - H:i')":
<div class="input-group date" data-provide="datepicker">
<input type='text' name="date" value="{{ $admin->date->format('d F Y - H:i') }}"
class="form-control" placeholder="DD/MM/YYY" />
<span class="input-group-addon"><i class="fa fa-calendar text-primary" aria-hidden="true"></i></span>
</div>
And it works fine. The date appears on this format: "07 February 2018 - 6:30".
But then I have some jQuery that receives an array with the administrators of the post from the controller and populate the details of each administrator in the form when the corresponding radio button is selected.
With this jQuery when this edit administrators page is acessed the date appears on this same format ""07 February 2018 - 6:30". But then if some amdinistrator is selected through the radio button the date field of that administrator appears with seconds: ""07 February 2018 - 6:30:00". But I dont want to show the seconds. I want this format ""07 February 2018 - 6:30".
Do you know how to do this?
jQuery:
$(document).ready(function () {
var admins= {!! $admin!!}
$("input[name='radiobutton']").click(function() {
let id = $(this).attr("id");
let data = admins.find(e => e.id == id) || {
name: "",
date: "",
};
//alert(data.date); // 2018-02-07 6:30:00
$("input[name='name']").val(data.name);
...
$("input[name='date']").val(data.date);
});
});

I don't know what went wrong along the line but from the Javascript end, moment can come to your rescue:
So, an example will be:
moment(data.date).format('DD MMMM YYYY h:mm')
PS: You have to include moment from cdn or install it via npm

Age vertification input box - calculate if over 18 years

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");}

Compare dates from up to three datepicker fields, then populate another field with earliest one

I have a web form written in Perl, HTML, CSS, and a smattering of Javascript. I have a few jquery based Javascripts included, but am pretty new to Javascript and jquery, overall.
The form has three date fields which are populated with jquery's "datepicker" script. Sometimes only one of the three dates will be entered, sometimes, two, and sometimes all three.
How could I compare the dates that are picked--whether it's one, two, or three, to identify the earliest date, and then take that date and populate another field on the form?
The form is an application for housing in an apartment building, and each apartment can have between 1 and 3 residents. Each resident has to indicate the date on which they intend to move in. Then my program needs to determine which of the dates is the earliest, and populate another field (the overall "earliest occupancy date") with that value.
I'd like to be able to have the "earliest occupancy date" filled instantly as the dates are entered (as opposed to having to submit the form, and then reload it to see the date get filled in).

This is a minimal example - no validation of dates in the date picker fields, etc.
https://jsfiddle.net/sdjwoo0a/
HTML
<input name='date1' type='text' class='picky' placeholder='Date 1' />
<input name='date2' type='text' class='picky' placeholder='Date 2' />
<input name='date3' type='text' class='picky' placeholder='Date 3' />
<input id='earliest_date' name='earliest' type='text' readonly placeholder='Earliest' />
JS
jQuery(document).ready(function() {
$('input.picky').each(function() {
$(this).datepicker();
$(this).change(updateEarliest);
});
function updateEarliest() {
var dates = [];
$('input.picky').each(function() {
var val = $(this).val();
if (val != '') {
dates.push({
val: val,
date: new Date(val)
});
}
});
dates.sort(function(a, b) {
return a.date > b.date ? 1 : a.date < b.date ? -1 : 0;
});
var earliest = dates.length ? dates.shift().val : '';
$('#earliest_date').val(earliest);
}
});

Check if date in field is more than x

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/

More than 3-Way Checkbox

I want to implement an country-selection-input. In other words, I've got a form with a 25x25px flag, which I want to be clickable - say, german as default, first click changes it to netherlands, second to swiss or w/e.
The last chosen value needs to be in my POST-Array with the other values of the form.
I've tried to accomplish this using 3-Way checkboxes with javascript, but I'm going to need more than 3 options.
Any idea on how to do this? I've thought about an input select, hiding everything but the current value - but I don't know how to submit this to change to the next value.
Thanks in advance for any input, and please don't judge me for such a question - this is my first js/html/css project. :-)

You can do something like this:
HTML
<form method="POST">
<img src="german.png" onclick="switchCountry(this);"/>
<input id="country" name="country" type="hidden" value="german" />
<input type="submit" value="Submit" />
</form>
JavaScript
var countries = ['german', 'netherlands', 'swiss'];
var switchCountry = function(img) {
var input = document.getElementById('country'),
oldValue = input.getAttribute('value'),
newValue = countries[(countries.indexOf(oldValue) + 1) % countries.length];
// Switch input value that will be posted with form
input.setAttribute('value', newValue);
// Switch graphical representation of country
img.setAttribute('src', newValue + '.png');
};
Example here http://jsbin.com/alasip/1/edit