How to clear the selected date of a Calendar control using JavaScript (VS 2010)?

Question

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 13-Aug-13 5:32am

priyamtheone

Updated 13-Aug-13 6:08am

Sampath Lokuge

v2

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Jon "Greg"ory Rothlander · Answer 1 · 2013-08-13T06:00:00

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

Sampath Lokuge · Answer 2 · 2013-08-13T06:07:00

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.

priyamtheone · Answer 3 · 2013-08-29T04:17:00

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!

How to clear the selected date of a Calendar control using JavaScript (VS 2010)?

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0