0

Hi i'm a rookie in html and been struggling in this inputs,

<label>Check-In Date :  </label>
<input id ="date1" type="date" name="from" min=<?php echo date('Y-m-d', strtotime("+3 days"));;?>>    
<label>Check-Out Date : </label>
<input id = "date2" type="date" name="to">

i just want to know how to set the second input minimum date from the first input selected value? i've already searched and i just can't get the right answer...

Nana Partykar
  • 10,556
  • 10
  • 48
  • 77
jay r bayog
  • 53
  • 2
  • 8
  • ill try it sir.. – jay r bayog Aug 18 '17 at 13:58
  • To achieve this i would recommend using jQuery. You would add an event listener on the `date2` field being clicked which would get the value from the `date1`. – Lewis Browne Aug 18 '17 at 13:59
  • @jayrbayog use jquery – Masivuye Cokile Aug 18 '17 at 13:59
  • PHP is server-side script. So it will only run on the server. You should use client-side script like JavaScript, jQuery, etc. This can be run when the user does *something* without having to request anything else from your server. – ctwheels Aug 18 '17 at 14:00
  • how would i implement that sir? – jay r bayog Aug 18 '17 at 14:02
  • [Where should I put – ctwheels Aug 18 '17 at 14:04
  • @LewisBrowne I wouldn't suggest doing it when it's clicked. A user could tab over to that field to change it instead of selecting it with the cursor. A better method would be to use `focus` instead of click. Or even better would be to change the value when date1 is `change`-d – ctwheels Aug 18 '17 at 14:10
  • @ctwheels this code is not working: $('input[name="from"]').change(function(){$('input[name="to"‌​]').val($(this).val(‌​));}) – jay r bayog Aug 18 '17 at 14:10
  • @ctwheels Yeah that makes sense. :) – Lewis Browne Aug 18 '17 at 14:11
  • Possible duplicate of [How to use HTML5 to validate a date range?](https://stackoverflow.com/questions/19239319/how-to-use-html5-to-validate-a-date-range) – tima Aug 18 '17 at 14:16
  • i just found a solution base on @LewisBrowne idea; i added onclick="setDate2();" on date2 and function setDate2() { document.getElementById('date2').min = document.getElementById('date1').value; }, it works fine... – jay r bayog Aug 18 '17 at 14:17
  • It won't work if you tab to it. Just use the code I provided in the answer, it'll work for *any* (almost) change events that occur on `input[name='from']`. I had a typo in the original response I gave in the comments. – ctwheels Aug 18 '17 at 14:23

1 Answers1

0

PHP is server-side script that only runs on the server (not on the client). For a more detailed explanation of client-side vs server-side scripting please view this

To accomplish what you want, you would use client-side script like JavaScript you can easily achieve this.

Below is jQuery that will update the second field whenever the first field is changed.

jQuery

$("input[name='from']").change(function() {
  $("input[name='to']").val($(this).val());
})

Make sure to include jQuery so that the above loads: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

ctwheels
  • 21,901
  • 9
  • 42
  • 77