Extending the Google CDN version of jquery to add datepicker

Question

I'm using jqueryUI solely for the datepicker feature. It's great if you can get away with using plain jquery because then you can import it from Google's CDN, which is potentially faster than your own CDN (if any) and heightens the chance the user will already have it cached, but you can't do this with jqueryUI. I'm wondering, since jqueryUI is just jquery with some extra stuff on top of it (?), how feasible would it be to import regular jquery from Google and then .extend() the datepicker feature on to it with your own js?

The logic for wanting to do that is that jqueryUI with datepicker is 48.5K minimized and the user will not have it cached on first page load. If the datepicker portion of the code is just 5KB minimized (a guess), conceivably everything needed for datepicker could be loaded with just 5KB of your own hosted js if the user has already hit a page that has jquery imported from Google CDN. Maybe it's a lot of work to shave off only ~40KB (for only the case where a user has jquery primed from Google), but sometimes kilobytes count. The only things I'm uncertain about are if/how datepicker can actually be .extend()'ed on to regular jquery or if jqueryUI is fundamentally different. I know there are standalone versions of jquery datepicker, but I'm sort of dependant on the jqueryUI implementation of datepicker... I just don't want the huge file size.

Answer 1

Sure, it works no problem.

<!--   ====== get the google CDN-provided jQuery ====== -->
<script type="text/javascript"
        src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'&gt;&lt;/script&gt;

<!-- ====== get local jQuery UI datepicker ====== -->
<script type="text/javascript" 
              src='script/jquery-ui-1.7.2.custom.min.js'></script>

<!-- ======== also get the local CSS for datepicker ======= -->
<link rel="stylesheet" type="text/css" 
    href="script/ui-v1.7.2-datepicker/css/ui-lightness/jquery-ui-1.7.2.custom.css"></link>

<!-- ====== specify my own styling for the page ====== -->
<style type="text/css">
  * {
     font-size: 10pt;
  }

  ....etc....

</style>