Question

我想有一个下拉菜单，可以快速选择日期范围。例如，“上周”，“上个月”，“过去三个月”。那种东西。在选择其中一个时，它将使用选择中的from和to日期填充2个文本框。尝试过JUI datepicker的一些东西，但在谷歌之后似乎不是这样做的。

非常感谢任何帮助。

感谢。

Answer 1

我做了类似的事情，但有单选按钮。希望它有所帮助：

    function reset_last_checkboxes() {
        $("#export_last_month").attr("checked", false);
        $("#export_3_last_months").attr("checked", false);
        $("#export_last_year").attr("checked", false);
    }
    var date_format = "DD, d MM, yy";
    $("#id_from_date").attr("readonly", "readonly");
    $("#id_till_date").attr("readonly", "readonly");
    $("#id_from_date").datepicker();
    $("#id_till_date").datepicker();
    $( "#id_from_date" ).change(function() {
        $( "#id_from_date" ).datepicker( "option", "dateFormat", date_format );
    });
    $( "#id_till_date" ).change(function() {
        $( "#id_till_date" ).datepicker( "option", "dateFormat", date_format );
    });
    $( "#id_from_date" ).click(function() {
        reset_last_checkboxes();
    });
    $( "#id_till_date" ).click(function() {
        reset_last_checkboxes();
    });
    $("#id_till_date").val(format_date(new Date(now)));
    $("#export_last_month").click(function(){
        var dt = new Date(now);
        $("#id_till_date").val(format_date(dt));
        $("#id_from_date").val(format_date(prevMonth(dt)));
    });
    $("#export_3_last_months").click(function(){
        var dt = new Date(now);
        $("#id_till_date").val(format_date(dt));
        $("#id_from_date").val(format_date(prevMonth(prevMonth(prevMonth(dt)))));
    });
    $("#export_last_year").click(function(){
        var dt = new Date(now);
        $("#id_till_date").val(format_date(dt));
        for (var i=0;i<12;i++) {
            dt = prevMonth(dt);
        }
        $("#id_from_date").val(format_date(dt));
    });

您可以随时使用下拉菜单替换我的单选按钮，并且比我更好地编写此代码：）

顺便说一下，prevMonth我这样计算：

function prevMonth(dt){
    var thisMonth = dt.getMonth();
    dt.setMonth(thisMonth-1);
    if(dt.getMonth() != thisMonth-1 && (dt.getMonth() != 11 || (thisMonth == 11 && dt.getDate() == 1)))
        dt.setDate(0);
    return dt;
}

使用Jquery UI datepicker下拉日期范围

1 个答案: