Override Jquery UI Datepicker Div Visible Strangely on First Page Load

Override jQuery UI Datepicker div visible strangely on first page load.

I had the same problem and while some of the above solutions work, the easiest fix of all is to add this to your css:

#ui-datepicker-div {display: none;}

This basically hides the realigned datepicker element when it cannot be binded to an existing invisible element. You hide it, but it will be initialized again when you click on an element that needs to display the datepicker. Upon re-initialization, the datepicker element with id #ui-datepicker-div will have the correct position.

Jquery datePicker

Overriding the _showDatepicker function seems to work:

(function() {
var orig = jQuery.datepicker._showDatepicker;

jQuery.datepicker._showDatepicker = function(input){
    orig.apply(this, arguments);
    $('#ui-datepicker-div').css('top', '100px');
}
})();

jQuery Datepicker shows in upper left corner

You can actually use the $.datepicker.setDefaults() if you want all the datepicker to use a particular locale:

$.datepicker.setDefaults($.datepicker.regional['en-GB']);
$("#fromdate, #todate").datepicker({"dateFormat": 'yy-mm-dd'});

See this in action: http://jsfiddle.net/william/NwPWg/1/.

datepicker and buttonImage

Try setting the vertical-alignment of the image.

$("img.ui-datepicker-trigger").css("vertical-align", "middle");

JQuery UI datepicker how to show next prev arrows for month navigation?

Sounds like the graphics aren't being loaded properly. By default jQuery UI expects the folder with images to be a subfolder of the folder where the css file is. Use a tool such as firebug ('Net' tab) to detect the requests for the image with the arrows, and see what URL it's trying to load it from.

JQuery DatePicker bundled control can't be included in other controls

Hard to know without seeing the generated HTML, but my first guess would be that your control isn't applying class names directly to the <input> field... or you are depending on ids in some way (which would likely change when embedded in a user control).

---

In the HTML you've posted, these appear to three relevant portions:

Block #1 (control: datePicker)

<div id="datePicker_Div0" class="AdminRowOdd DERow">
    <div id="datePicker_Div1" class="DELabel">
        <span id="datePicker_DateLabel">Date</span>
    </div>
    <div id="datePicker_Div2" class="DEInput datePicker">
        <input name="datePicker$DateSelector" type="text" 
           onchange="javascript:setTimeout('__doPostBack(\'datePicker$DateSelector\',\'\')', 0)" 
           onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" 
           id="datePicker_DateSelector" style="width:80px;" />
        <select name="datePicker$languageSelector" 
           onchange="javascript:setTimeout('__doPostBack(\'datePicker$languageSelector\',\'\')', 0)" 
           id="datePicker_languageSelector">
                <option selected="selected" value="en-US">en-US</option>
                <option value="fr-CA">fr-CA</option>
                <option value="fr-FR">fr-FR</option>
                <option value="es-ES">es-ES</option>
                <option value="es-MX">es-MX</option>
        </select>
    </div>
</div>

...

Block #2 (control: date1)

<div id="date1_Div0" class="AdminRowOdd DERow">
   <div id="date1_Div1" class="DELabel">
       <span id="date1_DateLabel">Date</span>
   </div>
   <div id="date1_Div2" class="DEInput datePicker">
      <input name="date1$DateSelector" type="text" 
         onchange="javascript:setTimeout('__doPostBack(\'date1$DateSelector\',\'\')', 0)" 
         onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" 
         id="date1_DateSelector" style="width:80px;" />
       <select name="date1$languageSelector" 
         onchange="javascript:setTimeout('__doPostBack(\'date1$languageSelector\',\'\')', 0)" 
         id="date1_languageSelector">
         <option selected="selected" value="en-US">en-US</option>
         <option value="fr-CA">fr-CA</option>
         <option value="fr-FR">fr-FR</option>
         <option value="es-ES">es-ES</option>
         <option value="es-MX">es-MX</option>
      </select>
   </div>
</div>

...

Block #3 (jQuery datepicker wireup)

<script type="text/javascript">
   //<![CDATA[
   jQuery(document).ready( function() 
   {
      // matches input element for first control only (id selector)
      var cal = jQuery('#datePicker_DateSelector')
         .datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
   });
   Sys.Application.initialize();
   //]]>
</script>

The problem arises from this last block. The selector is specific to the first control, matching by ID. If it was modified to include a separate call for the second control...

      var cal = jQuery('#datePicker_DateSelector')
         .datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
      var cal2 = jQuery('#date1_DateSelector')
         .datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});

...or a more general-purpose selector...

      // matches all text input elements that are descendants of 
      // a div element with a class of datePicker
      var cal = jQuery('div.datePicker input:text')
         .datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});

...then things should work as expected.

jQuery custom accordion with first div opens on the initial load - issues with modifying arrow images

This should fix your problem.

http://jsfiddle.net/GHLM9/

headers.click(function (e) {

    e.preventDefault();
    var panel = $(this).parent('div').next('div');
    var isOpen = panel.is(':visible');
    // open or close as necessary
    contentAreas.slideUp();
    panel[isOpen ? 'slideUp' : 'slideDown']()
    // trigger the correct custom event
    .trigger(isOpen ? 'hide' : 'show');
    $('.sectionDown a').not(this).removeClass('close');
    $(this).toggleClass('close');

    // stop the link from causing a pagescroll
    return false;
});

---

Related Topics