Using jQuery Widgets

jQuery is a framework that makes it easier to use JavaScript. The optional UI functionality is impressive. Instead of JavaScript's document.getElementById("s1"), use $("#s1"), a shorthand for jQuery("#s1"). We demonstrate the Datepicker and Tabs widgets. In the style section of the code that follows the demo, !important raises the priority of this particular setting to override others elsewhere and here the exclamation mark is not acting as the not operator! See the tabbed pages for more information about the widgets.

Demonstration

If this demo does not work in your current browser, try another such as Chrome. If you see no display at school, the security system might have blocked it. You can try instead this direct link to the program running on its own page.

jQueryUI_Demo.html

The Code

<!DOCTYPE html>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<style>
.ui-datepicker { 
  font-size: 14px !important
}
  
.ui-tabs { 
  font-size: 14px !important
}
</style>
<script>
$(function() {
  var dateFmt = 'D, d M yy';
  var today = new Date();
  var millisecsPerDay = 1000 * 60 * 60 * 24;
  var daysSincePublished = Math.floor((today - new Date(2014, 10, 28)) / millisecsPerDay);
  $("#age").text("Days since page first published: " + daysSincePublished);
  
  $("#date").datepicker({
    // beforeShowDay: $.datepicker.noWeekends,
    dateFormat: dateFmt,
    onClose: function(selectedDate ) {
               var selDate = $.datepicker.parseDate(dateFmt, selectedDate);                          
               var elapsed = Math.floor((today - selDate) / millisecsPerDay);
               var msg;
               if (selectedDate) { 
                 if (elapsed == 0) 
                   msg = "You have selected today's date."
                 else if (elapsed > 0)
                   msg = "Your date was " + elapsed + " days ago."                 
                 else 
                   msg = "Your date is " + Math.abs(elapsed) + " days in the future.";                 
                 $("#result").text(msg);
               }
             }
  });

  $("#tabs").tabs();  
})
</script>
<p id = "age"></p>
<p>Please select a date from the calendar that will pop-up when you click in the box.</p>
<input type = "text" name = "date" id = "date">
<p id = "result"></p>
<div id="tabs">
  <ul>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#links">Links</a></li>
    <li><a href="#keys">Key presses for Datepicker</a></li>
  </ul>
  <div id = "intro">
    <p>Using a Datepicker ensures that only valid dates are selected. We have commented-out a line of code
      for the Datepicker control that allows the user to select weekdays only. You can experiment with the date
      format to customise the text that the Datepicker puts into the input box. jQuery offers a wide range of themes for those of you that
      are really keen to impress.</p>
  </div>
  <div id = "links">
    <p>Tab control: <a href = "http://jqueryui.com/tabs/" target = "_blank">http://jqueryui.com/tabs/</a></p>
    <p>Datepicker <a href = "http://api.jqueryui.com/datepicker/" target = "_blank">documentation</a> and 
       <a href="http://jqueryui.com/datepicker/#date-range">example</a></p>        
    <p><a href = "http://www.aspsnippets.com/Articles/Resize-or-Reduce-Font-Size-of-jQuery-UI-DatePicker-plugin-using-CSS.aspx" 
          target = "_blank">Font size</a> of jQuery controls</p>   
    <p>Date handling: <a href = 
       "http://stackoverflow.com/questions/542938/how-do-i-get-the-number-of-days-between-two-dates-in-javascriptstackoverflow" 
       target = "_blank">stackoverflow</a></p>
  </div>
  <div id = "keys">
    <ul>
      <li>PAGE UP: Move to the previous month.</li>  
      <li>PAGE DOWN: Move to the next month.</li>
      <li><b>CTRL +</b>
        <ul>
          <li>PAGE UP: Move to the previous year.</li>
          <li>PAGE DOWN: Move to the next year.</li>
          <li>HOME: Move to the current month.</li>
          <li>LEFT: Move to the previous day.</li>
          <li>RIGHT: Move to the next day.</li>
          <li>UP: Move to the previous week.</li>
          <li>DOWN: Move to the next week.</li>  
        </ul></li>
    </ul>
  </div>
</div>    

Programming - a skill for life!

How to apply your knowledge of Pascal when learning JavaScript