jquery 日期选择器在表单内不起作用

Question

你好，我有一个 PHP 和 HTML，它们都有一个日期选择器和一个全名输入字段，它们是相同的代码，但表单内的日期选择器不起作用，甚至出现了，就是这个代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="jquery-ui.css" rel="stylesheet">
    <title>sample</title>
</head>
<body>
    <form action="" method="post">
        <div class="container-fluid main_form">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Patient's Full Name</label>
                        <br>
                        <input class="form-control" type="text" name="mname" id="input_style">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Patient's Date of Birth</label>
                        <br>
                        <div class="container-fluid formation">
                            <input class="form-control" type="text" name="date" id="datepicker" readonly>
                            <button id="calendar_show_btn"><img src="icons/calendar.png" id="icon"></button>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </form>
   <script src="jquery/jquery.js"></script>
   <script src="jquery-ui.js"></script>

this is the script of the inline jquery code

   <script type="text/javascript">
       $('#calendar_show_btn').click(function() {
           $('#datepicker').datepicker('show');
       });

       $( "#datepicker" ).datepicker({
            inline: false,
            stepMonths: 0,
            changeMonth: true, 
            changeYear: true,
            maxDate: "-18y",
            yearRange: '1900:2013',
            hideIfNoPrevNext: true,
            navigationAsDateFormat: true,
            duration: "slow",
            showAnim: "slide", 
            showOptions: {direction: "left"},
        });
   </script>

我是新手，不懂的地方还请见谅

Answer 1

该按钮正在提交表单，因为它是表单中的默认按钮。为了防止这种情况，请向其添加属性 type="button"。

$('#calendar_show_btn').click(function() {
  $('#datepicker').datepicker('show');
});

$("#datepicker").datepicker({
  inline: false,
  stepMonths: 0,
  changeMonth: true,
  changeYear: true,
  maxDate: "-18y",
  yearRange: '1900:2013',
  hideIfNoPrevNext: true,
  navigationAsDateFormat: true,
  duration: "slow",
  showAnim: "slide",
  showOptions: {
    direction: "left"
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<form action="" method="post">
  <div class="container-fluid main_form">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label>Patient's Full Name</label>
          <br>
          <input class="form-control" type="text" name="mname" id="input_style">
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label>Patient's Date of Birth</label>
          <br>
          <div class="container-fluid formation">
            <input class="form-control" type="text" name="date" id="datepicker" readonly>
            <button type="button" id="calendar_show_btn"><img src="icons/calendar.png" id="icon"></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

jquery 日期选择器在表单内不起作用

jquery date picker doesn't work inside the form

php

bootstrap-4

jquery-ui-datepicker