Allow date boundaries

[garrypolley]

(Note I plan to submit this code within the next few days/weeks)

I think it would be nice if I could pass a startDate and/or an endDate to the settings and have the month picker auto grey out or remove the months that are not selectable.

Currently to do this I have to add event listeners myself and change the disabledMonths option. It's a bit tedious to have to keep updating that.

Deos this seem like a good change to you as well?

[lucianocosta]

What about to follow the data-attributes style?

These ones are already there:

• data-start-year
• data-final-year
• data-selected-year

You could add:

• data-start-month
• data-end-month

It should be possible to set them in javascript, as initial setting as well...

[garrypolley]

Yeah that seems like a good idea. So for example I could do:

<div id='myMonth' data-start-year='2010' data-end-year='2012' data-start-month='7' data-end-month='11'></div>

<script>
$('#myMonth').monthpicker();
</script>

The above code would attach a monthpicker that would have a date range of 07/2010 - 11/2011 inclusive.

I would also like to be able to set those in a call, so I can use the same datepicker all over a site. Ex:

var mySettings = {startYear: 2010, endYear: 2012, startMonth: 7, endMonth: 11};
$('#myMonth').monthpicker(mySettings);

Do these both seem like viable options to you?

[garrypolley]

This currently has my changes that are on pull request 22

Also, I've changed finalYear to endYear to match the endMonth. It was weird to me to have to different names for end.

[garrypolley]

Also, my first change here: https://github.com/garrypolley/jquery.mtz.monthpicker/commit/018745bf1b1f0510940feabc4bce31c1ae37baec

Is done for readability and to ensure that destroy actually works when it's called. I have it working, and can provide an example if you want one.

[garrypolley]

This is ready to be looked at for getting added to this plugin.

Here is the code I use to invoke it for testing:

$('#myElement').monthpicker({startYear: 2012, endYear: 2013, selectedYear: 2013, selectedMonth: 2, startMonth: 4, endMonth: 1});

.ui-datepicker.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.ui-widget-content .ui-state-default {background: url("../img/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6; border: none; color: #555; font-weight: normal; outline: medium none;}
div.ui-datepicker {width: 17em; padding: .2em .2em 0;}
div.ui-datepicker-header.mtz-monthpicker {border: 1px solid #CCC; background-color: #E0E0E0; color: #fff; font-weight: bold;}
table.mtz-monthpicker {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
td.ui-state-default.mtz-monthpicker-month {border: 1px solid #fff;}
td.ui-state-default.mtz-monthpicker-month {text-align: center; cursor: pointer; padding: 5px;}
td.ui-state-default.mtz-monthpicker-month:hover, td.ui-state-default.mtz-monthpicker-month-selected {background: none; background-color: #0F5895; color: #fff; cursor: pointer;}
td.ui-state-default.mtz-monthpicker-month:hover {background-color: #fff; color: #000;}
td.ui-state-disabled.mtz-monthpicker-month  {color: #E6E6E6;;}
td.ui-state-disabled.mtz-monthpicker-month:hover {background: url("../img/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6; cursor: default; color:#E6E6E6;}
select.mtz-monthpicker-year {margin-top: 7px;}

If this is accepted the documentation will need to be updated, since this is a heavily non-passive change.

[garrypolley]

Any plans to pull this in? @lucianocosta

[garrypolley]

Is this going to be considered for integration?

[lucianocosta]

@garrypolley the code seems to much changed and I prefer to keep it really simple so I can (re)picture everything quickly when I back to it. I corrected the destroy as you suggested. Thank you!