Javascript to validate start date and end date in asp.net

Question

I have written a JS that should check that start date is less than end date. If not, alert should be thrown

The JS is written as;

function DateValidation(startDate, EndDate) {
                debugger;
                var stdate = startDate;
                var enddate = EndDate;
                if (stdate!= '' && enddate!='') {
                if (stdate > enddate) {
                    alert('Start date cannot be greater than end date');
                    return false;
                }
                else {
                    return true;
                }
               }
            }

This JS gets fired when i am clicking a button as "Show Report".

Problems that i am facing

1. JS doesn't validate the date correctly. What am i missing? i am passing date from the textbox

2. The JS doesn't fired up when clicking button for the first time. it fires when clicking the button second time

Plus, i have registered the JS as below;

btnShowReport.Attributes.Add("onclick", "return DateValidation('" + txtStartDate.Text + "', '" + txtEndDate.Text + "');");

Is the above code correct? What is the correct place to register the JS?

Please guide.. thanks!

Answer 1

You need to parse the string values to dates

if (startDate!= '' && EndDate!='') {  
    var stdate = Date.parse(startDate);   
    var enddate = Date.parse(EndDate);  
    if (stdate > enddate) {   
        alert('Start date cannot be greater than end date');   
        return false;   
    }   
    else
    {   
        return true;   
    }   
} 

Without further code it's hard to tell why your button only fires the event on the second click. Is your button disabled to start with?

Answer 2

Use Date.parse. What you are doing is checking whether a string is greater than another string.

Also the script will take only whatever is there at the first time in txtStartDate.Text, txtEndDate.Text EVERY time the script runs.

Why? You have not correctly understood server side and client side execution.

This line in your code,

btnShowReport.Attributes.Add("onclick", "return DateValidation('" + txtStartDate.Text + "', '" + txtEndDate.Text + "');");

registers the script to the page passing the text in those text boxes.

You have assumed that each time the text changes in the text box, the method will take the new values and do the date calculation.

However your script would look something like this, assuming the two text boxes are empty when the page is loaded. You can verify this by checking the page source.

<inputid="btnShowReport" ... onclick="return DateValidation('','')>

Because JavaScript is run at client side, the server is not contacted each time to get the current values of those text boxes.

What you can do is pass the text boxes it self to the method. Something like

return DateValidation(txtStartDate.ClientID, txtEndDate.ClientID);

and from the method you can access it like shown below

function DateValidation(txtStartDate, txtEndDate) {
                debugger;
                var stdate = Date.parse(txtStartDate.value);

Answer 3

I think the problem is that you're not comparing dates - you have just declared them as vars without a type so they're essentially Strings.

Check out the Date.parse() method.

Answer 4

Adding to what the previous 2 guys have answered with, you have to parse the dates. You also need to validate that they are even dates. I use this library often when working with dates on the client side:

http://www.datejs.com/

Answer 5

The main problem is how you register the event. You are creating a string with code that contains string literals with the values, which means that you get the values from the textboxes at the time that you create the string, not at the time that the event is activated. You have to make a postback before the code is updated with the current values, that is why it doesn't work on the first click.

Create code that gets the values at the time of the click:

btnShowReport.Attributes.Add("onclick", "return DateValidation(document.getElementById('" + txtStartDate.ClientID + "').value, document.getElementById('" + txtEndDate.ClientID + "').value);");

Another possible problem is that the code doesn't compare dates, it compares strings. Some date formats are comparable as strings, e.g. ISO 8601 based formats: "2010-12-31" < "2011-01-01", but other date formats has to be parsed into dates to be compared, e.g. "31/12/2010" > "01/01/2011".

Parse the dates after checking that they are not empty:

...
if (startDate != '' && EndDate != '') {
  var stdate = Date.parse(startDate);
  var enddate = Date.parse(EndDate);
  ...