Date format conversion from dd-MMM-yyyy to dd-MM-y

Question

I am trying to compare start date and end date in jquery. Code in aspx page looks like:

<asp:TextBox ID="tbStartDate" runat="server" CssClass="textbox" Width="80px" contentEditable="false" onchange="javascript:compareDates();"></asp:TextBox>

<asp:ImageButton runat="Server" ID="ibStartCalendar" ImageUrl="~/Images/calendar.jpg"
 Height="18px" AlternateText="Click to show calendar" />

<act:CalendarExtender ID="ceStartDate"  runat="server" Format="dd-MMM-yyyy" TargetControlID="tbStartDate" PopupButtonID="ibStartCalendar" CssClass="Calendar">
</act:CalendarExtender>

And javascript function:

function compareDates() {
  var start = $("#<%=tbStartDate.ClientID %>").val();
  var end = $("#<%=tbEndDate.ClientID %>").val();

  if (!compareDate(start, end)) { 
$("#<%=lblMsg.ClientID %>").html("Start Date can not be greater than End Date");
                    }
  }
 function compareDate(start, end) {
    if (start.length > 0 && end.length > 0) {
        var stDate = new Date(start);
        var enDate = new Date(end);
        var compDate = enDate - stDate;

        if (compDate >= 0)
            return true;
        else {
            return false;
        }
    } else { return true; }
}

Requirement is to dispaly date in "dd-MMM-yyyy" format in text boxes to I can not change format in calenderExtender.

When I keep this format star date and end date becomes "NaN". If I change format in calenderExtender i get proper results. However as I said I can not change format there. How can I change format in javascript?

Answer 1

Here is the solution,
i have made custom date conversion function GetDate to convert dd-MMM-yyyy format string to javascript Date object.

function GetDate(str)
{
    var arr = str.split("-");
    var months = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];

    var month = months.indexOf(arr[1].toLowerCase());

    return new Date(parseInt(arr[2]), month, parseInt(arr[0]));
}

function compareDate(start, end) {
    if (start.length > 0 && end.length > 0) {
        var stDate = GetDate(start);
        var enDate = GetDate(end);
        var compDate = enDate - stDate;

        if (compDate >= 0)
            return true;
        else {
            return false;
        }
    } else { return true; }
}

Answer 2

Kapil,

Improve method of your functionality will be

    function GetDate(str) {
var arr = str.split('-');
var month = "";
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var i = 0;
for (i; i < months.length; i++) {
    if (months[i] == arr[1]) {
        break;
    }
}
i++;
if (i >= 10) month = i;
else month = "0" + i;
var formatddate = arr[0] + '-' + month + '-' + arr[2];
return formatddate;

}

this will return date in dd-mm-yyyy format.

Answer 3

You can use jquery date-format plugin to format date-time very effectively and customize as you want to.

Or, you can use jqueryUI as well to format date.

$.datepicker.parseDate( format, value, settings )

Answer 4

Here is the Answer...

 function GetDate(str) {
        debugger; 
                var arr = str.split('-');
               var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
               var i = 1; 
               for (i; i <= months.length; i++) { 
                      if (months[i] == arr[1])
                       {                   
                         break;                     
                       } 
                  }
                  var formatddate = i  + '/' + arr[0] + '/' + arr[2]; 
                  return formatddate;
            }



 function StartDateTimeEndDate() {
                 var startDate = document.getElementById('<%=EFF_START_DATEDVTextBox.ClientID %>').value
                 var endDate = document.getElementById('<%=EFF_END_DATEDVTextBox.ClientID %>').value  
                 var startdt = GetDate(startDate)
                 var enddt = GetDate(endDate) 

               if ((Date.parse(enddt) <= Date.parse(startdt))) {
                alert("End date should be greater than Start date");
                document.getElementById('<%=EFF_END_DATEDVTextBox.ClientID %>').value = "";
                 } 
        }