Issues with Gridview functionality for Javascript Calendar

The calendar feature in the Gridview is not functioning properly. I have assigned unique values to both the Gridview textbox and calendar image button. However, the click event of the calendar is not working within the Gridview. The same code works fine when used without the grid.

<asp:TemplateField HeaderText="BirthDate" ItemStyle-Width="15%">
    <ItemTemplate>
        <asp:TextBox ID="txtBirthDate" Text='<%# Eval("BirthDate", "{0:dd-MMM-yyyy}")%>'
            runat="server" Width="80px"></asp:TextBox>
        <img id='<%# Eval("EmployeeId") %>' alt="" src="../../_layouts/Images/itevent.png" />
        <input type="text" id='<%# Eval("CtrlId") %>' style="display: none" name="txtExpDate"
            value="<%# Eval("BirthDate") %>" readonly="readonly">
        <script type="text/javascript">
            Calendar.setup
                ({
                    inputField: '<%# Eval("CtrlId") %>',
                    ifFormat: '%d-%b-%Y ',
                    button: '<%# Eval("EmployeeId") %>',
                    align: 'Br'
                });                                                   
        </script>
    </ItemTemplate>
</asp:TemplateField>

Answer №1

Implement Jquery

       $(function () {
        $("[id$=txtBirthDate]").datepicker({
             showOn: 'focus'
             buttonImage:"images/calendar.gif" 

        });
    });

Example in your ASPX file:

    <asp:TemplateField HeaderText = "StartDate">
     <ItemTemplate>
    <asp:TextBox ID="txtBirthDate" runat="server" ReadOnly = "true"></asp:TextBox>
   </ItemTemplate>
    </asp:TemplateField>

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

Unable to process JSON data object

Having trouble with processing a json object. The form on the page contains a dropdown where selecting a truck number should autofill the rest of the form with data from a json file. Sample data: [ { "truckNum":"62-559", "description":"MOF ...

Obtain User Input from a TextArea Element on an HTML Page using ASP.net

In my asp.net 4.0 project, I am using jTemplates to create a HTML-Page that includes a text area and a submit button. I am looking for a way to retrieve the value entered in the text area when the user clicks on the submit button. Can anyone provide guid ...

jsTree eliminates the hashtag from the URL

Utilizing a JSON generated jsTree to efficiently navigate through a directory structure has been my recent task. I have successfully implemented the select_node event to capture the path of the selected node as a string and then update the location.hash ...

Building a DataTable Schema using SQL

I am looking to efficiently insert thousands of records into a 30-column SQL table using a data adapter with a data table. SqlDataAdapter adapter = new SqlDataAdapter(); DataTable table = new DataTable(); adapter.InsertCommand = new SqlCommand("INSERT INT ...

Tips for moving a texture horizontally across a sphere using threejs

I have a 360 degree viewer tool. Is there a way to load a texture in a specific position that will rotate the original image by a certain number of degrees or units around the Y-axis without altering anything else about how the picture is displayed? If s ...

What is the best way to eliminate the # symbol from a URL within a Vue.js application when utilizing a CDN

When constructing a vue.js application using CLI and vue-router, you can include mode: 'history' in the router to remove the hash from the URL. However, is there a way to eliminate the # from the URL when using Vue through a CDN? For instance, in ...

How can I change the background image using CSS instead of HTML?

I initially created a non-responsive website for an existing project. Now I need to convert it into a responsive site. I tried changing the logo image to make it responsive, but it's not working as expected. <td colspan="2" style="background-image ...

Obtain the index by clicking on an element within an HTMLCollection

Within my HTML code, I have 9 <div> elements with the class ".square". I am looking to make these divs clickable in order to track how many times each one is clicked and store that information in an array. For example, if the fifth <div> is c ...

What is the most effective method for incorporating real-time UI updates similar to the "new answer" notifier on Stack Overflow?

How should web applications be designed to handle realtime UI updates? For instance, how do you manage prompt notifications when another user submits an answer while you are answering a question on a platform like SO? Additionally, if every page on your ...

PHP: AJAX request triggers 500 Internal Server Error

I currently have a dynamic MySQL database that receives regular updates from an AI-generated text. My goal is to display this continuously updating text on a web platform. In order to achieve this, we conducted a simple test as shown below: <head> ...

Ensure Your Forms Are Error-Free with Jquery Form Validation

Currently working on a registration form that involves the use of credit cards. I have reached the stage of form validation to ensure that users input correct data in the appropriate fields. However, this has led me to ponder whether relying on JQuery for ...

The jQuery plugin functions smoothly when running on localhost, but it causes issues with the background image when deployed on the web

I created a compact plugin to show a cookie message. While testing it on my local machine, everything functioned smoothly without affecting any web pages. However, once I transferred the files to the server, I encountered issues such as: A background ima ...

Generating a bullet list from an array of objects

Looking to create an unordered list with vanilla JS, using an array of objects to populate the list. Struggling a bit on how to accomplish this. Here is my current code: let myObj = [ {name: "Harry Potter", author: "JK Rowling"}, {name: "Hunger Gam ...

Guide on transferring JSON information from a client to a node.js server

Below is the code snippet from server.js var express = require("express"), http = require("http"), mongoose = require( "mongoose" ), app = express(); app.use(express.static(__dirname + "/client")); app.use(express.urlencoded()); mongoose.con ...

I am unable to establish a connection to a MongoDb Docker container using VS Code

Currently, I am in the midst of developing a Rest API that requires connection to a MongoDb Docker container. Operating on my Windows 10 system, I successfully set up Docker using Bash and Oracle Virtualbox VM. Executing the command $ docker run --rm --nam ...

Optimal method for displaying the children component twice in Next.js

In order to create an infinite slider, I had to duplicate the data within my component. The data consists of an array containing a maximum of 20 items, each with an image. The slider is functioning perfectly. Although it may seem unconventional, it was n ...

Troubleshooting a TypeScript Problem with React Context

In my AppContext.tsx file, I have defined the following import React, { useState, createContext } from "react"; import { Iitem } from "../utils/interfaces"; interface AppContext { showModal: boolean; setShowModal: React.Dispatch< ...

Managing the Redirect from ASP.NET Login

For a multi-form data submission process, I need to check a user's profile against the data they have already submitted when they log in. Certain classes of users should see an alert message upon login, displayed as a popup. The ModalPopupExtender fro ...

Avoid invoking the throttle function from lodash

I am currently facing an issue in my React project with a throttle function from lodash. The requirement is that the function should not be executed if the length of the parameter value is zero. I have tried checking the length of the value and using thro ...

Is jQuery failing to serialize the form data?

I have a question regarding my form. When I try to serialize it using a jQuery script, the output is empty. Could someone please assist me with this issue? Here is a snippet of my form: <form id="tabb2"> <!-- *************************** ...