【问题标题】:Calculating date for datepicker with PHP and AJAX使用 PHP 和 AJAX 计算日期选择器的日期
【发布时间】:2012-11-26 02:29:37
【问题描述】:

我有三个输入:

<input type='number'>
<input class='datepicker'>
<input class='datepicker' readonly='readonly'>

日期选择器很简单,如下:

<script>
  $(function() 
    {
     $('.datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
    }); 
</script>

第一个用于设置周数,例如2。第二个用于设置开始日期。如何在第三个输入(只读)中输出已设置日期的结果日期加上周数?

就像我设置 2 周然后使用第一个日期选择器设置 2012-12-07,然后它将输出到第三个(只读)输入 2012-12-21 ?

感谢您的建议!

【问题讨论】:

    标签: php mysql ajax date datepicker


    【解决方案1】:

    您需要使用日期选择器的属性onSelect() 来检索所选日期并更新只读字段:http://api.jqueryui.com/datepicker/#option-onSelect

    然后您需要使用Date 对象及其方法来解析所选日期,为其添加特定天数并返回与新日期对应的新文本。

    <input id="nbweeks" type='number' />
    <input class='datepicker' />
    <input id="input-ro" class='datepicker' readonly='readonly' />
    
    function addDaysDate(dateText, days) {
        var curDate = new Date(Date.parse(dateText));
        var nextDate = new Date();
        nextDate .setDate(curDate.getDate() + days);
    
        var curDay = nextDate .getDate();
        var curMonth = nextDate .getMonth() + 1; //Months are zero based
        var curYear = nextDate .getFullYear();
        return curMonth + "-" + curDay + "-" + curYear;​
    }
    
    $(function(){
        $('.datepicker').datepicker({
            dateFormat: 'yyyy-mm-dd',
            onSelect(dateText, inst) {
                var days = $("#nbweeks").val() * 7;
                var newDate = addDaysDate(dateText, days)
                $("#input-ro").val(newDate)​;​
            }
        });
    });
    

    代码的实时示例(没有日期选择器):http://jsfiddle.net/PcTHQ/

    编辑:要小心,要让 Date.parse() 工作,我认为您需要将年份设置为四位数,或者将日期的顺序更改为 mm/dd/yy 可能

    【讨论】:

    • 知道为什么我有 NaN-NaN-NaN 吗? :) 尝试将 mm/dd/yy 与 yy/mm/dd 等混合,但没有结果 :)
    • 嗯,Date.parse() 不支持带有“-”的格式,试试 mm/dd/yyyy 或 yyyy-mm-dd
    • 它有效 :) 我的错,我有 val * 7 而不是 val() * 7; ;) 谢谢。
    • 可惜它返回的日期没有 0,比如 2013-1-6
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-04-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多