Advertisement
Ultroman

Datepicker instantiation - Collaborating datepickers

Oct 12th, 2014
812
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // These two datepickers will help each other (and the user) to select a time period.
  2. // The 'StartDate' will always be before 'EndDate', and 'EndDate' will always be after 'StartDate'.
  3. // You can remove the 'minDate' restriction on 'EndDate', by commenting out or removing the following line in
  4. // the 'onClose' function:
  5. // $('#EndDate').datepicker('option', 'minDate', newMinDate);
  6.  
  7.             $('#StartDate').datepicker({
  8.                 dateFormat: 'yy-mm-dd',
  9.                 changeMonth: true,
  10.                 changeYear: true,
  11.                 showButtonPanel: true,
  12.                 showMonthAfterYear: true,
  13.                 showWeek: true,
  14.                 showAnim: "drop",
  15.                 constrainInput: true,
  16.                 minDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
  17.                 maxDate: new Date((new Date().getFullYear() + 2), new Date().getMonth(), new Date().getDate()),
  18.                 defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
  19.  
  20.                 onClose: function (dateText, inst) {
  21.                     // When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
  22.                     // updated with a valid date-string. They will always pass.
  23.                     // This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
  24.                     // and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
  25.                     try {
  26.                         // If datepicker can parse the date using our formatstring, the instance will automatically parse
  27.                         // and apply it for us (after the onClose is done). Otherwise this will throw an exception, and go to our catch.
  28.                         var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
  29.  
  30.                         if (typedDate == null)throw "No date selected";
  31.  
  32.                         // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
  33.                         // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
  34.                         var minDate = $(this).datepicker("option", "minDate");
  35.                         var maxDate = $(this).datepicker("option", "maxDate");
  36.                         if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
  37.                         if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
  38.  
  39.                         // We update the default date, because the date seems valid.
  40.                         // We do not need to manually update the input-field, as datepicker has already done this automatically.
  41.                         $(this).datepicker('option', 'defaultDate', typedDate);
  42.                     }
  43.                     catch (err) {
  44.                         // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
  45.                         // a new valid date, by clicking on a day.
  46.                         // Instead, we set the current date, as well as the value of the input-field, to the last selected (and
  47.                         // accepted/validated) date from the datepicker, by getting its default date. This only works, because
  48.                         // we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
  49.                         // and 'onClose'.
  50.                         var date = $(this).datepicker('option', 'defaultDate');
  51.                         $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
  52.                         $(this).datepicker('setDate', date);
  53.                     }
  54.  
  55.                     /*
  56.                      * This last bit of 'onClose' is only for when you want to update the properties of another datepicker, to match the date
  57.                      * being set on this datepicker. This is for when you want to use two datepickers to define a timeperiod, and #EndDate should
  58.                      * never have a date set to before #StartDate's date.
  59.                      */
  60.                     var newMinDate = $(this).datepicker('getDate');
  61.                     // If the end-date datepicker hasn't been opened yet, then 'getDate' will return null in here, even if you've initialized it using 'setDate'
  62.                     // later on in document.ready.
  63.                     // Therefore, we need to initialize its date with its default value here, if its date is null. Otherwise we will see weird behavior.
  64.                     // NOTE: 'getDate' will NOT return null, if you call it from an outside function, after you've initialized it using 'setDate'.
  65.                     // It is only a problem inside internal datepicker functions. That's some weirdness for you right there!
  66.                     if ($('#EndDate').datepicker('getDate') == null) {
  67.                         // If the date is null, we set #EndDate to its defaultDate.
  68.                         $('#EndDate').datepicker('setDate', $('#EndDate').datepicker('option', 'defaultDate'));
  69.                     }
  70.  
  71.                     // Then we set #end's minDate to be the date we just selected in this datepicker.
  72.                     // NOTE: If you remove just this line, then the #end datepicker won't be restricted, by having its minDate set.
  73.                     // The code after this line will still help the user, by changing the selected and default dates in #end, to one that is
  74.                     // compatible with 'newMinDate', if it is currently set to be before 'newMinDate'.
  75.                     // If you want a less restrictive, yet STILL error-protected design, feel free to remove this line.
  76.                     $('#EndDate').datepicker('option', 'minDate', newMinDate);
  77.  
  78.                     // If #end's selected date is before the new minDate, we set its defaultDate and current date to the new minDate. Otherwise, we leave it be.
  79.                     if($('#EndDate').datepicker('option', 'defaultDate') < newMinDate) {
  80.                         $('#EndDate').datepicker('option', 'defaultDate', newMinDate);
  81.                         $('#EndDate').datepicker('setDate', newMinDate);
  82.                     }
  83.                 },
  84.  
  85.                 beforeShow: function (input, inst) {
  86.                     // beforeShow is particularly irritating when initializing the input-field with a date-string.
  87.                     // The date-string will be parsed, and used to set the currently selected date in the datepicker.
  88.                     // BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
  89.                     // automatically updated, only the internal selected date, until you choose a new date (or, because
  90.                     // of our onClose function, whenever you click close or click outside the datepicker).
  91.                     // We want the input-field to always show the date that is currently chosen in our datepicker,
  92.                     // so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
  93.                     // the primary ones: invalid date-format; date is too early; date is too late.
  94.                     try {
  95.                         // If datepicker can parse the date using our formatstring, the instance will automatically parse
  96.                         // and apply it for us. Otherwise this will throw an exception, and go to our catch.
  97.                         var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
  98.                         // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
  99.  
  100.                         if (typedDate == null)throw "No date selected";
  101.  
  102.                         // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
  103.                         var minDate = $(this).datepicker("option", "minDate");
  104.                         var maxDate = $(this).datepicker("option", "maxDate");
  105.                         if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
  106.                         if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
  107.  
  108.                         // We update the default date, because the date seems valid.
  109.                         // We also manually update the input-field, as datepicker does not automatically do this when opened.
  110.                         $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
  111.                         $(this).datepicker('option', 'defaultDate', typedDate);
  112.                     }
  113.                     catch (err) {
  114.                         // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
  115.                         // a new valid date, by clicking on a day.
  116.                         // We want the same behavior when opening the datepicker, so we set the current date, as well as the value
  117.                         // of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
  118.                         // its default date. This only works, because we manually change the default date of the datepicker whenever
  119.                         // a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
  120.                         var date = $(this).datepicker('option', 'defaultDate');
  121.                         $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
  122.                         $(this).datepicker('setDate', date);
  123.                     }
  124.  
  125.                     /*
  126.                      * This last bit of beforeShow is only for when you want to help the user, by defaulting to a date that is compatible with the
  127.                      * date already selected in an end-datepicker. Meaning, if you select a date in the end-datepicker first, and then open this one,
  128.                      * you want this one to default to a date before the end-datepicker's date.
  129.                      */
  130.                     var endDate = $('#EndDate').datepicker('getDate');
  131.                     if (endDate !== null && endDate !== undefined) {
  132.                         var thisDate = $(this).datepicker("getDate");
  133.                         if (thisDate !== null) {
  134.                             if (thisDate > endDate) {
  135.                                 $(this).datepicker('option', 'defaultDate', endDate);
  136.                                 $(this).datepicker('setDate', endDate);
  137.                             }
  138.                         } else {
  139.                             $(this).datepicker('option', 'defaultDate', endDate);
  140.                             $(this).datepicker('setDate', endDate);
  141.                         }
  142.                     }
  143.                 }
  144.             });
  145.  
  146.             $('#EndDate').datepicker({
  147.                 dateFormat: 'yy-mm-dd',
  148.                 changeMonth: true,
  149.                 changeYear: true,
  150.                 showButtonPanel: true,
  151.                 showMonthAfterYear: true,
  152.                 showWeek: true,
  153.                 showAnim: "drop",
  154.                 constrainInput: true,
  155.                 minDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
  156.                 maxDate: new Date((new Date().getFullYear() + 2), new Date().getMonth(), new Date().getDate()),
  157.                 defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
  158.  
  159.                 onClose: function (dateText, inst) {
  160.                     // When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
  161.                     // updated with a valid date-string. They will always pass.
  162.                     // This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
  163.                     // and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
  164.                     try {
  165.                         // If datepicker can parse the date using our formatstring, the instance will automatically parse
  166.                         // and apply it for us (after the onClose is done). Otherwise this will throw an exception, and go to our catch.
  167.                         var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
  168.  
  169.                         if (typedDate == null)throw "No date selected";
  170.  
  171.                         // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
  172.                         // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
  173.                         var minDate = $(this).datepicker("option", "minDate");
  174.                         var maxDate = $(this).datepicker("option", "maxDate");
  175.                         if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
  176.                         if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
  177.  
  178.                         // We update the default date, because the date seems valid.
  179.                         // We do not need to manually update the input-field, as datepicker has already done this automatically.
  180.                         $(this).datepicker('option', 'defaultDate', typedDate);
  181.                     }
  182.                     catch (err) {
  183.                         // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
  184.                         // a new valid date, by clicking on a day.
  185.                         // Instead, we set the current date, as well as the value of the input-field, to the last selected (and
  186.                         // accepted/validated) date from the datepicker, by getting its default date. This only works, because
  187.                         // we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
  188.                         // and 'onClose'.
  189.                         var date = $(this).datepicker('option', 'defaultDate');
  190.                         $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
  191.                         $(this).datepicker('setDate', date);
  192.                     }
  193.  
  194.                     /*
  195.                      * This last bit of 'onClose' is only for when you want to update the selected date of a start-datepicker, to match the date
  196.                      * being set on this end-datepicker. We merely help the user, by setting the default and current dates, to the same date as the
  197.                      * one we've just chosen, BUT ONLY IF the date of the start-datepicker is after (and therefore not compatible) with the
  198.                      * newly selected date for this datepicker.
  199.                      */
  200.                     var newMaxDate = $(this).datepicker('getDate');
  201.                     if ($('#StartDate').datepicker('getDate') == null) {
  202.                         // If the date is null, we set #start to its defaultDate.
  203.                         $('#StartDate').datepicker('setDate', $('#StartDate').datepicker('option', 'defaultDate'));
  204.                     }
  205.  
  206.                     if($('#StartDate').datepicker('getDate') > newMaxDate) {
  207.                         $('#StartDate').datepicker('option', 'defaultDate', newMaxDate);
  208.                         $('#StartDate').datepicker('setDate', newMaxDate);
  209.                     }
  210.                 },
  211.  
  212.                 beforeShow: function (input, inst) {
  213.                     // beforeShow is particularly irritating when initializing the input-field with a date-string.
  214.                     // The date-string will be parsed, and used to set the currently selected date in the datepicker.
  215.                     // BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
  216.                     // automatically updated, only the internal selected date, until you choose a new date (or, because
  217.                     // of our onClose function, whenever you click close or click outside the datepicker).
  218.                     // We want the input-field to always show the date that is currently chosen in our datepicker,
  219.                     // so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
  220.                     // the primary ones: invalid date-format; date is too early; date is too late.
  221.                     try {
  222.                         // If datepicker can parse the date using our formatstring, the instance will automatically parse
  223.                         // and apply it for us. Otherwise this will throw an exception, and go to our catch.
  224.                         var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
  225.  
  226.                         if (typedDate == null)throw "No date selected";
  227.  
  228.                         // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
  229.                         // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
  230.                         var minDate = $(this).datepicker("option", "minDate");
  231.                         var maxDate = $(this).datepicker("option", "maxDate");
  232.                         if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
  233.                         if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
  234.  
  235.                         // We update the input-field, and the default date, because the date seems valid.
  236.                         // We also manually update the input-field, as datepicker does not automatically do this when opened.
  237.                         $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
  238.                         $(this).datepicker('option', 'defaultDate', typedDate);
  239.                     }
  240.                     catch (err) {
  241.                         // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
  242.                         // a new valid date, by clicking on a day.
  243.                         // We want the same behavior when opening the datepicker, so we set the current date, as well as the value
  244.                         // of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
  245.                         // its default date. This only works, because we manually change the default date of the datepicker whenever
  246.                         // a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
  247.                         var date = $(this).datepicker('option', 'defaultDate');
  248.                         $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
  249.                         $(this).datepicker('setDate', date);
  250.                     }
  251.  
  252.                     /*
  253.                      * This last bit of beforeShow is only for when you want to help the user, by defaulting to a date that is compatible with the
  254.                      * date already selected in a start-datepicker.
  255.                      * Meaning, if the default date in the start-datepicker is after the date in this end-datepicker, and you onpe this one first,
  256.                      * you want the start-datepicker to default to a date before the end-datepicker's date. It's mostly a fail-safe.
  257.                      */
  258.                     if ($('#StartDate').datepicker('getDate') == null) {
  259.                         // If the date is null, we set #start to its defaultDate.
  260.                         $('#StartDate').datepicker('setDate', $('#StartDate').datepicker('option', 'defaultDate'));
  261.                     }
  262.  
  263.                     var startDate = $('#StartDate').datepicker('getDate');
  264.  
  265.                     if (startDate !== null && startDate !== undefined) {
  266.                         var thisDate = $(this).datepicker("getDate");
  267.                         if (thisDate !== null) {
  268.                             if (thisDate < startDate) {
  269.                                 $(this).datepicker('option', 'defaultDate', startDate);
  270.                                 $(this).datepicker('setDate', startDate);
  271.                             }
  272.                         } else {
  273.                             $(this).datepicker('option', 'defaultDate', startDate);
  274.                             $(this).datepicker('setDate', startDate);
  275.                         }
  276.                     }
  277.                 }
  278.             });
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement