javascript - 无按钮自动日期计算器

Question

这是我的 HTML 代码: HTML Code

<div class="input-field col  s12">
    <label for="PMDate">PM Date</label></br>
    <input type="Date" name="PMDate" id="date" value="<?php echo date('Y-m-d'); ?>" required>
</div>
<div class="input-field col s12">
    <label for="Period">PM Period</label></br>
    <select name="Period" id="period">
        <option value="Annually">Annually</option>
        <option value="Monthly">Monthly</option>
        <option value="Quarterly">Quarterly</option>
        <option value="HalfYear">Half-Year</option>
    </select>
</div>
<div class="input-field col s12">
    <label for="NPMDate">Next PM Date</label></br>
    <input type="date" name="NPMDate" id="npmdate" readonly>
</div>

这是我的脚本: JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        onSelect:function (selectedPeriod) {
            if (this.id == 'period') {
                var period = document.getElementById("period").selectedIndex;
                var startDate = $('#date').datepicker("getDate");
                if (period == "Annually") {
                    var result = new Date(startDate.getFullYear() + 1, startDate.getMonth(), startDate.getDate());
                    document.getElementById("npmdate").innerHTML = result;
                }
            }
        }
    });
</script>

这是用户界面片段: UI

我希望下一个下午日期能够根据下午日期和下午时段自动生成计算出的日期。用户选择日期和时间段的位置。在按“保存”按钮将所有输入记录插入数据库之前，计算会自动显示结果。目前还无法显示计算结果。我需要帮助。

Answer 1

试试这个:-这只是每年计算

<input type="date" id="PMDate" name="date" value="<?php echo date('Y-m-d') ?>">
<select id="period" name="period">
    <option value="Annually">Annually</option>
    <option value="Monthly" selected>Monthly</option>
    <option value="Quarterly">Quarterly</option>
    <option value="Half-Year">Half-Year</option>
</select>
<input type="date" id="NPMDate" name="npmdate" readonly>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#period').change(function(){
                var period=this.value;
                var start_date=new Date($('#PMDate').val());
                console.log(start_date);

                if(period=='Annually'){
                    var result_date=new Date(start_date.getFullYear()+1+'-'+ start_date.getMonth()+'-'+start_date.getDate());
                    result_date=moment(result_date).format('Y-MM-DD');
                    $('#NPMDate').val(result_date);
                }
        })
    });
</script>>