Jquery Datepick Range & invalid Date validation in asp.net

Question

I am using datepicker to select date in datalist control in asp.net. The scenario is the user selects the date for 2 textboxes and then click on the export to excel button , then the system generates the excel file with the data within the given dates.The issue is I want to restrict the user to select the date before clicking on export button, and the 2nd date selected should be greater than the first date selected using Jquery , below is the code:

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

Yorgo · Accepted Answer · 2012-02-03 15:57:42Z

    $(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);
                }
            });
});

ShankarSangoli · Accepted Answer · 2012-02-03 16:09:58Z

1

Try this.

$(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;
    });
});

edited Feb 3, 2012 at 16:09

answered Feb 3, 2012 at 15:57

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

1 Comment

Mr A Over a year ago

how to show the validate messages for range and empty textbox?

Collectives™ on Stack Overflow

Jquery Datepick Range & invalid Date validation in asp.net

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related