API tools faq
paste
Advertisement
Ultroman

Datepicker instantiation - Collaborating datepickers

Ultroman
Oct 12th, 2014
1,241
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 20.98 KB | None | 0 0
raw download clone embed print report
  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
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!