www.webdeveloper.com
Results 1 to 3 of 3

Thread: JQuery datepicker shows blank (white) text when on a modal dialog in IE9

Hybrid View

  1. #1
    Join Date
    Jun 2006
    Posts
    384

    JQuery datepicker shows blank (white) text when on a modal dialog in IE9

    Hi all, not posted here in a while, but have an issue I can't figure out.
    I have the following for use as a JQuery modal dialog (keeping it as simple as possible) :

    HTML Code:
    <div id="diaryEntry" title="Diary Entry" style="display: none; width:600px">        
            <input type="text" id="txtDiaryDate" style="color:#000000" />        
    </div>
    I set the textbox to be a datepicker in a script section in the head of the page :

    Code:
     
    $(function () {
          $("#txtDiaryDate").datepicker();          
    });
    I have a function which displays the dialog, which is triggered by a click on an icon :

    Code:
      
    function AddDiary(contactID) {
          var psModal = $("#diaryEntry");          
          psModal.dialog({ modal: true, width: "300px", height: "auto" });
    }
    I also have the following style / scripts in my head section :

    HTML Code:
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />  
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>  
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>  
    The modal dialog is displayed, it contains the datepicker, but, in IE9, when I select a date from the datepicker the text in the box in invisible (i can select the 'invisible' text and copy it and can paste the selected date into something else, so the action of selecting a date is working). It works fine in both Opera and FF.

    Any ideas would be much appreciated, thanks.

  2. #2
    Join Date
    Jun 2006
    Posts
    384
    Not a solution, but I've given the datepicker a buttonImage to click on and made the textbox not visible (the image stays visible). I also added a div next to the text box, and set the onchange function of the text box to display the selected date in the neighbouring div, which makes the functionality similar and doesn't allow the user to enter an incorrect date manually.

    This is not ideal as it's a lengthy workaround for what should be simple functionality, so any ideas as how to fix the issue still welcome. For the time being I can make do.

    Edit : spinner and timespinner suffer from exactly the same issue.
    Last edited by cridley; 02-21-2013 at 06:13 AM.

  3. #3
    Join Date
    Jun 2006
    Posts
    384
    Someone please delete this thread, CSS issue.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles