Displaying the identical date on two separate Ajax Calendar Extender controls in Asp.net

I am facing an issue with some ajax calendar extenders. I have two similar calendars and two textboxes, each linked to one calendar.

                        <asp:TextBox ID="txt1" runat="server"</asp:TextBox>
                    <cc1:CalendarExtender ID="calendar1" runat="server" TargetControlID="txt1"
                        Format="yyyy-MM-dd" CssClass="Calendars" Enabled="false">

My challenge is that when I select a date in the first calendar, I want the second calendar to show the same month as the first one without selecting the actual date (as it will display in txt2 textbox). The txt2 should stay empty until the user selects a date in calendar2.

I have searched everywhere online but haven't found a solution that fits my specific situation.

Could someone provide assistance?

EDIT:

I attempted changing the date and then clearing the textbox using JavaScript, but I encountered an issue with a compare validator triggering. Below is the JavaScript code used for clearing the textbox:

        function onShowingCal2(sender, e) {
        var txt2 = document.getElementById('<%= txt2.ClientID %>');
        var txt1 = document.getElementById('<%= txt1.ClientID %>');
        var cal2 = sender;
        if (txt2.value == "") {
            var dateStart = new Date();
            dateStart.setDate(txt1.value);
            cal2.set_selectedDate(dateStart );
            datechosen = false;                
        }
    }
function onTextboxChange() {
            if (!datechosen ) {
                document.getElementById('<%= txt2.ClientID %>').value = "";
            }
        }

Thank you!

javascriptasp.netajaxcontroltoolkit

Answer №1

Maybe you could assign a new date to the SelectedDate property of calendar2 while clearing the text in txt2?

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Calendar/Calendar.aspx

There are various client events available for the Calendar component that you can utilize.

OnClientDateSelectionChanged    OnClientHidden    OnClientHiding

For instance, you can specify 

OnClientDateSelectionChanged="onSelectChanged()
".

function onSelectChanged()
{
     alert($find('calendar1')._selectedDate);
}

Therefore, your code would look like this:

<cc1:CalendarExtender ID="calendar1" runat="server" TargetControlID="txt1" Format="yyyy-MM-dd" CssClass="Calendars" Enabled="false" OnClientDateSelectionChanged="onSelectChanged()">

function onSelectChanged()
{
   $find('calendar2')._selectedDate = $find('calendar1')._selectedDate;
}

Answer №2

After some trial and error, I finally managed to get everything up and running smoothly.

The solution was quite simple - I took the javascript code from the initial question and incorporated a basic function:

        function EndDateChosen(e) {
        dateChosen = true;
    }

To implement this, I called the function in the calendar2 tag's property using OnClientDateSelectionChanged='EndDateChosen'

It was a bit tricky to get the event to work properly. The javascript function had to have only one parameter, and the function name within the calendar's tag needed to be enclosed in single quotes rather than double quotes.

Thank you all for your help!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Socket.io within express routes

Can I incorporate socket.io into an express route? This is how I envision it: Server app.js: app.get('/cool_page/', users.cool_page); users.cool_page: if (5 > 3) { socket.emit('first_connection', "true statement"); } Clien ...

javascriptnode.jsexpresssocket.io

"Incorporate keyframes to create a mouseleave event with a distinctive reverse fade

After posing a similar question a few days back, I find myself encountering yet another hurdle in my project. The task at hand is to switch the background image when hovering over a button with a fade-in effect using @keyframes. However, I'm stuck bec ...

javascripthtmlcss

A link is not allowed to be a child of another link

An issue arises in a React.js application Warning: validateDOMNesting(...): <a> cannot be nested under another <a>. Refer to Element > a > ... > a for more information. What is the significance of this warning? How can it be avoided ...

javascriptreactjs

Utilize JavaScript to create a toggle menu feature that can target multiple variables with just one click function

I am attempting to create a collapsing menu on click functionality with additional modifications. One of the changes I would like to implement is altering the background of another element when the menu collapses. Currently, the code snippet only works fo ...

javascripthtmlcss

What is the purpose of the video-js endcard plugin incorporating native controls into the player?

Endcard is a unique plugin designed for the video-js html5 video player that adds clickable links to the end of a video. (More information on endcards can be found here: https://github.com/theonion/videojs-endcard). To implement an endcard, simply include ...

javascriptcssvideo.js

What is the best way to style radio boxes in HTML to resemble checkboxes and display X's when selected?

I'm looking to create a form with radio boxes that resemble checkboxes and display a glyphicon x when selected. I've experimented with various solutions such as: input[type="radio"] { -webkit-appearance: checkbox; /* Chrome, ...

javascriptjqueryhtmlcheckboxradio-button

Ensure that text is aligned alongside an image only when both elements are enclosed within <p> tags

When using an API to pull markdown content from Contentful and converting it to HTML with ReactMarkdown, a common issue arises. The resulting HTML structure often places the text content in separate paragraphs such as: <p>Some text content</p> ...

javascriptreactjsmarkdown

I noticed that the node_modules folder has mysteriously vanished from my

When I tried running npm install in the terminal of VS Code. PS D:\work\backEnd> npm install npm WARN old lockfile npm WARN old lockfile The package-lock.json file was created with an older version of npm, npm WARN old lockfile so ...

javascriptnode.jsnpmbackend

Empty response returned by Next.js API Routes

I have attempted various methods to retrieve data from a database using MySQL. Here's what I've tried: export default function handler(req, res) { const mysql = require('mysql') const dbConn = mysql.createConnection({ ho ...

javascriptnode.jsasynchronousnext.js

Organizing files in ASP.NET

Our ASP.NET 3.5 web application has a feature that involves accessing a file in the code-behind on the server during the page life-cycle, completely unrelated to URLs or web browsers. In our production environment, we currently specify the full path to th ...

asp.networking-directory

Is there a way to trigger a click event on an href using asp code behind?

Is there a way to programmatically trigger a click event on the href "shipping_question_ID_product_received_as_ordered_link" from the code behind of an ASP form? This href triggers a complex function in jquery when clicked by the user. I need to simulate ...

c#jqueryhtmlasp.net.net

Sending a post request with data to an ExpressJS server resulted in a 404 error indicating that the server

My setup includes a React frontend communicating with my own ExpressJS API backend running version 4.16.0. Currently, using the fetch method in the React frontend to retrieve data is functioning properly: fetch('/desResData') .then(res = ...

javascriptnode.jsreactjsexpress

Execute script when on a specific webpage AND navigating away from another specific webpage

I created a CSS code that adds a fade-in effect to the title of my website, and it works perfectly. However, I now want to customize the fade-in and fade-out effect based on the page I am transitioning from. My desired outcome: If I am leaving the "Biolo ...

javascriptjquerycsshtml

What are some strategies for implementing dynamic script generation within an AJAX response?

I am exploring a new AJAX design approach where a script is returned to handle and show data. The JSON response below is currently functional, but I would appreciate advice on how to better organize the application for future maintenance. { payload: " ...

phpjavascriptajaxjson

Is it possible to pass a component into a dialogue box in material-ui using React?

Hello, I am currently facing an issue with displaying a chart component within a dialogue box. Despite having the code in place, the chart is not rendering inside the dialogue box as expected. Unfortunately, due to the complexity of the code, I am unable t ...

javascriptreactjsdialogmodal-dialogmaterial-ui

The React Native Expo is throwing an error stating that it is unable to locate the module 'minizlib'

At the instructions available in the read.me of https://github.com/react-community/create-react-native-app Upon selecting my template using the expo init command, I encountered the following error: Cannot find module 'minizlib' Error: Cannot fi ...

javascriptreact-nativenpmexpo

Can hash routes be defined in next.js?

Previously, I created a modal component using <HashRouter> in react-router where the modal would become active or inactive based on the hash url. For example, the modal is inactive when the url is /route, but becomes active when the url is /route#m ...

javascriptreact-routermodal-dialognext.js

Extract the innerHTML input value of each row in an HTML table

I've encountered an issue with my HTML table that contains static values, except for one cell which has an input field. When I try to convert the row data into JSON, the single input field is causing complications. Without the input field, I can suc ...

javascriptjqueryjsoninnerhtml

Enhance text search functionality using AngularJS

Just starting to learn angularjs. Below is the code I've written: $scope.styles = [{"name":"walking"},{"name":"Food"},{"name":"culture"}] I have created a checkbox list <div ng-repeat="style in styles"> <input type="checkbox"> {{ ...

javascriptangularjs

Tips to Avoid Multiple Executions of Javascript Code due to Caching

When I make a request to my Asp.net-MVC application, it returns a partial-view. public ActionResult AccountDetails() { return PartialView("~/Views/partials/Account/Details.cshtml"); } To load the partial view in my form, I use the following ...

javascriptjqueryasp.net-mvcbrowser-cache