Skip to content

Commit

Permalink
Added bootstrap 4 compatibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@eureka2
eureka2 committed Apr 29, 2019
1 parent d703a78 commit 34e4d34
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 14 deletions.
6 changes: 4 additions & 2 deletions README.md
View file
Expand Up @@ -69,7 +69,7 @@ Add this code to the end of your document:
});
</script>
```
This code displays the default calendar (in english with the default theme : no colors)
This code displays the default calendar (in english with the bootstrap 3 markup and the default theme : no colors)
![](https://eureka2.github.io/ab-datepicker/datepicker1.png) ![](https://eureka2.github.io/ab-datepicker/datepicker2.png) ![](https://eureka2.github.io/ab-datepicker/datepicker3.png)

### AngularJS
Expand All @@ -91,6 +91,7 @@ and give some options to the datepicker. See [Configuration options](#configurat
inputFormat: 'd/M/y',
outputFormat: 'dd/MM/y',
titleFormat: 'EEEE d MMMM y',
markup: 'bootstrap4',
theme: 'blue',
modal: false
});
Expand Down Expand Up @@ -121,6 +122,7 @@ and give some options to the datepicker. See [Configuration options](#configurat
|isDateDisabled |A function that is called for each date of the days calendar. Must return true if the date provided as argument must be disabled, false otherwise.|null|function (date) { return date < new Date(); }|
|isMonthDisabled |A function that is called for each date of the days calendar and each month of the months calendar. Must return true if the month provided as arguments (year and month number - 1 to 12) must be disabled, false otherwise.|null|function (year, month) { return year < 2000 || (year = 2000 && month < 7); }|
|isYearDisabled |A function that is called for each date of the days calendar, each month of the months calendar and each year of the year calendar. Must return true if the year provided as argument must be disabled, false otherwise.|null|function (year) { return year < 2000; }|
|markup |The html markup to use|bootstrap3|markup: 'bootstrap4' |
|max |The maximum/latest date that can be selected|null|max: '06/12/2016' |
|min |The minimum/earliest date that can be selected|null|min: '08/11/2015' |
|modal |Indicates if the calendar must be opened in modal mode, that is it keeps the focus until the user selects a date or clicks the close button|false|modal: true|
Expand Down Expand Up @@ -386,6 +388,6 @@ $('your date selector').datepicker({

## Copyright and license

&copy; 2015-2017 Eureka2 - Jacques Archimède. Code released under the [MIT license](https://github.com/eureka2/ab-datepicker/blob/master/LICENSE).
&copy; 2015-2019 Eureka2 - Jacques Archimède. Code released under the [MIT license](https://github.com/eureka2/ab-datepicker/blob/master/LICENSE).

**[&uparrow; back to table of contents](#table-of-contents)**
27 changes: 25 additions & 2 deletions css/datepicker.css
View file
Expand Up @@ -24,6 +24,17 @@ div.datepicker-calendar div.datepicker-month-wrap {
text-align: center;
height: 30px;
}
div.datepicker-calendar.bootstrap4 div.datepicker-month-wrap > div {
padding-top: 0;
}
div.datepicker-calendar.bootstrap4 div.datepicker-month-wrap div.datepicker-month-prev,
div.datepicker-calendar.bootstrap4 div.datepicker-month-wrap div.datepicker-month-next {
padding-top: 2px;
}
div.datepicker-calendar.bootstrap4 div.datepicker-month-wrap i.fa-caret-left,
div.datepicker-calendar.bootstrap4 div.datepicker-month-wrap i.fa-caret-right {
font-size: 1.3em;
}
div.datepicker-calendar div.datepicker-month-fast-prev.disabled,
div.datepicker-calendar div.datepicker-month-fast-next.disabled ,
div.datepicker-calendar div.datepicker-month-prev.disabled,
Expand Down Expand Up @@ -70,12 +81,25 @@ div.datepicker-calendar div.datepicker-month {
cursor: pointer;
padding-top: 1px;
}
div.datepicker-calendar div.datepicker-month:after {
div.datepicker-calendar:not(.bootstrap4) div.datepicker-month:after {
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
display: inline-block;
content: "\e252";
}
div.datepicker-calendar.bootstrap4 div.datepicker-month:after {
font-family: "Font Awesome 5 Free";
font-size: 0.7em;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
padding-left: 0.4em;
content: "\f078";
}
div.datepicker-calendar div.datepicker-month:hover,
div.datepicker-calendar div.datepicker-month:focus {
padding-top: 0;
Expand Down Expand Up @@ -250,7 +274,6 @@ a.datepicker-button.bootstrap:focus {
}
div.datepicker-calendar.bootstrap {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
width: 80%;
min-width: 200px;
font-size: .8em;
background-clip: padding-box;
Expand Down
64 changes: 56 additions & 8 deletions js/datepicker.js
View file
@@ -1,5 +1,5 @@
/*!
* Accessible Datepicker v2.1.12
* Accessible Datepicker v2.1.13
* Copyright 2015-2019 Eureka2, Jacques Archimède.
* Based on the example of the Open AJAX Alliance Accessibility Tools Task Force : http://www.oaa-accessibility.org/examplep/datepicker1/
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
Expand Down Expand Up @@ -233,13 +233,13 @@
}(function($, undefined){
'use strict';

var datepickerButton = [
'<a class="datepicker-button input-group-addon btn" role="button" aria-haspopup="true" tabindex="0" aria-labelledby="datepicker-bn-open-label-CALENDARID">',
var datepickerButton3 = [
'<a class="datepicker-button bootstrap3 input-group-addon btn" role="button" aria-haspopup="true" tabindex="0" aria-labelledby="datepicker-bn-open-label-CALENDARID">',
' <span class="glyphicon glyphicon-calendar" title="Select Date..."></span>',
'</a>'
];
var datepickerCalendar = [
'<div class="datepicker-calendar" id="datepicker-calendar-CALENDARID" aria-hidden="false">',
var datepickerCalendar3 = [
'<div class="datepicker-calendar bootstrap3" id="datepicker-calendar-CALENDARID" aria-hidden="false">',
' <div class="datepicker-month-wrap">',
' <div class="datepicker-month-fast-next pull-right" role="button" aria-labelledby="datepicker-bn-fast-next-label-CALENDARID" tabindex="0"><span class="glyphicon glyphicon-forward"></span></div>',
' <div class="datepicker-month-next pull-right" role="button" aria-labelledby="datepicker-bn-next-label-CALENDARID" tabindex="0"><span class="glyphicon glyphicon-triangle-right"></span></div>',
Expand Down Expand Up @@ -277,6 +277,50 @@
'</div>'
];

var datepickerButton4 = [
'<a class="datepicker-button bootstrap4 input-group-append" role="button" aria-haspopup="true" tabindex="0" aria-labelledby="datepicker-bn-open-label-CALENDARID">',
' <span class="input-group-text"><i class="far fa-calendar-alt" title="Select Date..."></i></span>',
'</a>'
];
var datepickerCalendar4 = [
'<div class="datepicker-calendar bootstrap4" id="datepicker-calendar-CALENDARID" aria-hidden="false">',
' <div class="datepicker-month-wrap">',
' <div class="datepicker-month-fast-next float-right" role="button" aria-labelledby="datepicker-bn-fast-next-label-CALENDARID" tabindex="0"><i class="fas fa-forward"></i></div>',
' <div class="datepicker-month-next float-right" role="button" aria-labelledby="datepicker-bn-next-label-CALENDARID" tabindex="0"><i class="fas fa-caret-right"></i></div>',
' <div class="datepicker-month-fast-prev float-left" role="button" aria-labelledby="datepicker-bn-fast-prev-label-CALENDARID" tabindex="0"><i class="fas fa-backward"></i></div>',
' <div class="datepicker-month-prev float-left" role="button" aria-labelledby="datepicker-bn-prev-label-CALENDARID" tabindex="0"><i class="fas fa-caret-left"></i></div>',
' <div id="datepicker-month-CALENDARID" class="datepicker-month" tabindex="0" role="heading" aria-live="assertive" aria-atomic="true" title="Click or press the Enter key or the spacebar to change the month">July 2015</div>',
' </div>',
' <table class="datepicker-grid" role="grid" aria-readonly="true" aria-activedescendant="datepicker-err-msg-CALENDARID" aria-labelledby="datepicker-month-CALENDARID" tabindex="0">',
' <thead role="presentation">',
' <tr class="datepicker-weekdays" role="row">',
' <th scope="col" id="day0-header-CALENDARID" class="datepicker-day" role="columnheader" aria-label="Sunday"><abbr title="Sunday">Su</abbr></th>',
' <th scope="col" id="day1-header-CALENDARID" class="datepicker-day" role="columnheader" aria-label="Monday"><abbr title="Monday">Mo</abbr></th>',
' <th scope="col" id="day2-header-CALENDARID" class="datepicker-day" role="columnheader" aria-label="Tuesday"><abbr title="Tuesday">Tu</abbr></th>',
' <th scope="col" id="day3-header-CALENDARID" class="datepicker-day" role="columnheader" aria-label="Wednesday"><abbr title="Wednesday">We</abbr></th>',
' <th scope="col" id="day4-header-CALENDARID" class="datepicker-day" role="columnheader" aria-label="Thursday"><abbr title="Thursday">Th</abbr></th>',
' <th scope="col" id="day5-header-CALENDARID" class="datepicker-day" role="columnheader" aria-label="Friday"><abbr title="Friday">Fr</abbr></th>',
' <th scope="col" id="day6-header-CALENDARID" class="datepicker-day" role="columnheader" aria-label="Saturday"><abbr title="Saturday">Sa</abbr></th>',
' </tr>',
' </thead>',
' <tbody role="presentation">',
' <tr>',
' <td id="datepicker-err-msg-CALENDARID" colspan="7">Javascript must be enabled</td>',
' </tr>',
' </tbody>',
' </table>',
' <div class="datepicker-close-wrap">',
' <button class="datepicker-close" id="datepicker-close-CALENDARID" aria-labelledby="datepicker-bn-close-label-CALENDARID">Close</button>',
' </div>',
' <div id="datepicker-bn-open-label-CALENDARID" class="datepicker-bn-open-label offscreen">Click or press the Enter key or the spacebar to open the calendar</div>',
' <div id="datepicker-bn-prev-label-CALENDARID" class="datepicker-bn-prev-label offscreen">Go to previous month</div>',
' <div id="datepicker-bn-next-label-CALENDARID" class="datepicker-bn-next-label offscreen">Go to next month</div>',
' <div id="datepicker-bn-fast-prev-label-CALENDARID" class="datepicker-bn-fast-prev-label offscreen">Go to previous year</div>',
' <div id="datepicker-bn-fast-next-label-CALENDARID" class="datepicker-bn-fast-next-label offscreen">Go to next year</div>',
' <div id="datepicker-bn-close-label-CALENDARID" class="datepicker-bn-close-label offscreen">Close the date picker</div>',
'</div>'
];

var Datepicker = function (target, options) {
var self = this;
this.$target = $(target); // textbox that will receive the selected date string and focus (if modal)
Expand Down Expand Up @@ -324,7 +368,7 @@
this.options.next = null;
}
this.id = this.$target.attr('id') || 'datepicker-' + Math.floor(Math.random() * 100000);
var calendar = datepickerCalendar.join("");
var calendar = this.options.markup == 'bootstrap3' ? datepickerCalendar3.join("") : datepickerCalendar4.join("");
calendar = calendar.replace(/CALENDARID/g, this.id + '');

// complete the target textbox if any
Expand All @@ -340,7 +384,7 @@
this.$target.attr('placeholder', this.options.inputFormat[0]);
}

var button = datepickerButton.join("");
var button = this.options.markup == 'bootstrap3' ? datepickerButton3.join("") : datepickerButton4.join("");
button = button.replace(/CALENDARID/g, this.id + '');
this.$button = $(button);
this.$button.addClass(this.options.theme);
Expand Down Expand Up @@ -434,7 +478,7 @@
});
}

Datepicker.VERSION = '2.1.12'
Datepicker.VERSION = '2.1.13'

Datepicker.DEFAULTS = {
firstDayOfWeek: Date.dp_locales.firstday_of_week, // Determines the first column of the calendar grid
Expand Down Expand Up @@ -464,6 +508,7 @@
onUpdate: function (value) {},
previous: null,
next: null,
markup: 'bootstrap3', // bootstrap3 or bootstrap4
theme: 'default',
modal: false,
inline: false,
Expand Down Expand Up @@ -2140,6 +2185,9 @@
this.options.next.val(nextVal);
}
}
if (this.options.next !== null) {
this.options.next.datepicker('min', date);
}
} // end updateLinked()

/**
Expand Down
4 changes: 2 additions & 2 deletions js/datepicker.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 34e4d34

Please sign in to comment.