Click here to Skip to main content
15,881,812 members
Please Sign up or sign in to vote.
2.33/5 (2 votes)
See more: , +
I would like to know how to clear the selected date of a Calendar control using JavaScript. Also, while doing this, how do I prevent the page from getting reloaded?

Regards!
Posted
Updated 13-Aug-13 6:08am
v2

The page should not reload if you are using JavaScript. If it is acting oddly, try appending "return false;" to your JavaScript code such as the "OnClick" event. But if you have this setup correctly, it should not postback the page.

In regards to the calendar control, it will depend on which calendar control you are using. But most will allow a null date value or you can just set it to the current date.

The best way to do this is to use jQuery to select the control but you can just use plan JavaScript. If the control will allow for a null date, then set it's value to an empty string value like "". If not, you can set it to the current date or some generic default date such as "01/01/2000".

Setting it to the current date is the most common approach unless you have business rules to call for something else. Here's a sample where I have done just that. But the code working will depend on the calendar control you are using. You might find that you need to modify the jQuery code depending on the control you are using.

Here's a sample function I used to set a calendar control's date. You can adjust the jQuery to use the current date or an empty string to test your control to see what it handles. You can ignore the string here, as I was using this to maintain the culture formatting. It's probably not something you need, but it may help you so I left it in.

JavaScript
function setDateControlls(startDate) {
    // Convert to string to preserve the culture specific formatting.
    var sDate = new String(startDate);
   $get("calFromDate").value = sDate;
}


If the above does work the way you want it to, try adjusting it to something like the following. It's hard to guess what you need without knowing which calendar control you are using and being able to test the code against that particular calendar control.

JavaScript
function setDateControlls(startDate) {
    // Convert to string to preserve the culture specific formatting.
    var sDate = new String(startDate);
   $("#calFromDate").value(sDate);
}
 
Share this answer
 
v4
Comments
priyamtheone 29-Aug-13 10:19am    
Thanks, but it didn't work. Please refer to my newest post for further details.
You can use like below.
Note: When you do the things like below on client side by using javascript it won't reload the whole page.

<input type="text" id="txtDate" onclick="fnPopUpCalendar(txtDate,txtDate,'dd/mm/yyyy')"  onfocus="this.value=''"/>


Explanation of the above code:

When you focus on the text box it clears the content of that(i.e.Calendar data on text box).

More info : http://stackoverflow.com/questions/2851794/clear-text-onclick-textfield[^]

I hope this will help to you.
 
Share this answer
 
v2
Thanks for your help but I still couldn't get into the right path.

Let me explicate with a little details. I have a general ASP.Net Calendar control and a Link Button below it along with other controls in a page. I would like to know how the under-mentioned cases can be handled with them using javascript without causing the page to postback.

For each case, I hooked up the OnClientClick event of the Link Button with a javascript method that defines what I want to achieve.

The cases along with their methods follow below.

Case 1- When the Link Button is clicked; it will set the selected date of the Calendar to System.DateTime.MinValue.

Example:

C#
function ResetCalendar() {
            document.getElementById('<%= Calendar1.ClientID %>').value = System.DateTime.MinValue
            return false;
        }


Alternatively:

C#
function ResetCalendar() {
            document.getElementById('<%= Calendar1.ClientID %>').value = '<%= System.DateTime.MinValue.ToString() %>';
            return false;
        }


Case 2- When the Link Button is clicked; it will set the selected date of the Calendar to a date of my choice.

Example:

C#
function ResetCalendar() {
            var d = new Date();
            d.setFullYear(2013, 08, 21);
            document.getElementById('<%= Calendar1.ClientID %>').value = d;
            return false;
        }


Alternatively:

C#
function ResetCalendar() {
            var d = new String("08/21/2013")
            document.getElementById('<%= Calendar1.ClientID %>').value = d;
            return false;
        }


Case 3- When the Link Button is clicked; it will clear the selected date of the Calendar.

Example:

C#
function ResetCalendar() {
            document.getElementById('<%= Calendar1.ClientID %>').SelectedDates.Clear();
            return false;
        }


It’s not working at all in any case. No error message is being shown either. The third case even causes a postback.
Hope I could clarify it more this time. Please help in sorting all of them.

Regards!
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900