Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // This monthpicker requires my monthpicker.js and monthpicker.css available here: https://pastebin.com/u/Ultroman
- // If you want to see the instructions, go to this StackOverflow post: https://stackoverflow.com/a/26011321/1289974
- // The value retrieved from this monthpicker, is always the FIRST day of the selected month. Starts at the current month.
- $('#start').monthpicker({
- dateFormat: 'MM yy',
- changeMonth: true,
- changeYear: true,
- showMonthAfterYear: true,
- showAnim: "drop",
- constrainInput: true,
- yearRange: "-100Y:+10Y",
- minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
- maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
- defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
- // Datepicker functions
- onClose: function (dateText, inst) {
- var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
- $(this).monthpicker('option', 'defaultDate', date);
- $(this).monthpicker('setDate', date);
- /*
- * This last bit of 'onClose' is only for when you want to update the properties of another monthpicker, to match the date
- * being set on this monthpicker. This is for when you want to use two monthpickers to define a timeperiod, and #end should
- * never have a date set to before #start's date.
- */
- var newMinDate = new Date(inst.selectedYear, inst.selectedMonth + 1, 0);
- // 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'
- // later on in document.ready.
- // Therefore, we need to initialize its date with its default value here, if its date is null. Otherwise we will see weird behavior.
- // NOTE: 'getDate' will NOT return null, if you call it from an outside function, after you've initialized it using 'setDate'.
- // It is only a problem inside internal monthpicker functions. That's some weirdness for you right there!
- if ($('#end').monthpicker('getDate') == null) {
- // If the date is null, we set #end to its defaultDate.
- $('#end').monthpicker('setDate', $('#end').monthpicker('option', 'defaultDate'));
- }
- // Then we set #end's minDate to be the date we just selected in this monthpicker.
- // NOTE: If you remove just this line, then the #end monthpicker won't be restricted, by having its minDate set.
- // The code after this line will still help the user, by changing the selected and default dates in #end, to one that is
- // compatible with 'newMinDate', if it is currently set to be before 'newMinDate'.
- // If you want a less restrictive, yet STILL error-protected design, feel free to remove this line.
- $('#end').monthpicker('option', 'minDate', newMinDate);
- // 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.
- if($('#end').monthpicker('option', 'defaultDate') < newMinDate) {
- $('#end').monthpicker('option', 'defaultDate', newMinDate);
- $('#end').monthpicker('setDate', newMinDate);
- }
- },
- beforeShow: function (input, inst) {
- if ($(this).monthpicker("getDate") !== null) {
- // Making sure that the date set is the first of the month.
- if($(this).monthpicker("getDate").getDate() !== 1){
- var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
- $(this).monthpicker('option', 'defaultDate', date);
- $(this).monthpicker('setDate', date);
- }
- } else {
- // 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!
- $(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
- }
- /*
- * 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
- * date already selected in an end-monthpicker. Meaning, if you select a date in the end-monthpicker first, and then open this one,
- * you want this one to default to a date before the end-monthpicker's date.
- */
- var endDate = $('#end').monthpicker('getDate');
- if (endDate !== null && endDate !== undefined) {
- var compatibleStartDate = new Date(endDate.getFullYear(), endDate.getMonth(), 1);
- var thisDate = $(this).monthpicker("getDate");
- if (thisDate !== null) {
- if (thisDate > compatibleStartDate) {
- $(this).monthpicker('option', 'defaultDate', compatibleStartDate);
- $(this).monthpicker('setDate', compatibleStartDate);
- }
- } else {
- $(this).monthpicker('option', 'defaultDate', compatibleStartDate);
- $(this).monthpicker('setDate', compatibleStartDate);
- }
- }
- },
- // Special monthpicker function!
- onChangeMonthYear: function(year, month, inst) {
- $(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
- }
- });
- // The value retrieved from this monthpicker, is always the LAST day of the selected month.
- // Starts at the current month + 2, to get the current month and the next two months (a quarter).
- $('#end').monthpicker({
- dateFormat: 'MM yy',
- changeMonth: true,
- changeYear: true,
- showMonthAfterYear: true,
- showAnim: "drop",
- constrainInput: true,
- yearRange: "-100Y:+10Y",
- minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth() + 1, 0),
- maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth() + 1, 0),
- defaultDate: new Date(new Date().getFullYear(), new Date().getMonth() + 3, 0),
- onClose: function (dateText, inst) {
- var date = new Date(inst.selectedYear, inst.selectedMonth + 1, 0);
- $(this).monthpicker('option', 'defaultDate', date);
- $(this).monthpicker('setDate', date);
- var newMaxDate = new Date(inst.selectedYear, inst.selectedMonth, 1);
- if ($('#start').monthpicker('getDate') == null) {
- // If the date is null, we set #start to its defaultDate.
- $('#start').monthpicker('setDate', $('#start').monthpicker('option', 'defaultDate'));
- }
- if($('#start').monthpicker('getDate') > newMaxDate) {
- $('#start').monthpicker('option', 'defaultDate', newMaxDate);
- $('#start').monthpicker('setDate', newMaxDate);
- }
- },
- beforeShow: function (input, inst) {
- if ($(this).monthpicker("getDate") !== null) {
- // Making sure that the date set is the last of the month.
- var date = new Date(inst.selectedYear, inst.selectedMonth + 1, 0);
- if($(this).monthpicker("getDate").getDate() !== date){
- $(this).monthpicker('option', 'defaultDate', date);
- $(this).monthpicker('setDate', date);
- }
- } else {
- // 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!
- $(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
- }
- /*
- * 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
- * date already selected in a start-monthpicker.
- * Meaning, if the default date in the start-monthpicker is after the date in this end-monthpicker, and you open this one first,
- * you want the start-monthpicker to default to a date before the end-monthpicker's date. It's mostly a fail-safe.
- */
- if ($('#start').monthpicker('getDate') == null) {
- // If the date is null, we set #start to its defaultDate.
- $('#start').monthpicker('setDate', $('#start').monthpicker('option', 'defaultDate'));
- }
- var startDate = $('#start').monthpicker('getDate');
- if (startDate !== null && startDate !== undefined) {
- var compatibleEndDate = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0);
- var thisDate = $(this).monthpicker("getDate");
- if (thisDate !== null) {
- if (thisDate < compatibleEndDate) {
- $(this).monthpicker('option', 'defaultDate', compatibleEndDate);
- $(this).monthpicker('setDate', compatibleEndDate);
- }
- } else {
- $(this).monthpicker('option', 'defaultDate', compatibleEndDate);
- $(this).monthpicker('setDate', compatibleEndDate);
- }
- }
- },
- onChangeMonthYear: function (year, month, inst) {
- $(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month, 0)));
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement