如何在单击按钮时显示 jquery 日期选择器并插入 span 标记

Question

我正在制作有关兵役计算器的网站。

当我点击 id : "datepicker" 按钮时，日期选择器没有显示。

所以我查看了日志，日志中没有任何内容。

我只想在 id 上显示日期选择器：单击“datepicker”按钮并插入 class：“showDate”span 标签（例如 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>

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

Answer 2

 var d = new Date();
        $('#datepicker').daterangepicker({
            singleDatePicker: true,
            defaultDate: d,
            showDropdowns: true,
            format: "YYYY/MM/DD"
        });

试试这个！

如何在单击按钮时显示 jquery 日期选择器并插入 span 标记

How to show a jquery datepicker on button click and insert in span tag

jquery

jquery-ui