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

I'm making about Military Service Calculator Website.

when i click the id : "datepicker" button, the datepicker isn't showing.

So I checked the log, there is nothing in log.

I want to show a datepicker only on id : "datepicker" button click and insert in class : "showDate" span tag(ex. 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>

CodePudding user response：

Try this code. you need to use onSelect event.

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

CodePudding user response：

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

Try this !