如何在按钮单击并插入跨度标记时显示 jquery datepicker
Posted
技术标签:
【中文标题】如何在按钮单击并插入跨度标记时显示 jquery datepicker【英文标题】：How to show a jquery datepicker on button click and insert in span tag 【发布时间】：2021-10-10 02:11:37 【问题描述】：我正在制作兵役计算器网站。
当我点击 id : "datepicker" 按钮时，日期选择器没有显示。
于是我查看了日志，日志中没有任何内容。
我只想在 id 上显示日期选择器：“datepicker”按钮单击并插入到类中：“showDate”跨度标记（例如 2012-12-01）。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<title>군전역 계산기</title>
</head>
<body>
<div class="header">
<span class="headerTitle">군전역 계산기</span>
</div>
<div class="selectArmy">
<div class="btnGroup1">
<button class="armyBtn">육군</button>
<button class="armyBtn">공군</button>
<button class="armyBtn">해군</button>
<button class="armyBtn">해병대</button>
</div>
<div class="btnGroup2">
<button class="armyBtn">의경(해경)</button>
<button class="armyBtn">소방원</button>
<button class="armyBtn">사회복무요원</button>
</div>
</div>
<div class="selectDate">
<button class="selectDateBtn" id="datepicker">입대일</button>
<span class="showDate"></span>
</div>
<div class="showDateTable">
<table>
<tr>
<td class="resultDate">전역일</td>
<td class="result">asd</td>
</tr>
<tr>
<td class="resultDate">총 복무일</td>
<td class="result">asd</td>
</tr>
<tr>
<td class="resultDate">남은 복무일</td>
<td class="result">asd</td>
</tr>
<tr>
<td class="resultDate">진도율</td>
<td class="result">
<progress value="50" max="100"></progress>
</td>
</tr>
</table>
</div>
<script>
$(document).ready(function()
$("#datepicker").datepicker(
showOn: "button",
buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date"
);
)
</script>
</body>
<script type="text/javascript" src="./calculator.js"></script>
</html>
【问题讨论】：
【参考方案1】：试试这个代码。您需要使用onSelect 事件。
working fiddle
<input type="hidden" class="selectDateBtn" id="datepicker">
$("#datepicker").datepicker(
showOn: "button",
buttonText: "입대일",
onSelect: function (dateText, inst)
var date = $(this).val();
$(".showDate").empty().text(date);
);
【讨论】：
感谢您回答我的问题。我试过了，但它不起作用...... cdn部分有什么问题吗？ 当我点击按钮时，日期选择器没有显示。但在控制台中，没有错误。 将此按钮更改为输入类型 hidden<input type="hidden" class="selectDateBtn" id="datepicker">입대일 。工作吗？
删除这两行。 buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif", buttonImageOnly: true,
.ui-datepicker-triggerbackground-color:red;【参考方案2】：
var d = new Date();
$('#datepicker').daterangepicker(
singleDatePicker: true,
defaultDate: d,
showDropdowns: true,
format: "YYYY/MM/DD"
);
试试这个！
【讨论】：
以上是关于如何在按钮单击并插入跨度标记时显示 jquery datepicker的主要内容，如果未能解决你的问题，请参考以下文章
如何仅搜索 HTML 列表中的特定跨度标记而不搜索所有列表项？ (jQuery)
如何显示带有突出显示日期的 jquery 日历并禁止单击（只读）