How to print Javascript variable value in HTML tag?

Asked

Viewed 1,523 times

2

I’d like to limit the selection of input date this way, but it’s not working.

<script type="text/javascript">
  var data = new Date();
  var dia     = data.getDate();          
  var mes     = data.getMonth();         
  var ano4    = data.getFullYear();
  var str_data = ano4 + '-' + (mes+1) + '-' + dia;
  <?php $data=str_data;?>
</script>
<input type="date" name="data" max="<?=$data?>"/>
javascript html html5 input date

  • I don’t understand, explain to us what you want to display and limit exactly?

  • You want to take the Javascript variable str_data and play within PHP? This is not possible.

  • That’s right Lucas Costa

3 answers

4

You can do it like this:

var data = new Date();
var dia     = data.getDate();          
var mes     = data.getMonth();         
var ano4    = data.getFullYear();
var str_data = ano4 + '-' + (mes+1) + '-' + dia;
inp = document.getElementsByName('data')[0];
inp.setAttribute("max", str_data);
<input type="date" name="data"/>

Or, instead of inp.setAttribute("max", str_data);:

...
inp.max = str_data;

  • this way you lock the choice in the calendar but it is still possible to edit by input

  • The strange thing is that the stackoverflow executable here works, but not in my code

  • just put the script under the input kkkkkkk worked out here thanks!

  • hehe. You’re welcome @Emanueldeoliveiraperes

  • @Caiqueromero if client side is possible everything, until you can change the input type and write whatever you want... Final and crucial/final checks have to be done after the server side

  • In fact, server-side validation is indispensable, but in my opinion, if you want to partially limit it on the client side, then it’s easier to limit it.

  • @Caiqueromero For me customer side checks are more to be 'user friendly' than anything else. It is often unnecessary/annoying to request each trial/submition to the server, and the expected input can be indicated

  • Yes, it’s still a "flourish".

  • 1

    @Caiqueromero But it already prevents (or shows what it cannot be/do) before trying, it is less annoying in case of failure for the end user

Show 4 more comments

2


I believe it is easier to work by filling the date direct PHP:

<input type="date" name="data" max="<?=date('Y-m-d H:i:s')?>" />

But if you want to limit by JavaScript remember that the HTML5 allows users to change the value in Input with the keyboard and by the arrows, then you have to remove these entries to ensure that the maximum date of your Input be respected (of course this does not dispense with the need to validate on the server also).

var dateInput = document.getElementById("data");
var d         = new Date();
var dia       = d.getDate();          
var mes       = d.getMonth();         
var ano       = d.getFullYear();
var data      = ano + '-' + (mes+1) + '-' + dia;
dateInput.setAttribute("max", data);
.no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
<input type="date" name="data" id="data" class="no-spin" onkeydown="return false"/>

0

You cannot take a Javascript generated variable and assign its value within a PHP script this way.

Instead, assign to tag input the value of Javascript using setAttribute():

var data = new Date();
var dia     = data.getDate();          
var mes     = data.getMonth();         
var ano4    = data.getFullYear();
var str_data = ano4 + '-' + (mes+1) + '-' + dia;
el = document.getElementsByName("data")[0];
el.setAttribute("max", str_data); // ou, de forma mais curta: el.max = str_data;

  • Worse guy who is not working javascript, because when I put the date manually in max works perfectly!

  • Actually you can, it’s just not advisable.

  • @Rafaelaugusto Ok, but not in the way he put the question. I even added this detail to the answer. Thanks!

  • instead of "Document.getElementByName()" assign an "id" to the input... for example id="data", ai vc calls it "Document.getElementById('data');"

  • @Rafaelaugusto index [0] takes the first element by name. If you have more than one, no problem.

Browser other questions tagged javascript html html5 input date

You are not signed in. Login or sign up in order to post.