【问题标题】:Change date in datepicker dynamically by input value通过输入值动态更改日期选择器中的日期
【发布时间】:2019-12-18 05:39:41
【问题描述】:

我有出生日期计算器,它可以很好地计算用户在各自字段中的年、月和日(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。

【问题讨论】:

    标签: jquery datepicker jquery-ui-datepicker


    【解决方案1】:

    您需要Add year to todays date 之类的东西来根据年差计算日期,并需要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);
    

    【讨论】:

    • 太棒了!它正在工作,但如果月份为空白,同时保存它会引发错误Integrity constraint violation: 1048 Column 'month' cannot be null 我试过var monthval = $("#month").val() || 0; 仍然同样的错误也来自 datepicker 的 getDate 与上面的 setDate 方法不匹配,获得 1 天的差异。
    • 如果使用 jQuery 在该字段中没有值,您能告诉我如何设置 0(零)值吗?它会解决我的问题。
    • 怎么样?在我的情况下?
    • 我不知道你的情况是什么。。问另一个问题,详细说明你期望发生的事情。
    • 我的情况是,当上面提到的输入字段中没有值时,使用 jQuery 应该添加 0(零)作为默认值,顺便说一下你之前的评论是什么意思? $("#month").val($("#month").val() || 0)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-06-25
    相关资源
    最近更新 更多