Datepicker - mutiple instances, disable buttons or readonly help

Datepicker - mutiple instances, disable buttons or readonly help

Hi, 

I have a gridview with a date column.  Each row in this column shows it's date value with the datepicker.  
This is working great except for one thing.

I don't want the date displayed by the datepicker to change -  it  should only show the value of the date which is in the column, even if a button is clicked.  

Oddly enough it is only the top datepicker in the first row which lets the input buttons change the date displayed.  The rest of the datepickers do not change their value when clicking on the buttons, instead they simply close and when re-opened they continue to show the column date value.

The first datepicker when re-opened shows the date of the button that was clicked.  After a postback the datepicker refreshes with the columns date value again.

I was trying to find a way to disable the calender buttons from being clickable but still showing as I want the visual feedback  that the datepicker provides.  I couldn't see option in the API to get this done.

The closest I have come to a solution is to use the minDate and maxDate options and set this to the column data value.  I thought I had found success with this but alas it only worked for the datepicker in the first row!  After using the minDate and maxDate options all of the datepickers showed the same date as the first datepicker.  

So, i'm still stuck trying to find a way to make the datepickers show only the date from the row and not have that change when the calender buttons are clicked.  Is there a way to do this by disabling the buttons, making them readonly, or by using the minDate/maxDate options without it causing all datepickers to show the same date?

Any advice much appreciated :D


heres the code i'm using for the datepicker:

  1.     $(function () {
  2.     $(".picker").datepicker({
  3.     showOn: "button",
  4.     buttonImage: "/images/calendar2.png",
  5.     buttonImageOnly: true,
  6.     buttonText: "calender",
  7.     });
  8.     $(".picker").datepicker("setDate", $(".picker"))
  9.     });
  10.    
  11.     
  12.     var prm = Sys.WebForms.PageRequestManager.getInstance();
  13.     if (prm != null) {
  14.     prm.add_endRequest(function (sender, e) {
  15.     if (sender._postBackSettings.panelsToUpdate != null) {
  16.     $(".picker").datepicker({
  17.     showOn: "button",
  18.     buttonImage: "/images/calendar2.png",
  19.     buttonImageOnly: true,
  20.     buttonText: "calender",
  21.     });