Skip to content
This repository was archived by the owner on Aug 6, 2020. It is now read-only.

Add enable-select-month binding to provide a dropdown box for month s… #104

Merged
merged 1 commit into from
Oct 25, 2017
Merged

Add enable-select-month binding to provide a dropdown box for month s… #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 32 additions & 8 deletions dist/multipleDatePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,12 @@
* note : will change year into a select
*/
changeYearFuture: '=?',
/*
* Type: bool
* Allow months to be selected with a dropdown box
* note : will change month into a select
*/
enableSelectMonth: '=?',

/*
* Type: function
Expand All @@ -142,9 +148,10 @@
'<div class="picker-top-row">' +
'<div class="text-center picker-navigate picker-navigate-left-arrow" ng-class="{\'disabled\':disableBackButton}" ng-click="changeMonth($event, disableBackButton, -1)">&lt;</div>' +
'<div class="text-center picker-month">' +
'{{monthToDisplay}} ' +
'<span ng-if="!enableSelectMonth">{{monthToDisplay}}</span>' +
'<select ng-if="enableSelectMonth" ng-model="select.month" ng-change="changeMonthBySelect(select.month)" ng-options="m for m in monthsForSelect"></select>' +
'<span ng-if="yearsForSelect.length < 2">{{yearToDisplay}}</span>' +
'<select ng-if="yearsForSelect.length > 1" ng-model="year" ng-change="changeYear(year)" ng-options="y for y in yearsForSelect"></select>' +
'<select ng-if="yearsForSelect.length > 1" ng-model="select.year" ng-change="changeYear(select.year)" ng-options="y for y in yearsForSelect"></select>' +
'</div>' +
'<div class="text-center picker-navigate picker-navigate-right-arrow" ng-class="{\'disabled\':disableNextButton}" ng-click="changeMonth($event, disableNextButton, 1)">&gt;</div>' +
'</div>' +
Expand Down Expand Up @@ -282,6 +289,8 @@
scope.daysOfWeek = getDaysOfWeek();
scope.cssDaysOfSurroundingMonths = scope.cssDaysOfSurroundingMonths || 'picker-empty';
scope.yearsForSelect = [];
scope.monthsForSelect = [];
scope.select = {};

/**
* Called when user clicks a date
Expand Down Expand Up @@ -392,6 +401,16 @@
return css;
};

function updateMonth(monthTo) {
var oldMonth = moment(scope.month);
scope.month = monthTo;
scope.select.month = monthTo.format('MMMM');

if (typeof scope.monthChanged == 'function') {
scope.monthChanged(scope.month, oldMonth);
}
}

/*Navigate to another month*/
scope.changeMonth = function (event, disable, add) {
if (disable) {
Expand All @@ -412,14 +431,15 @@
}

if (!prevented) {
var oldMonth = moment(scope.month);
scope.month = monthTo;
if (typeof scope.monthChanged == 'function') {
scope.monthChanged(scope.month, oldMonth);
}
updateMonth(monthTo);
}
};

/*Change month*/
scope.changeMonthBySelect = function (monthName) {
updateMonth(moment(scope.month).month(monthName));
};

/*Change year*/
scope.changeYear = function (year) {
scope.month = scope.month.year(parseInt(year, 10));
Expand Down Expand Up @@ -453,10 +473,14 @@

/*Generate the calendar*/
scope.generate = function () {
scope.year = scope.month.year().toString();
scope.monthsForSelect = moment.months();
scope.yearsForSelect = getYearsForSelect();
scope.monthToDisplay = getMonthYearToDisplay();
scope.yearToDisplay = scope.month.format('YYYY');
scope.select = {
year: scope.month.year().toString(),
month: scope.month.format('MMMM')
};
var previousDay = moment(scope.month).date(0).day(scope.sundayFirstDay ? 0 : 1).subtract(1, 'day');

if (moment(scope.month).date(0).diff(previousDay, 'day') > 6) {
Expand Down
2 changes: 1 addition & 1 deletion dist/multipleDatePicker.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 14 additions & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,20 @@ <h2>

<multiple-date-picker change-year-past="5" change-year-future="10"></multiple-date-picker>

<h2>
<a id="change-year" class="anchor" href="#change-year" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>quick change month
</h2>

<p>You can use this option to show a select to quickly change the month.</p>

<div class="highlight highlight-text-html-basic">
<pre>&lt;<span class="pl-ent">multiple-date-picker</span> <span class="pl-e">enable-select-month</span>=<span
class="pl-s"><span class="pl-pds">"</span>true<span
class="pl-pds">"</span></span>/&gt;</pre>
</div>

<multiple-date-picker enable-select-month="true"></multiple-date-picker>

<h2>
<a id="first-day-of-week" class="anchor" href="#first-day-of-week" aria-hidden="true"><span
aria-hidden="true" class="octicon octicon-link"></span></a>First day of week</h2>
Expand Down
Loading