Javascript - Calculate date 1 year/3 months/1 month ago from current date (dd-mm-yyyy)

Question

I have a dropdown box that contains 3 options..monthly, quarterly and yearly. I am trying to populate 2 fields when either of the options are selected. The start date will be the current date, and I want to work out the end date depending on the option selected. So far I have this.

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);
    });
});

The console.log gives me the following:

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

Both the 'start_date' and end_date' fields use datepicker and currently have a format of dd-mm-yyyy. How would I calculate the correct date range (month, quarterly or yearly) from the current date to the correct format and set the value of the both fields (with the 'dd-mm-yyyy' format).

I have come across Moment.js and datejs which I may look into using if the problem is too complicated. Cheers for any help in advance.

Answer 1

jsFiddle Example

This takes advantage of the function: setFullYear() on the date object.

Note : I agree that changing the value to the number of months you want to change it to is the best solution because it would allow for more dynamic code. Also my code doesn't handle None selection because I don't know what you want it to do.

---

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());
});

---

If you are willing to change the HTML jsFiddle Example

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());
});

Answer 2

Have you tried getFullYear() ?

var d = new Date(2013, 5, 1);
d.setFullYear(d.getFullYear() - 1);

Answer 3

I'd recommend a slight change in HTML, using number of months instead of strings:

<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" />

Now your code is relatively simple. Example fiddle . Needs a relatively modern browser that supports <input type="date"> (on older browser will work if date is entered as 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));
});

Answer 4

对于日期格式，请使用jquery.datepicker对象中的内置“format”方法：$（“＃start_date”）。datepicker.formatDate（“dd-mm-yyyy”，new Date（））