嗨，我有一个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>
这是内联jquery代码的脚本
<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>
我只是一个新手，如果我不明白，请原谅我。
按钮正在提交表单，因为它是表单中的默认按钮。为了防止这种情况发生，请将属性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>