在表单选择的日期范围字符串中查找当前日期

时间:2013-07-18 20:55:18

标签: javascript forms date selected

你好,这是一个棘手的问题:)

我有一个json对象,我可以通过这种方式创建一个选择表单字段:

for(var i = 0; i < jsonData.vpcourse[0].items.length; i++) {
    $('#kw').append('<option value="'+jsonData.vpcourse[0].items[i].datum+'">'+jsonData.vpcourse[0].items[i].datum+'</option>');
    console.log(jsonData.vpcourse[0].items[i].datum);
}

我的问题:选择了添加的最后一个选项,但我需要选择选择实际日期的日期范围:

<option value="07.10.2013-01.11.2013">07.10.2013-01.11.2013</option>
<option value="09.09.2013-04.10.2013">09.09.2013-04.10.2013</option>
<option value="12.08.2013-06.09.2013">12.08.2013-06.09.2013</option>
<option value="15.07.2013-09.08.2013" selected="selected">15.07.2013-09.08.2013</option>
<option value="17.06.2013-12.07.2013">17.06.2013-12.07.2013</option>
<option value="20.05.2013-14.06.2013">20.05.2013-14.06.2013</option>
<option value="22.04.2013-17.05.2013">22.04.2013-17.05.2013</option>
<option value="25.03.2013-19.04.2013">25.03.2013-19.04.2013</option>

最好的方法是直接在for循环中检查实际日期是否在该日期范围“07.10.2013-01.11.2013”​​内,并将selected =“selected”添加到该追加。

这是不可能的!?

更新

for(var i = 0; i < jsonData.vpcourse[0].items.length; i++)
{

        // testDate looks like: 29.12.2014-23.01.2015
        var testDate = jsonData.vpcourse[0].items[i].datum;
        var n=testDate.split("-");
        var x = n[0].split(".");
        var y = n[1].split(".");
        var smaller = new Date(x[2], x[1], x[0]);
        var bigger = new Date(y[2], y[1], y[0]);
        var today = new Date();
    if (smaller <= today && today <= bigger) {
        $('#kw').append('<option value="'+jsonData.vpcourse[0].items[i].datum+'" selected="selected">'+jsonData.vpcourse[0].items[i].datum+'</option>');
    } else {
        $('#kw').append('<option value="'+jsonData.vpcourse[0].items[i].datum+'">'+jsonData.vpcourse[0].items[i].datum+'</option>');
    }
    //console.log(jsonData.vpcourse[0].items[i].datum);
}

作品90%:D选择此项:

<option value="12.08.2013-06.09.2013">12.08.2013-06.09.2013</option>
<option value="15.07.2013-09.08.2013">15.07.2013-09.08.2013</option>
<option value="17.06.2013-12.07.2013" selected="selected">17.06.2013-12.07.2013</option>
<option value="20.05.2013-14.06.2013">20.05.2013-14.06.2013</option>

但相反它应该是一个选项,所以什么错了? :(

更新2:

它有效,问题是我必须从月份变量-1开始......

工作示例:

var today = new Date();             
for(var i = 0; i < jsonData.vpcourse[0].items.length; i++)
{
        var testDate = jsonData.vpcourse[0].items[i].datum;
        var n=testDate.split("-");
        var x = n[0].split(".");
        var y = n[1].split(".");
        var smaller = new Date(x[2], x[1]-1, x[0]);
        var bigger = new Date(y[2], y[1]-1, y[0]);
    if (smaller <= today && today <= bigger) {
        $('#kw').append('<option value="'+jsonData.vpcourse[0].items[i].datum+'" selected="selected">'+jsonData.vpcourse[0].items[i].datum+'</option>');
    } else {
        $('#kw').append('<option value="'+jsonData.vpcourse[0].items[i].datum+'">'+jsonData.vpcourse[0].items[i].datum+'</option>');
    }
    //console.log(jsonData.vpcourse[0].items[i].datum);
}

Thx转到LightStyle:)

1 个答案:

答案 0 :(得分:0)

我有一个非常优雅的解决方案,理解起来非常简洁,但我的建议是使用Moment.js作为处理日期的插件助手,以及一个名为{{3}的简单插件为你计算范围。

使用这些插件,您的代码可以被删除到:

// Coming from json or whatever...
var dates = ["07.10.2013-01.11.2013",
"09.09.2013-04.10.2013",
"12.08.2013-06.09.2013",
"15.07.2013-09.08.2013",
"17.06.2013-12.07.2013",
"20.05.2013-14.06.2013",
"22.04.2013-17.05.2013",
"25.03.2013-19.04.2013"];

$(dates).map(function(i,item) {
    // Split the dates
    var datesSplit = item.split("-");

    // Define dates and range
    var start = moment(datesSplit[0], "DD.MM.YYYY");
    var end = moment(datesSplit[1], "DD.MM.YYYY");
    var today = moment();
    var range = moment().range(start, end);

    // Create Option
    var option = $("<option>").text(item);

    // Add parameter when today within range
    if (today.within(range)) {
        option.attr("selected", "selected");
    }

    $("select").append(option);
});

我认为您不会获得更易于理解和维护的代码。这是工作moment-range.js