locked
jQuery Datepicker in webgrid with multiple ID's RRS feed

  • Question

  • User927770920 posted

    Good afternoon forum,

    Following on from one of my previous posts:

    http://forums.asp.net/t/1992185.aspx?JQuery+datepicker+in+cshtml+Webgrid

    which I thought had resolved my problem, I am struggling with having a datepicker assigned to multiple textboxes within my webgrid.

    The issue I have which was an oversight on my part on the above thread is that I need to have an ID assigned to the textbox in order for my edit page using json to work using Request["textbox_id"] etc, but obviously with having multiple rows this is causing multiple instances of the same ID which is creating havoc with the datepicker.

    I have researched extensively and tried things like datepicker("destroy") etc but so far have had no luck.

    Has anyone encountered this with any resolution?

    Thanks

    M

    Tuesday, July 22, 2014 7:34 AM

Answers

  • User-658201581 posted

    Hello,

    you can try with this approach.

    suppose, your grid has some input for date picker like:

    <div id="Grid">
        <input type="text" class="date" id="sunday"/>
        <input type="text" class="date" id="monday"/>
        <input type="text" class="date" id="tuesday"/>
        <input type="text" class="date" id="wednesday"/>
      </div>

    Now you can add this jQuery:

    $(function(){
      $('#Grid').find('input[class="date"]').each(function(){
          makeDatepicker( $(this) )
      });
    });//document ready
    
    //Create a function for datepicker
    function makeDatepicker(id){
      id.datepicker();
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 22, 2014 9:24 AM

All replies

  • User-760709272 posted

    The issue I have which was an oversight on my part on the above thread is that I need to have an ID assigned to the textbox in order for my edit page using json to work using Request["textbox_id"] etc

    No you don't, you need to give them a name, not an id.  As mvc gives you more control over the html it is pretty important you understand basic html and http if you want to develop using mvc.

    but obviously with having multiple rows this is causing multiple instances of the same ID which is creating havoc with the datepicker.

    So give them all a unique id.  Or give them all the same class and attach the datepicker using a class selector rather than an id selector.

    Tuesday, July 22, 2014 8:52 AM
  • User-658201581 posted

    Hello,

    you can try with this approach.

    suppose, your grid has some input for date picker like:

    <div id="Grid">
        <input type="text" class="date" id="sunday"/>
        <input type="text" class="date" id="monday"/>
        <input type="text" class="date" id="tuesday"/>
        <input type="text" class="date" id="wednesday"/>
      </div>

    Now you can add this jQuery:

    $(function(){
      $('#Grid').find('input[class="date"]').each(function(){
          makeDatepicker( $(this) )
      });
    });//document ready
    
    //Create a function for datepicker
    function makeDatepicker(id){
      id.datepicker();
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 22, 2014 9:24 AM
  • User927770920 posted

    AidyF,

    As you will see in my link to the previous Thread I am not using MVC I am using Webmatrix & Razor.

    I am attaching the datepicker to a .date class but as I am using a Webgrid, I can't give a unique ID as the same ID is inherently being used for all textboxes that appear in a given column. 

    Tuesday, July 22, 2014 10:23 AM
  • User927770920 posted

    Many thanks coderbd!

    Wednesday, July 23, 2014 5:10 AM