Question

113

Displaying Datepicker when i click the button

rated 0 times [ 116] [ 3] / answers: 1 / hits: 16985 / 8 Years ago, tue, april 5, 2016, 12:00:00

I would like to display the datepicker when i click on the button. I have tried but i couldn't make it work. I am using Materialize Css. I have tried to use input type text but i don't want it.

<div class=container>

     <div class=row center>

       <i>Date</i>

       <button class=btn waves-effect waves-light datepicker type=submit name=action>PICK DATE</button>

     </div>

   </div>

jQuery:

$('.datepicker').pickadate({

    selectMonths: true, 

    selectYears: 15 

  });

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

catrinas

Add To Favorites

Follow

Total Points: 587

Total Questions: 100

Total Answers: 105

Location: Rwanda

Member since Thu, Feb 10, 2022

2 Years ago

answered 8 Years ago gordonrockym · Accepted Answer

In order to show the datepicker from a button, you need to invoke the show option.

<!doctype html>

<html lang=en>

<head>

  <meta charset=utf-8>

  <title>jDatapicker JQuery</title>

  <script src=//code.jquery.com/jquery-1.10.2.js></script>

    <link rel=stylesheet href=//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css>

  <script src=//code.jquery.com/ui/1.11.4/jquery-ui.js></script>

  <script>

  $(function() {

    $( #datepicker ).datepicker();

  });

    function show_dp(){

      $( #datepicker ).datepicker('show'); //Show on click of button

     }

  </script>

</head>

<body>

 

<p>Date: <input type=text id=datepicker></p>

  <button onclick=show_dp();>Show Datepicker</button> 

 

 

</body>

</html>

Another option to make it so you don't need an input field:

<!doctype html>

<html lang=en>



<head>

  <meta charset=utf-8>

  <title>jDatapicker JQuery</title>

  <script src=//code.jquery.com/jquery-1.10.2.js></script>

  <link rel=stylesheet href=//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css>

  <script src=//code.jquery.com/ui/1.11.4/jquery-ui.js></script>

  <script>



    function toggle_dp() {

      dp = $(#datepicker);

      if (dp.attr('datepicker')) {

        dp.datepicker('destroy');

        dp.removeAttr('datepicker');

      } else {

        dp.datepicker();

        dp.attr('datepicker', 1);

      }





    }

  </script>

</head>



<body>



  <div id=datepicker></div>

  <button id=button onclick=toggle_dp();>Toggle Datepicker</button>





</body>



</html>