时间戳

首页 > 解决方案 > 通过输入值动态更改日期选择器中的日期

jquery - 通过输入值动态更改日期选择器中的日期

问题描述

我有出生日期计算器，可以很好地计算用户在各自字段中的年、月和日（23 年、11 个月、5 天）的年龄，但是我想要的是每当用户在年、月或日字段中输入值时，日期选择器日期应动态更改。

我试图从日期对象中减去日期，但它不起作用。

$(document).ready(function(){
    $('#day').keydown(function (event) {
        if (event.which === 13) {
            var dayval = $("#day").val();
            var monthval = $("#month").val();
            var yearval = $("#year").val();
            var sync = $('#dtpicker').datepicker({
                dateFormat: 'dd-mm-yy'
            });
            var today = new Date();
            var substractday = today - dayval
            var substractmonth = today - monthval
            var substractyear = today - yearval
            $("#dtpicker").val(substractday);
            $("#dtpicker").val(substractmonth);
            $("#dtpicker").val(substractyear);
        }
    });
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
    <div>
        <input type="text" name="dob" id="dtpicker">
    </div>
    <div>
        <input type="text" name="year" id="year" placeholder="Enter Your Age in Year">
    </div>
    <div>
        <input type="text" name="month" id="month" placeholder="Enter Your Age in Month">
    </div>
    <div>
        <input type="text" name="day" id="day" placeholder="Enter Your Age in Day">
    </div>
</div>

Datepicker 日期应该根据用户的输入自动计算它的日期，例如。如果用户在年份字段中输入“1”，则 datepicker 中的今天日期为 11-08-2019 (dd-mm-yy)，它应在 datepicker 中将日期计算为 11-8-2018。

标签： jquerydatepickerjquery-ui-datepicker

解决方案

您需要将年份添加到今天的日期来计算年份差异的日期，并使用https://api.jqueryui.com/datepicker/#method-setDate设置日期选择器的值：

var today = new Date();
let birthday = new Date(today.getFullYear() - yearval,
                        today.getMonth() - monthval, 
                        today.getDate() - dayval);
$("#dtpicker").datepicker("setDate", birthday);

推荐阅读