Отображение Datepicker, когда я нажимаю кнопку

Я хотел бы отображать средство выбора даты, когда я нажимаю кнопку. Я пытался, но я не мог заставить его работать. Я использую Материализовать Css. Я пытался использовать текст типа ввода, но мне это не нужно.

<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 
  });

javascript html datepicker css materialize
person ryhan112    schedule 05.04.2016    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Чтобы отобразить средство выбора даты с помощью кнопки, вам нужно вызвать параметр показа.

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

Другой вариант сделать так, чтобы вам не нужно было поле ввода:

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

person Greg Borbonus    schedule 05.04.2016

arrow_upward
0
arrow_downward

Я думаю, что лучший способ - показывать средство выбора только при нажатии кнопки, а не при нажатии ввода. Это также позволяет пользователю редактировать ввод вручную.

Мой трюк состоит в том, чтобы использовать скрытый ввод для подключения сборщика к:

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

А затем настройте щелчок, чтобы показать сборщик:

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

См. мое полное решение для средств выбора даты и времени https://codepen.io/dnote/pen/jXQNpg?editors=1010#0

person Dave de Jong    schedule 11.01.2019

arrow_upward
-1
arrow_downward

Вы можете использовать этот код, созданный мной

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

person Community    schedule 05.04.2016
comment
Это вообще не отвечает на вопрос. ОП хочет открыть сборщик с помощью кнопки! - person Dave de Jong; 11.01.2019