jQuery Forum

The problem is because the calendar list is actually broken into two parts, when the URL with a # and id ending is displayed, the page is scrolls to the top of the second table, hiding the calendar title and the headers in the fist table.  There is enough space to show the title and both tables, so I want to scroll the page up to show the calendar title, headings, and the second table.

I added some code to the bottom of the page, that tries to do this after a lengthy delay, but it doesn't seem to work. I used Chrome's Inspect feature and can see that the variables are being properly set, and that the code does run through the lines that should scroll to the calendar's title, but this doesn't happen.  Also, I don't get any errors in the console.log. 

I'm using these statements:

If this isn't the best cross-browser way to do this please let me know.

When I tried this using the location.href, the page does jump to the calendar title, but then I loose the row in the table that is supposed to be seen.

Finally, this same page can be shown without using the # and id, in which case I want the page to show from its top and not automatically scroll down to the calendar list of events.

I'm running datepicker controls on several pages and I want to put as much of the datepicker management in one place/file as I can, so to this end I have created a wrapper for datepicker, that loads the datepicker library and contains several functions that patch datepicker features/functionality to work the way that I need.  The wrapper file is loaded in each page using the normal <script src> tag, after the JQuery library is loaded.  Inside the wrapper file the datepicker library is loaded using the JQuery getScript mechanism, as follows:

      //

      // import the "jquery_ui_datepicker_1.12.0.js" script

      //

      $.getScript( 'jquery_ui_datepicker_1.12.0.js' )

         .done( function( script, textStatus ) {

           // successful load - run datepicker library initialization code here.

           // run date picker patching code here.

         } )

         .fail( function( jqxhr, settings, exception ) {

           alert( 'Triggered ajaxError handler.' );

         } );

      // define datepicker patching functions starting here.

This allows me to do an include within an include, but in order for the datepicker to work in the same way as if it were loaded using the <script src> tag I need the getScript's call-back feature to call all of the functions and in-line code that would have been normally run using the <script src> tag.

Anyone have an idea how I can do this, short of modifying the content of the datepicker library?

One thought is: Would it be possible to either tell getScript to put the datepicker library it loads into a container that I provide or get the container that it creates?  Either way knowing the container, I should be able to wrap the container that the datepicker is in with a function container and call the function.  I don't know how to actually do any of this, but the concept doesn't should too difficult.

Looking forward to your ideas and, hopefully, examples.

Thanks,

Howard Brown

  http://jsfiddle.net/howardb1/2qq7canm/

From what I understand, the beforeShow 'event' calls the function assigned to it before actually displaying the calendar part of the datepicker.  So in that function I put an alert( 'hi' ); statement, but it never shows.

The demo shows this in an always open inline datepicker calendar, but I've tried this in a 'regular' datepicker and text box field, too, and both ways fail to show the alert.

I'm using the most current JQuery,UI datepicker and Chrome, running Windows 10.

Thank you,

Howard Brown 

1) When I first open a page containing a datepicker, if I press the enter key in the datepicker input field or type an incomplete date, say 1 or 12, into the datepicker's text box while the calendar is showing and then press enter key, the current date overwrites the value I typed into the field.  This doesn't happen when I type in a valid, complete, date with either two or four digits in the year.  It only happens the first time I do this.  Returning to the field and entering an invalid date or partial date isn't again replaced by the current date, and the code that I've attached to the datepicker's change and blur events to highlight an invalid date and holds the focus in the field works.  Replacing the empty value with the current date would be fine, but replacing the invalid date shouldn't never happen.  This also happens in the datepicker demo.

2) The defaultDate: +7 option shown in the API Documentation for Datepicker doesn't highlight a date in the calendar, as described.  Note that for the first issue, I'm not using this feature.  There isn't a demo on this option, so I can't say if this happens only on my page or not.

I am running Chrome Version 51.0.2704.103 m on a Windows 10 system. Here is the datepicker initialization code that I'm using:

Here is the input field that I'm using for the datepicker:

The question, how do I style the Today button to look like the Close button?  Right now it looks inactive, even though it works when I click it.