2

我有一个下拉框，其中包含 3 个选项……每月、每季度和每年。选择任何一个选项时，我都在尝试填充2个字段。开始日期将是当前日期，我想根据所选选项计算结束日期。到目前为止，我有这个。

HTML：

<select name="date_range" class="date_range">
    <option value="None">Please select a date range</option>
    <option value="Yearly">Yearly</option>
    <option value="Quarterly">Quarterly</option>
    <option value="Monthly">Monthly</option>
</select>

<p>Start Date</p>
    <input type="text" name="start_date" id="start_date" />
<p>End Date</p>
    <input type="text" name="end_date" id="end_date" />

JavaScript：

$(function() {
    $('.date_range').change(function(){
    var date = new Date();
    console.log(date);
    });
});

console.log 给了我以下信息：

Wed May 01 2013 19:42:42 GMT+0100 (GMT Daylight Time)

'start_date' 和 end_date' 字段都使用 datepicker 并且当前具有 dd-mm-yyyy 格式。我将如何计算从当前日期到正确格式的正确日期范围（月、季或年）并设置两个字段的值（使用“dd-mm-yyyy”格式）。

我遇到了 Moment.js 和 datejs，如果问题太复杂，我可能会考虑使用它们。提前为任何帮助欢呼。

4

4 回答 4

6

jsFiddle 示例

这利用了功能：setFullYear()在日期对象上。

注意：我同意将值更改为您想要更改的月数是最好的解决方案，因为它允许更多动态代码。此外，我的代码不处理 None 选择，因为我不知道你想要它做什么。

HTML：

<select name="date_range" class="date_range">
    <option value="None">Please select a date range</option>
    <option value="Yearly">Yearly</option>
    <option value="Quarterly">Quarterly</option>
    <option value="Monthly">Monthly</option>
</select>

<p>Start Date</p>
    <input type="text" name="start_date" id="start_date" />
<p>End Date</p>
    <input type="text" name="end_date" id="end_date" />

JS：

$('.date_range').change(function(){
    var now = new Date();
    var start = new Date();
    switch($('.date_range').find(":selected").text())
    {
        case 'Yearly':
            start.setFullYear(start.getFullYear()-1);
            break;
        case 'Quarterly':
            start.setFullYear(start.getFullYear(), start.getMonth()-3);
            break;
        case 'Monthly':
            start.setFullYear(start.getFullYear(), start.getMonth()-1);
            break;
    }
     $('#start_date').val(start.toLocaleDateString());
     $('#end_date').val(now.toLocaleDateString());
});

如果您愿意更改 HTML jsFiddle 示例

HTML：

<select name="date_range" class="date_range">
    <option value="0">Please select a date range</option>
    <option value="12">Yearly</option>
    <option value="3">Quarterly</option>
    <option value="1">Monthly</option>
</select>

<p>Start Date</p>
    <input type="text" name="start_date" id="start_date" />
<p>End Date</p>
    <input type="text" name="end_date" id="end_date" />

JS：

$('.date_range').change(function(){
    var now = new Date();
    var start = new Date();

    start.setFullYear(start.getFullYear(), start.getMonth()-$('.date_range').find(":selected").val());

     $('#start_date').val(start.toLocaleDateString());
     $('#end_date').val(now.toLocaleDateString());
});
于 2013-05-01T19:12:35.477 回答
2

你试过getFullYear()吗？

var d = new Date(2013, 5, 1);
d.setFullYear(d.getFullYear() - 1);
于 2013-05-01T18:53:55.237 回答
1

对于日期格式，使用 jquery.datepicker 对象中内置的“format”方法： $("#start_date").datepicker.formatDate("dd-mm-yyyy", new Date())

于 2013-05-01T19:23:50.500 回答
1

我建议对 HTML 稍作改动，使用月数而不是字符串：

<select name="date_range" class="date_range">
    <option value="0">Please select a date range</option>
    <option value="12">Yearly</option>
    <option value="3">Quarterly</option>
    <option value="1">Monthly</option>
</select>

<p>Start Date</p>
    <input type="date" name="start_date" id="start_date" />
<p>End Date</p>
    <input type="date" name="end_date" id="end_date" />

现在您的代码相对简单。示例小提琴。需要一个支持的相对现代的浏览器<input type="date">（如果日期输入为 ，则在较旧的浏览器上可以工作yyyy-mm-dd）

$('#start_date').change(function() {
    var end_date_value = new Date($('#start_date').val()); // Start with start_date value
    end_date_value.setMonth(end_date_value.getMonth() + $('select.date_range option:selected').val()); // Add range months
    $('#end_date').val(end_date_value.toISOString().substring(0, 10));
});

$('#end_date').change(function() {
    var start_date_value = new Date($('#end_date').val()); // Start with end_date value
    start_date_value.setMonth(start_date_value.getMonth() - $('select.date_range option:selected').val()); // Substract range months
    $('#start_date').val(start_date_value.toISOString().substring(0, 10));
});
于 2013-05-01T19:11:20.993 回答