I'm trying to build a progressive form but can't find a solution to reveal additional form fields when a standard date picker has received a value. All solutions I've found involve date validation or conditional logic that goes beyond my requirements and understanding.
I've had success revealing elements with :checked for radio inputs but is there something like this that would work for date inputs? jQuery is also acceptable as I'm already using it to restrict past dates from being selected.
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
$('#date').attr('min', maxDate);
});
.when, .form {display:none;}
input:checked ~ .when {display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<h4>Are you sending or receiving?</h4>
<input type="radio" id="sender" name="clienttype"><label for="sender">Sending</label>
<input type="radio" id="receiver" name="clienttype"><label for="receiver">Receiving</label>
<div class="when">
<h4>When?</h4>
<input type="date" id="date" name="Date">
</div>
<div class="form">
Extra form fields go here
</div>
You can try jQuery change() event to get the value when date is changed
$('#date').change(function() {
let date = $(this).val();
console.log(date);
});
I just have a simple line of code like this:
<input type='date' min='1899-01-01' max='2000-01-01'></input>
Is there a simple way to set the max date to "today" instead of 2000-01-01? Or do I have to use Javascript to do this?
JavaScript only simple solution
datePickerId.max = new Date().toISOString().split("T")[0];
<input type="date" id="datePickerId" />
// below trick also works! Thanks jymbob for the comment.
datePickerId.max = new Date().toLocaleDateString('fr-ca')
You will need Javascript to do this:
HTML
<input id="datefield" type='date' min='1899-01-01' max='2000-13-13'></input>
JS
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
today = yyyy + '-' + mm + '-' + dd;
document.getElementById("datefield").setAttribute("max", today);
JSFiddle demo
In lieu of Javascript, a shorter PHP-based solution could be:
<input type="date" name="date1" max="<?= date('Y-m-d'); ?>">
Javascript will be required; for example:
$(function(){
$('[type="date"]').prop('max', function(){
return new Date().toJSON().split('T')[0];
});
});
JSFiddle demo
toISOString() will give current UTC Date. So to get the current local time we have to get getTimezoneOffset() and subtract it from current time
document.getElementById('dt').max = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split("T")[0];
<input type="date" min='1899-01-01' id="dt" />
Is you don't want to use external scripts, but rather set the max limit right in the HTML input element, inline as so:
<input type="date" max="3000-01-01" onfocus="this.max=new Date().toISOString().split('T')[0]" />
I've intentionally added the max attribute with a date far into the future, because it seems Chrome browser change the width of the field once a max attribute is set, so to avoid that, I had it pre-set.
See live demo
I am using Laravel 7.x with blade templating and I use:
<input ... max="{{ now()->toDateString('Y-m-d') }}">
Yes, and no. There are min and max attributes in HTML 5, but
The max attribute will not work for dates and time in Internet Explorer 10+ or Firefox, since IE 10+ and Firefox does not support these input types.
EDIT: Firefox now does support it
So if you are confused by the documentation of that attributes, yet it doesn't work, that's why.
See the W3 page for the versions.
I find it easiest to use Javascript, s the other answers say, since you can just use a pre-made module. Also, many Javascript date picker libraries have a min/max setting and have that nice calendar look.
An alternative to .split("T")[0] without creating a string array in memory, using String.slice():
new Date().toISOString().slice(0, -14)
datePickerId.max = new Date().toISOString().slice(0, -14);
<input type="date" id="datePickerId" />
Examples with jQuery and JavaScript:
$('#arrival_date').attr('min', new Date().toISOString().split('T')[0])
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="arrival_date" id="arrival_date" class="form-control" aria-label="...">
document.getElementById('arrival_date').setAttribute('min', new Date().toISOString().split('T')[0])
<input type="date" name="arrival_date" id="arrival_date" class="form-control" aria-label="...">
it can be useful :
If you want to do it with Symfony forms :
$today = new DateTime('now');
$formBuilder->add('startDate', DateType::class, array(
'widget' => 'single_text',
'data' => new \DateTime(),
'attr' => ['min' => $today->format('Y-m-d')]
));
A short but may be less readable version of one of the previous answers.
<script type="text/javascript">
$(document).ready(DOM_Load);
function DOM_Load (e) {
$("#datefield").on("click", dateOfBirth_Click);
}
function dateOfBirth_Click(e) {
let today = new Date();
$("#datefield").prop("max", `${today.getUTCFullYear()}-${(today.getUTCMonth() + 1).toString().padStart(2, "0")}-${today.getUTCDate().toString().padStart(2, "0")}`);
}
</script>
Yes... you have to use Javascript. My solution below is just yet another option which you can pick up.
var today = new Date().toJSON().slice(0, 10);
var date = $('#date-picker');
date.attr('max', today);
Example with React
import Input from "./components/Input";
const DateInput = () => {
const today = new Date().toISOString().split("T")[0];
return <Input type="date" max={today} />
}
export default DateInput;
Template: ejs
Using Node.js, express.js and template System ejs:
<input id="picOfDayDate" type="date" name="date-today"
value="<%= new Date().toISOString().split("T")[0] %>"
min='1995-06-16'
max="<%= new Date().toISOString().split("T")[0] %>"
class="datepicker"
>
I also had same issue .I build it trough this way.I used struts 2 framework.
<script type="text/javascript">
$(document).ready(function () {
var year = (new Date).getFullYear();
$( "#effectiveDateId" ).datepicker({dateFormat: "mm/dd/yy", maxDate:
0});
});
</script>
<s:textfield name="effectiveDate" cssClass="input-large"
key="label.warrantRateMappingToPropertyTypeForm.effectiveDate"
id="effectiveDateId" required="true"/>
This worked for me.
I am having an issues sending a range for my post data.
I want "price" to post as: ...price=value1:value2
I am using text input fields.
However, I am not sure how to get "value2" in the post as shown above.
This is what I have now:
<input id="price1" type="number" name="price" value="200000" />
<input id="price2" type="number" name="max" value="12000000" />
Currently this will post as price=200000&max=12000000
What is the best way to do this?
Thanks.
Here is an example of using javascript to update the value of a 3rd field. Which should probably be hidden to not change the current UI you have.
http://codepen.io/justindunham/pen/BADpf
var updatePrice = function() {
var range = document.getElementById('priceRange');
var low = document.getElementById('price1');
var high = document.getElementById('price2');
range.value = low.value + ":" + high.value;
};
You cant, if you have 2 inputs, the post action will post 2 separated values.
You could add only 1 input and with javascript append the value of a second input to the first one, so you will post 1 field with a text value like "value1:value2" , like if you had
<input id="price1" type="number" name="price" value="200000:12000000" />
i created a form element like that:
<form id="TextForm1" name="TextForm1">
<input type="text" id="Text1" name="Text1" value="" placeholder="" />
</form>
But it isn´t working in my .html site. I can´t type in something.. But if i embed it with an iframe it works perfectly.. I am using a scrolling script "iscroll" in my content area. But i can´t figure out why it isn´t working with it.
Does anyone have an idea? Thanks
You are using jQuery so you can use click event like:
Check Out The Working Demo
$(yourElement).click(function()
{
// your code
});
I changed two functions of your code to this and removed the onclick event from the inputs:
JavaScript:
$('#buttonCm').click(function(){
var cmEingabe = document.getElementById("cm");
var cm = cmEingabe.value;
var cmNeu = cm - 3;
$('#Liste').append('<br/>' + '<br/>' + '-' + ' '+ 'Bauteil passend zu ' + cmNeu +'cm' + ' ' +'Breite');
$('#Form1').fadeOut(700);
$('#Form2').delay(700).fadeIn(700);
});
$('#buttonCm2').click(function(){
var cmEingabe2 = document.getElementById("cm2");
var cm2 = cmEingabe2.value;
$('#Liste').append('<br/>' + '<br/>' + '-' + ' '+ 'Bauteil passend zu ' + cm2 +'cm' + ' ' +'Höhe');
$('#Form3').fadeOut(700);
$('#Liste').delay(700).fadeIn(700);
});
HTML:
<input type="button" id="buttonCm" name="buttonCm" value="auswählen" />
<input type="button" id="buttonCm2" name="buttonCm2" value="auswählen" />
I hope this might help you. But I could not find the script in your code to check how you had bind the iScroll plugin. Because iScroll it self prevent some events. But most probably if any form fields not responding after you bind iScroll means this is the solution which I used to overcome.
input fields not responding after added 'iscroll'-PhoneGap
I want to generate current date in a html form and store that in the variable currentDate. when i write it works fine if the user enters in the text area. But I want to store the current date(the user need not put it) and store it in the variable currentDate.
use hidden variable in jsp If it is JSP
JSP HTML:
<input type="hidden" name="currentDate" id="currentDate" value="<%=new Date()%>">
<div id="div1"></di>
JAVASCRIPT :
function onLoad()
{
document.getElementById('div1').innerHTML ='<%=new Date()%>';
}
use hidden variable in html If it is HTML , call this onLoad Form
HTML:
<input type="hidden" name="currentDate" value="">
<div id="div1"></di>
JAVASCRIPT :
function onLoad()
{
var month = dateObj.getUTCMonth();
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
newdate = year + "/" + month + "/" + day;
document.getElementById('currentDate').value=newdate;
document.getElementById('div1').innerHTML =newdate;
}