Как открыть загрузчик DatePicker, нажав кнопку? - PullRequest
Новая
       14

Как открыть загрузчик DatePicker, нажав кнопку?

0 голосов
/ 11 июня 2019

У меня есть средство выбора даты начальной загрузки, которое можно открыть, нажав на вход.Я хотел бы изменить его и открыть, нажав на кнопку. Как это можно выполнить?

Вот мой код, который открывает указатель даты на входе: 

<!DOCTYPE html>
<html>
<head>
<title>Test Zone</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>

<body>
    <div class="bootstrap-iso">
     <div class="container-fluid">
      <div class="row">
       <div class="col-md-6 col-sm-6 col-xs-12">

        <!-- Form code begins -->
        <form method="post">
          <div class="form-group"> <!-- Date input -->
            <label class="control-label" for="date">Date</label>
            <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
          </div>
          <div class="form-group"> <!-- Submit button -->
            <button class="btn btn-primary " id="submit" type="submit">Submit</button>
          </div>
         </form>
         <!-- Form code ends --> 

        </div>
      </div>    
     </div>
    </div>

<script>

    $(document).ready(function(){
          var date_input=$('input[name="date"]'); //our date input has the name "date"
          var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
          var options={
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
          };
          date_input.datepicker(options);
    })
</script>


</body>
</html>

Теперь,как я могу принудительно открыть указатель даты при вводе, но нажав кнопку submit, а не нажав input?

Заранее спасибо

Ответы [ 3 ]

0 голосов
/ 12 июня 2019

Попробуйте это .. Использование e.preventDefault(); $("#date").datepicker().focus(); Добавьте это 

$("#submit").click(function(e){
   e.preventDefault();
   $("#date").datepicker().focus();
 })


<!DOCTYPE html>
<html>
<head>
<title>Test Zone</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
</head>
<body>
    <div class="bootstrap-iso">
     <div class="container-fluid">
      <div class="row">
       <div class="col-md-6 col-sm-6 col-xs-12">

        <!-- Form code begins -->
        <form method="post" id="form">
          <div class="form-group"> <!-- Date input -->
            <label class="control-label" for="date">Date</label>
            <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
          </div>
          <div class="form-group"> <!-- Submit button -->
            <button class="btn btn-primary " id="submit" type="submit">Submit</button>
          </div>
         </form>
         <!-- Form code ends --> 

        </div>
      </div>    
     </div>
    </div>

<script>

    $(document).ready(function(){
          var date_input=$('input[name="date"]'); //our date input has the name "date"
          var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
          var options={
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
          };
          date_input.datepicker(options);
    })
    $("#submit").click(function(e){
     e.preventDefault();
     $("#date").datepicker().focus();
 	})

</script>

</body>
</html>
0 голосов
/ 26 июля 2019

Я не использую средство выбора даты начальной загрузки, но работает с собственными средствами выбора даты в Chrome и Firefox

Я использую следующие приемы:

Надеюсь, они помогут вам адаптировать это к начальной загрузке 

div {
  position: relative;
}
input {
  position: absolute;
  opacity: 0;
}
input::-webkit-calendar-picker-indicator {
  width: 100%;
  height: 100%;
  opacity: 0;
}
input:hover + button {
  background-color: silver;
}
<div>
  <input type="date">
  <button id="calendar_text">Search Date ?</button>
</div>
0 голосов
/ 11 июня 2019

Добавьте следующий код в тег скрипта 

 $("#submit").click(function(){
    var date_input=$('input[name="date"]'); //our date input has the name "date"
    date_input.focus();
 })
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...