如何在按钮单击并插入跨度标记时显示 jquery datepicker答案

【问题标题】：How to show a jquery datepicker on button click and insert in span tag如何在按钮单击并插入跨度标记时显示 jquery datepicker
【发布时间】：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>

【问题讨论】：

标签： jquery jquery-ui

【解决方案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-trigger{background-color:red;}

【解决方案2】：

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

试试这个！

【讨论】：