Showing the Datepicker upon clicking the button

Question

Showing the Datepicker upon clicking the button

I am trying to implement a datepicker that shows up when a button is clicked. Unfortunately, my attempts have been unsuccessful so far. I am working with Materialize Css and have experimented with using an input type of text, but it's not quite what I'm looking for.

<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>

Here is the jQuery code I've attempted:

$('.datepicker').pickadate({
    selectMonths: true, 
    selectYears: 15 
  });

javascript html css datepicker materialize

Answer 1

Answer №1

If you want to display the datepicker when a button is clicked, you must use 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'); //Display on button click
     }
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
  <button onclick="show_dp();">Show Datepicker</button> 
 
 
</body>
</html>

Another way to do this without an input field:

<!doctype html>
<html lang="en>

<head>
  <meta charset="utf-8>
  <title>jDatapicker JQuery>
  <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>

Answer 2

If you want to display the datepicker when a button is clicked, you must use 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'); //Display on button click
     }
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
  <button onclick="show_dp();">Show Datepicker</button> 
 
 
</body>
</html>

Another way to do this without an input field:

<!doctype html>
<html lang="en>

<head>
  <meta charset="utf-8>
  <title>jDatapicker JQuery>
  <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>

Answer 3

Answer №2

In my opinion, a more effective approach would be to display the picker only when the button is clicked, rather than when the input field is clicked. This way, users have the flexibility to manually modify the input as needed.

One strategy I use involves utilizing a hidden input to link to the picker:

<div class="input-field datepicker-prefix">
    <i class="material-icons prefix">perm_contact_calendar</i>
    <input type="hidden" class="datepicker" />
    <input />
</div>

Then, I set up a click event to reveal the picker:

$('.datepicker-prefix .prefix').click(function () {
    $(this).parent().find('.datepicker').datepicker('open');
});

You can explore my complete solution for both date and time pickers here

Answer 4

In my opinion, a more effective approach would be to display the picker only when the button is clicked, rather than when the input field is clicked. This way, users have the flexibility to manually modify the input as needed.

One strategy I use involves utilizing a hidden input to link to the picker:

<div class="input-field datepicker-prefix">
    <i class="material-icons prefix">perm_contact_calendar</i>
    <input type="hidden" class="datepicker" />
    <input />
</div>

Then, I set up a click event to reveal the picker:

$('.datepicker-prefix .prefix').click(function () {
    $(this).parent().find('.datepicker').datepicker('open');
});

You can explore my complete solution for both date and time pickers here

Answer 5

Answer №3

Feel free to utilize this code that I have crafted:

<!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();
  });
  </script>
</head>
<body>

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


</body>
</html>

Answer 6

Feel free to utilize this code that I have crafted:

<!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();
  });
  </script>
</head>
<body>

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


</body>
</html>

Showing the Datepicker upon clicking the button

Answer №1

Answer №2

Answer №3

Similar questions

Error: The Tabs component is expecting a different `value`. The Tab with the current `value` ("0") is not present in the document structure

CKEditor directive in AngularJS does not properly enforce the maxlength attribute in textarea

After being added to the flow in Node-RED, my customized node is no longer functional

Show Zeroes in Front of Input Numbers

Executing javascript href using Python in Selenium

Customizing hyperlink styles with JavaScript on click

IE10 is not effectively handling multiple media queries

Adding content to the parent element immediately after it is generated using jQuery

Is it possible to use vanilla JavaScript scroll event with AngularJS framework?

Tips for accessing the value from an input field in an AngularJS application

Can you tell me which BBC channel is airing this animation?

What steps should I take to make my Vue JS delete function operational?

What is the best way to use regular expressions to match text with varied endings?

Update destination upon click

Unable to make a POST request using axios

Having trouble with redundant code while updating state in ReactJS - React JS

Using CSS to ensure that the cards have consistent heights when using both React and Bootstrap

The validation of forms using ajax and jsp is not functioning

Transferring the input value to a different input field with Keyup in Angular 9

Tips for creating a button hover effect with dynamic color and opacity