Make icon activate date picker

[zer0uk]

Hi is it possible to make the Icon for my input activate the date picker (I'm using Materialize for my class)

A lot of users seem to instinctively try to click the icon rather than the input field on mobile devices 

<div class="input-field col s12 m8 l7 xl7">

<i class="material-icons prefix">calendar_today</i>

<input type="text" name="r_date" class="datepicker">

<label for="r_date"></label>

</div>

<script>
        $(document).ready(function(){
            $('.sidenav').sidenav(); 
            $('select').formSelect();
            $('.datepicker').datepicker({
               format:'yyyy-mm-dd' 
        });
            $(".dropdown-trigger").dropdown();

 });
</script>

 

[kicken]

The documentation shows that there is an open method for the date picker, so just add a click handler for your icon that will call that open method.

<i class="material-icons prefix datepicker-trigger">calendar_today</i>
<input type="text" name="r_date" class="datepicker">

$('.datepicker').datepicker({format: 'yyyy-mm-dd'});
$('.datepicker-trigger').click(function(){
  $(this).next('.datepicker').datepicker('open');
});

 

 

[zer0uk]

thanks kitchen , I made the changes you suggested but still the icon doesn't activate the picker 

 

<div class="container">

<div class="row">

<div class="card grey lighten-3 z-depth-5">

<div class="card-content">

<form action="add_record.php" method="POST">

<h3 class="center-align teal-text text-accent-4">Log a race</h3>

<br>

<div class="input-field col s12 m8 l7 xl7">

<i class="material-icons prefix datepicker-trigger">calendar_today</i>

<input type="text" name="r_date" class="datepicker">

<label for="r_date"></label>

</div>

 

 

<script>

$(document).ready(function(){

$('.sidenav').sidenav();

$('select').formSelect();

$('.datepicker').datepicker({format: 'yyyy-mm-dd'});

$('.datepicker-trigger').click(function(){

$(this).next('.datepicker').datepicker('open');

});

$(".dropdown-trigger").dropdown();

 

});

</script>