zer0uk Posted April 18, 2020 Share Posted April 18, 2020 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> Quote Link to comment Share on other sites More sharing options...
kicken Posted April 18, 2020 Share Posted April 18, 2020 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'); }); Quote Link to comment Share on other sites More sharing options...
zer0uk Posted April 18, 2020 Author Share Posted April 18, 2020 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.