如何使用下拉菜单修复jquery datepicker日期计算功能?

时间:2012-07-23 23:29:02

标签: javascript drop-down-menu jquery-ui-datepicker calculated-field

我正在尝试创建一个脚本,根据下拉框的值,它会自动填充距离给定日期四分之一,二分之二或二分之一的文本框。所以对于第1季度的价值,box1将是“1-1-2011”,box2将填充“1-4-2011”。目前我看到更改日期时没有发生任何事情。我是初学者,并且一直试图让这项工作好几天。对不起,如果我忽略了一个明显的问题。

元素如下:

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

脚本:

<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 个答案:

答案 0 :(得分:0)

添加日期:

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

我们正在添加5,因为Jan为0,我们必须提供正确的月份

如果是

,则增加4 * 30天
new Date(d.valueOf()+1000*60*60*24*4*30)

答案 1 :(得分:0)

我解决了。完整的解决方案是:

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

 });