0

I am trying to create a script where depending on the value of a drop down box, it automaticly fills a textbox with a quarter, 2 quarters or 2 quarters away from the given date. So for value quarter 1, box1 would be "1-1-2011" and box2 would have "1-4-2011" filled in. At the moment I see nothing happening when it comes to changing dates. I am a beginner and have been trying to make this work for days. Sorry if I've overlooked an obvious problem.

The elements are as follows:

<div>
<label>Periode</label>
<select name="pchoice" id="pchoice"  onChange="calcdates()">
<option value="moddate">Zelf invoeren</option>
<option value="quarter1">1e Kwartaal</option>
<option value="quarter2">2e Kwartaal</option>
<option value="quarter3">3e Kwartaal</option>
</select>
</div> 
<div> 
    <label>Datum </label> <input id="startDate" name="startDate" maxlength="10" style="width: 6em;"/> t/m <input id="endDate" name="endDate" maxlength="10" style="width: 6em;"/>
</div>

The script:

<script type="text/javascript" charset="utf-8">
$(document).ready(
function() {
    var datepickerparam = {
    dateFormat : 'dd-mm-yy',
        dayNamesMin : [ 'Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za' ],
    monthNames : [ 'Januari', 'Februari', 'Maart', 'April','Mei', 'Juni','Juli', 'Augustus', 'September','Oktober', 'November', 'December' ]
    };

    $("#startDate").datepicker(datepickerparam);
    $("#endDate").datepicker(datepickerparam);
});

function calcdates(){

var w = document.pchoice.selectedIndex;
var selected_text = document.pchoice.options[w].value;
var commencedate =  new Date("01-01-2011"); 
var end = new Date();
//make dynamic with some variable
    switch(selected_text){
        case "quarter1":
            $("#startDate").val(commencedate);
            $("#endDate").val(commencedate+90);
        break;
        case "quarter2":
            $("#startDate").value='12-03-2011';
            $("#endDate").value='12-06-2011';
        break;
        case "quarter3":
            $("#startDate").value='13-06-2011';
            $("#endDate").value='13-09-2011';
        break;
        case "moddate":
            $("#startDate").value = '';
            $("#endDate").value ='';              
        break;  
    }
}

2 Answers2

0

adding dates:

var d=new Date();//as today or any other you wish
var e=new Date(d.getFullYear()+"-"+(d.getMonth()+5)+"-"+d.getDate());// end Date

we are adding five because Jan is 0 and we must provide the correct month

or adding 4*30 days if its the case

new Date(d.valueOf()+1000*60*60*24*4*30)
neu-rah
  • 1,662
  • 19
  • 32
0

I solved it. The full solution was:

<div>
    <label>Period</label>
    <select name="pchoice" id="pchoice" >
    <option value="moddate" selected="selected">Pick date</option>
    <option value="quarter1">1st quarter</option>
    <option value="quarter2">2nd quarter</option>
    <option value="quarter3">3rd quarter</option>
    </select>

<% Date startdate = user.getContact().getOrganisation().getCommencingDate();//Customize this if you copy it!
SimpleDateFormat formatter = new SimpleDateFormat("dd-MM-yyyy");
Calendar cal = Calendar.getInstance();
cal.setTime(startdate);
HashMap <Integer,String> datemap = new HashMap<Integer,String>();
datemap.put(1, formatter.format(startdate));

for (int i=2; i<=6; i++ ){
    if (i%2 == 0){
        cal.add(Calendar.MONTH,3);
    }
    else {
        cal.add(Calendar.DATE,1);
    }    
    String formattedDate = formatter.format(cal.getTime());
    datemap.put(i, formattedDate);
}
%>

$("select").change(function () {
    var selected_text = $(this).val();

   switch(selected_text){
    case "quarter1":
    $("#startDate").val("<%=datemap.get(1)%>");            
    $("#endDate").val("<%=datemap.get(2)%>");
    break;
    case "quarter2":
     $("#startDate").val("<%=datemap.get(3)%>");
     $("#endDate").val("<%=datemap.get(4)%>");
    break;
    case "quarter3":
     $("#startDate").val("<%=datemap.get(5)%>");
     $("#endDate").val("<%=datemap.get(6)%>");
    break;
    case "moddate":
        $("#startDate").val('');
        $("#endDate").val('');
    break;    
}

 });