Advertisement
Ultroman

Monthpicker instantiation - Collaborating monthpickers

Oct 12th, 2014
855
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // This monthpicker requires my monthpicker.js and monthpicker.css available here: https://pastebin.com/u/Ultroman
  2. // If you want to see the instructions, go to this StackOverflow post: https://stackoverflow.com/a/26011321/1289974
  3.         // The value retrieved from this monthpicker, is always the FIRST day of the selected month. Starts at the current month.
  4.         $('#start').monthpicker({
  5.             dateFormat: 'MM yy',
  6.             changeMonth: true,
  7.             changeYear: true,
  8.             showMonthAfterYear: true,
  9.             showAnim: "drop",
  10.             constrainInput: true,
  11.             yearRange: "-100Y:+10Y",
  12.             minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
  13.             maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
  14.             defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
  15.  
  16.             // Datepicker functions
  17.             onClose: function (dateText, inst) {
  18.                 var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
  19.                 $(this).monthpicker('option', 'defaultDate', date);
  20.                 $(this).monthpicker('setDate', date);
  21.  
  22.  
  23.                 /*
  24.                  * This last bit of 'onClose' is only for when you want to update the properties of another monthpicker, to match the date
  25.                  * being set on this monthpicker. This is for when you want to use two monthpickers to define a timeperiod, and #end should
  26.                  * never have a date set to before #start's date.
  27.                  */
  28.                 var newMinDate = new Date(inst.selectedYear, inst.selectedMonth + 1, 0);
  29.                 // If the end-date monthpicker hasn't been opened yet, then 'getDate' will return null in here, even if you've initialized it using 'setDate'
  30.                 // later on in document.ready.
  31.                 // Therefore, we need to initialize its date with its default value here, if its date is null. Otherwise we will see weird behavior.
  32.                 // NOTE: 'getDate' will NOT return null, if you call it from an outside function, after you've initialized it using 'setDate'.
  33.                 // It is only a problem inside internal monthpicker functions. That's some weirdness for you right there!
  34.                 if ($('#end').monthpicker('getDate') == null) {
  35.                     // If the date is null, we set #end to its defaultDate.
  36.                     $('#end').monthpicker('setDate', $('#end').monthpicker('option', 'defaultDate'));
  37.                 }
  38.  
  39.                 // Then we set #end's minDate to be the date we just selected in this monthpicker.
  40.                 // NOTE: If you remove just this line, then the #end monthpicker won't be restricted, by having its minDate set.
  41.                 // The code after this line will still help the user, by changing the selected and default dates in #end, to one that is
  42.                 // compatible with 'newMinDate', if it is currently set to be before 'newMinDate'.
  43.                 // If you want a less restrictive, yet STILL error-protected design, feel free to remove this line.
  44.                 $('#end').monthpicker('option', 'minDate', newMinDate);
  45.  
  46.                 // 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.
  47.                 if($('#end').monthpicker('option', 'defaultDate') < newMinDate) {
  48.                     $('#end').monthpicker('option', 'defaultDate', newMinDate);
  49.                     $('#end').monthpicker('setDate', newMinDate);
  50.                 }
  51.             },
  52.  
  53.             beforeShow: function (input, inst) {
  54.                 if ($(this).monthpicker("getDate") !== null) {
  55.                     // Making sure that the date set is the first of the month.
  56.                     if($(this).monthpicker("getDate").getDate() !== 1){
  57.                         var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
  58.                         $(this).monthpicker('option', 'defaultDate', date);
  59.                         $(this).monthpicker('setDate', date);
  60.                     }
  61.                 } else {
  62.                     // If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
  63.                     $(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
  64.                 }
  65.  
  66.  
  67.                 /*
  68.                  * 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
  69.                  * date already selected in an end-monthpicker. Meaning, if you select a date in the end-monthpicker first, and then open this one,
  70.                  * you want this one to default to a date before the end-monthpicker's date.
  71.                  */
  72.                 var endDate = $('#end').monthpicker('getDate');
  73.                 if (endDate !== null && endDate !== undefined) {
  74.                     var compatibleStartDate = new Date(endDate.getFullYear(), endDate.getMonth(), 1);
  75.                     var thisDate = $(this).monthpicker("getDate");
  76.                     if (thisDate !== null) {
  77.                         if (thisDate > compatibleStartDate) {
  78.                             $(this).monthpicker('option', 'defaultDate', compatibleStartDate);
  79.                             $(this).monthpicker('setDate', compatibleStartDate);
  80.                         }
  81.                     } else {
  82.                         $(this).monthpicker('option', 'defaultDate', compatibleStartDate);
  83.                         $(this).monthpicker('setDate', compatibleStartDate);
  84.                     }
  85.                 }
  86.             },
  87.             // Special monthpicker function!
  88.             onChangeMonthYear: function(year, month, inst) {
  89.                 $(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
  90.             }
  91.         });
  92.  
  93.         // The value retrieved from this monthpicker, is always the LAST day of the selected month.
  94.     // Starts at the current month + 2, to get the current month and the next two months (a quarter).
  95.         $('#end').monthpicker({
  96.             dateFormat: 'MM yy',
  97.             changeMonth: true,
  98.             changeYear: true,
  99.             showMonthAfterYear: true,
  100.             showAnim: "drop",
  101.             constrainInput: true,
  102.             yearRange: "-100Y:+10Y",
  103.             minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth() + 1, 0),
  104.             maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth() + 1, 0),
  105.             defaultDate: new Date(new Date().getFullYear(), new Date().getMonth() + 3, 0),
  106.  
  107.             onClose: function (dateText, inst) {
  108.                 var date = new Date(inst.selectedYear, inst.selectedMonth + 1, 0);
  109.                 $(this).monthpicker('option', 'defaultDate', date);
  110.                 $(this).monthpicker('setDate', date);
  111.  
  112.  
  113.  
  114.    
  115.                 var newMaxDate = new Date(inst.selectedYear, inst.selectedMonth, 1);
  116.                 if ($('#start').monthpicker('getDate') == null) {
  117.                     // If the date is null, we set #start to its defaultDate.
  118.                     $('#start').monthpicker('setDate', $('#start').monthpicker('option', 'defaultDate'));
  119.                 }
  120.  
  121.                 if($('#start').monthpicker('getDate') > newMaxDate) {
  122.                     $('#start').monthpicker('option', 'defaultDate', newMaxDate);
  123.                     $('#start').monthpicker('setDate', newMaxDate);
  124.                 }
  125.             },
  126.  
  127.             beforeShow: function (input, inst) {
  128.                 if ($(this).monthpicker("getDate") !== null) {
  129.                     // Making sure that the date set is the last of the month.
  130.                     var date = new Date(inst.selectedYear, inst.selectedMonth + 1, 0);
  131.                     if($(this).monthpicker("getDate").getDate() !== date){
  132.                         $(this).monthpicker('option', 'defaultDate', date);
  133.                         $(this).monthpicker('setDate', date);
  134.                     }
  135.                 } else {
  136.                     // If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the last of the month!
  137.                     $(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
  138.                 }
  139.  
  140.  
  141.                 /*
  142.                  * 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
  143.                  * date already selected in a start-monthpicker.
  144.                  * Meaning, if the default date in the start-monthpicker is after the date in this end-monthpicker, and you open this one first,
  145.                  * you want the start-monthpicker to default to a date before the end-monthpicker's date. It's mostly a fail-safe.
  146.                  */
  147.                 if ($('#start').monthpicker('getDate') == null) {
  148.                     // If the date is null, we set #start to its defaultDate.
  149.                     $('#start').monthpicker('setDate', $('#start').monthpicker('option', 'defaultDate'));
  150.                 }
  151.  
  152.                 var startDate = $('#start').monthpicker('getDate');
  153.  
  154.                 if (startDate !== null && startDate !== undefined) {
  155.                     var compatibleEndDate = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0);
  156.                     var thisDate = $(this).monthpicker("getDate");
  157.                     if (thisDate !== null) {
  158.                         if (thisDate < compatibleEndDate) {
  159.                             $(this).monthpicker('option', 'defaultDate', compatibleEndDate);
  160.                             $(this).monthpicker('setDate', compatibleEndDate);
  161.                         }
  162.                     } else {
  163.                         $(this).monthpicker('option', 'defaultDate', compatibleEndDate);
  164.                         $(this).monthpicker('setDate', compatibleEndDate);
  165.                     }
  166.                 }
  167.             },
  168.  
  169.             onChangeMonthYear: function (year, month, inst) {
  170.                 $(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month, 0)));
  171.             }
  172.         });
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement