Question

我正在使用datepicker在asp.net中的datalist控件中选择日期。方案是用户选择2个文本框的日期，然后单击导出到Excel按钮，然后系统生成excel文件，其中包含给定日期内的数据。问题是我想限制用户选择之前的日期单击导出按钮，选择的第二个日期应该大于使用Jquery选择的第一个日期，下面是代码：

<asp:Button runat="server" ID="btnExportbwDates" 
    Text="Export between Dates" onclick="btnExportbwDates_Click" />
    <asp:TextBox runat="server" ID="txtDateRangeOne" CssClass="txtDateRangeOne"></asp:TextBox>
    <asp:TextBox runat="server" ID="txtDateRangeTwo" CssClass="txtDateRangeTwo"></asp:TextBox>

     <script type="text/javascript">
    $(document).ready(function () {

        var pickerOpts = {
            dateFormat: "dd/mm/yy"

        };

        $(".txtDateRangeOne").datepicker(pickerOpts);
        $(".txtDateRangeTwo").datepicker(pickerOpts);

    });
</script>

Answer 1

试试这个。

$(document).ready(function () {
    $(".txtDateRangeOne").datepicker({
        dateFormat: "dd/mm/yy"
        onSelect: function(date){
             //Once you select first date set this date as  the minDate 
             //of second datepicker 
             $(".txtDateRangeTwo" )
             .datepicker({ minDate: new Date(date) });
        }  
    });
    $(".txtDateRangeTwo").datepicker({ dateFormat: "dd/mm/yy" });

    $('#btnExportbwDates').click(function(){
        var startDate = $('.txtDateRangeOne').datepicker("getDate");
        var endDate = $('.txtDateRangeTwo').datepicker("getDate");
        if(!startDate){
            alert('Select start date');
            return false;
        }
        if(!endDate){
            alert('Select end date');
            return false;
        }
        if(startDate > endDate){
            alert('Select valid date range');
            return false;
        }

        return true;
    });
});

Answer 2

    $(document).ready(function () {
            var dates = $(".txtDateRangeOne, .txtDateRangeTwo").datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                showOn: "both",
                showAnim: "slide",
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                numberOfMonths: 2,
                buttonImageOnly: true,
                onSelect: function (selectedDate) {
                    var option = this.className.indexOf("txtDateRangeOne") >= 0 ? "minDate" : "maxDate";
                    instance = $(this).data("datepicker"),
                        date = $.datepicker.parseDate(
                            instance.settings.dateFormat ||
                            $.datepicker._defaults.dateFormat,
                            selectedDate, instance.settings);
                    dates.not(this).datepicker("option", option, date);
                }
            });
});

Jquery Datepick Range＆amp; asp.net中的日期验证无效

2 个答案: