Skip to content

Commit ce568bd

Browse files
author
Elvis Justino da Silva
committed
Adding language support to Brazilian Portuguese (br) and Espanhish(es) and methods selectDates and unselectDates
1 parent 7ae60cc commit ce568bd

File tree

7 files changed

+352
-59
lines changed

7 files changed

+352
-59
lines changed

‎dist/datepickk.js‎

Lines changed: 85 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -112,14 +112,24 @@ function Datepickk(args) {
112112
weekStart: 1
113113
},
114114
en: {
115-
monthNames: ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'],
116-
dayNames: ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'],
115+
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
116+
dayNames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
117117
weekStart: 0
118118
},
119119
de: {
120120
monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
121121
dayNames: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
122122
weekStart: 1
123+
},
124+
br: {
125+
monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
126+
dayNames: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
127+
weekStart: 0
128+
},
129+
es: {
130+
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
131+
dayNames: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
132+
weekStart: 0
123133
}
124134
};
125135

@@ -320,6 +330,9 @@ function Datepickk(args) {
320330
}
321331
var monthText = languages[lang].monthNames[parseMonth(month - 1 + index)];
322332
element.setAttribute('data-month', monthText);
333+
element.setAttribute('data-month-num', parseMonth(month - 1 + index));
334+
element.setAttribute('data-month-days', days);
335+
element.setAttribute('data-month-year', new Date(year, month - 1 + index, 1).getFullYear());
323336

324337
[].slice.call(element.querySelectorAll('.d-table input')).forEach(function (inputEl, i) {
325338
var labelEl = inputEl.nextSibling;
@@ -540,45 +553,61 @@ function Datepickk(args) {
540553
};
541554

542555
function selectDate(date, ignoreOnSelect) {
543-
date = new Date(date);
544-
date.setHours(0, 0, 0, 0);
545-
var el = that.el.querySelector('[data-date="' + date.toJSON() + '"]');
556+
if (date != '') {
557+
date = new Date(date);
558+
date.setHours(0, 0, 0, 0);
559+
var el = that.el.querySelector('[data-date="' + date.toJSON() + '"]');
546560

547-
if (range && el && el.checked) {
548-
el.classList.add('single');
549-
}
561+
if (range && el && el.checked) {
562+
el.classList.add('single');
563+
}
550564

551-
if (el && !el.checked) {
552-
el.checked = true;
553-
}
565+
if (el && !el.checked) {
566+
el.checked = true;
567+
}
554568

555-
selectedDates.push(date);
569+
selectedDates.push(date);
556570

557-
if (onSelect && !ignoreOnSelect) {
558-
onSelect.apply(date, [true]);
571+
if (onSelect && !ignoreOnSelect) {
572+
onSelect.apply(date, [true]);
573+
}
559574
}
560575
};
561576

577+
function selectDates(dates, ignoreOnSelect) {
578+
dates.forEach(function (element) {
579+
selectDate(element, ignoreOnSelect);
580+
});
581+
};
582+
562583
function unselectDate(date, ignoreOnSelect) {
563-
date = new Date(date);
564-
date.setHours(0, 0, 0, 0);
565-
var el = that.el.querySelector('[data-date="' + date.toJSON() + '"]');
566-
if (el) {
567-
el.classList.remove('single');
568-
if (el.checked) {
569-
el.checked = false;
584+
if (date != '') {
585+
date = new Date(date);
586+
date.setHours(0, 0, 0, 0);
587+
var el = that.el.querySelector('[data-date="' + date.toJSON() + '"]');
588+
if (el) {
589+
el.classList.remove('single');
590+
if (el.checked) {
591+
el.checked = false;
592+
}
570593
}
571-
}
572594

573-
selectedDates = selectedDates.filter(function (x) {
574-
return x.getTime() != date.getTime();
575-
});
595+
selectedDates = selectedDates.filter(function (x) {
596+
return x.getTime() != date.getTime();
597+
});
576598

577-
if (onSelect && !ignoreOnSelect) {
578-
onSelect.call(date, false);
599+
if (onSelect && !ignoreOnSelect) {
600+
onSelect.call(date, false);
601+
}
579602
}
580603
};
581604

605+
function unselectDates(dates, ignoreOnSelect) {
606+
dates.forEach(function (element) {
607+
unselectDate(element, ignoreOnSelect);
608+
});
609+
};
610+
582611
function unselectAll(ignoreOnSelect) {
583612
selectedDates.forEach(function (date) {
584613
unselectDate(date, ignoreOnSelect);
@@ -780,12 +809,15 @@ function Datepickk(args) {
780809
that.show = show;
781810
that.hide = hide;
782811
that.selectDate = selectDate;
812+
that.selectDates = selectDates;
783813
that.unselectAll = unselectAll;
784814
that.unselectDate = unselectDate;
815+
that.unselectDates = unselectDates;
785816

786817
function currentDateGetter() {
787818
return new Date(currentYear, currentMonth - 1, 1);
788819
}
820+
789821
function currentDateSetter(x) {
790822
x = new Date(x);
791823
currentMonth = x.getMonth() + 1;
@@ -852,6 +884,31 @@ function Datepickk(args) {
852884
}
853885
}
854886
},
887+
"languages": {
888+
get: function get() {
889+
return languages[lang];
890+
}
891+
},
892+
"firstDateCalendar": {
893+
get: function get() {
894+
var $firstCalendarElement = $('.d-table').first();
895+
var year = $firstCalendarElement.attr('data-month-year');
896+
var month = $firstCalendarElement.attr('data-month-num');
897+
var day = 1;
898+
899+
return new Date(year, month, day);
900+
}
901+
},
902+
"lastDateCalendar": {
903+
get: function get() {
904+
var $firstCalendarElement = $('.d-table').last();
905+
var year = $firstCalendarElement.attr('data-month-year');
906+
var month = $firstCalendarElement.attr('data-month-num');
907+
var day = $firstCalendarElement.attr('data-month-days');
908+
909+
return new Date(year, month, day);
910+
}
911+
},
855912
"weekStart": {
856913
get: function get() {
857914
return weekStart !== null ? weekStart : languages[lang].weekStart;
@@ -883,7 +940,7 @@ function Datepickk(args) {
883940
that.el.classList.add('multi');
884941
}
885942
} else {
886-
console.error('months must be a number > 0');
943+
console.error('Months must be a number > 0');
887944
}
888945
}
889946
},

‎dist/datepickk.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/doc.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*Flex grid*/
1+
@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,200,300);@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);/*Flex grid*/
22
.container {
33
padding: 7.5px;
44
}
@@ -1015,7 +1015,6 @@ ul li:before {
10151015
}
10161016
.nav h1 {
10171017
color: #222;
1018-
width: auto;
10191018
display: inline;
10201019
}
10211020
.nav h1 span {

‎docs/doc.less‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
@import "_button.less";
44
@import "_variables.less";
55

6+
@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,200,300);
7+
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
8+
69
@main: #D55C2B;
710

811
*{
@@ -56,7 +59,6 @@ ul{
5659

5760
h1{
5861
color:#222;
59-
width:auto;
6062
display: inline;
6163

6264
span{
@@ -166,4 +168,4 @@ code{
166168

167169
a{
168170
color:@blue;
169-
}
171+
}

‎index-year-calendar.html‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<title>Teste</title>
5+
<meta charset="utf-8" />
6+
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
7+
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
8+
<link rel="stylesheet" type="text/css" href="dist/datepickk.css" />
9+
<script type="text/javascript" src="dist/datepickk.js"></script>
10+
</head>
11+
<body>
12+
<style>
13+
.datepickk-container {
14+
width: 900px;
15+
height: 900px;
16+
position: relative;
17+
}
18+
.datepickk-container .d-table{
19+
width: 300px !important;
20+
outline: 1px solid rgba(0, 0, 0, 0.05);
21+
}
22+
23+
.datepickk-container .d-week{
24+
border: 1px solid rgba(0, 0, 0, 0.05);
25+
}
26+
27+
.datepickk-container .d-table input + label.prev{
28+
visibility: hidden;
29+
}
30+
.datepickk-container .d-table .d-hidden, .datepickk-container .d-table .next {
31+
visibility: hidden;
32+
}
33+
.datepickk-container .d-calendar{
34+
font-size: 15px !important;
35+
}
36+
37+
#Datepickk .d-table:first-child:nth-last-child(n + 3), #Datepickk .d-table:first-child:nth-last-child(n + 3) ~ div {
38+
flex: 0;
39+
flex-basis: calc(100% / 3) !important;
40+
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
41+
}
42+
43+
#Datepickk .select-all{
44+
display: block !important;
45+
position: absolute;
46+
top: 5px;
47+
left: 5px;
48+
width: 15px;
49+
height: 15px;
50+
background: yellowgreen;
51+
cursor: pointer;
52+
}
53+
.nav-weekdays {
54+
z-index: 1;
55+
top: 0px;
56+
left: 0px;
57+
}
58+
59+
.nav-weekdays .btn-weekday {
60+
background-color: #e95a5a;
61+
color: #FFFFFF;
62+
display: inline-block;
63+
border: none;
64+
cursor: pointer;
65+
width: 40px;
66+
height: 30px;
67+
font-family: inherit;
68+
}
69+
</style>
70+
71+
<input type="text" id="analyzeSchedule"/>
72+
<div class="datepickk-container"></div>
73+
74+
<script>
75+
var checkEvent = (element, dateRange) => {
76+
if(element.attr("data-checked") === 'true'){
77+
datepicker.unselectDates(dateRange);
78+
element.attr('data-checked', false);
79+
} else {
80+
datepicker.selectDates(dateRange);
81+
element.attr('data-checked', true);
82+
}
83+
}
84+
85+
var bindEventSelectAll = () => {
86+
// Adiciona o evento de seleção de todos os dias do mês
87+
removeEventSelectAll();
88+
$('.select-all').click(function(e) {
89+
var qtdDaysOnMonth = $(this).parent().attr('data-month-days');
90+
var monthNum = parseInt($(this).parent().attr('data-month-num')) + 1;
91+
var monthYear = $(this).parent().attr('data-month-year');
92+
var dateRange = [];
93+
94+
for(var day = 1; day <= qtdDaysOnMonth; day ++) {
95+
dateRange.push(monthYear + '/' + monthNum + '/' + day);
96+
}
97+
98+
checkEvent($(this), dateRange);
99+
});
100+
}
101+
102+
var addSelectAll = () => {
103+
// Adiciona os checkbox de seleção de mês
104+
$('.d-table').each(function(index, element) {
105+
$(element).prepend($('<button data-checked="false" class="select-all"></button>'));
106+
});
107+
bindEventSelectAll();
108+
}
109+
110+
var removeEventSelectAll = () => {
111+
// Remove select-all
112+
$('.select-all').off('click').attr('data-checked',false);
113+
}
114+
115+
var addEventWeekDays = () => {
116+
// Adiciona o evento de seleção de dia de semana
117+
removeEventWeekDays();
118+
$('.btn-weekday').click(function(e) {
119+
e.preventDefault();
120+
var startOfYear = datepicker.firstDateCalendar;
121+
var endOfYear = datepicker.lastDateCalendar;
122+
var dateRange = [];
123+
var dataAux = startOfYear;
124+
125+
while(dataAux.getTime() <= endOfYear.getTime()){
126+
if(dataAux.getDay() == $(this).data('weekday')){
127+
dateRange.push(dataAux);
128+
}
129+
dataAux = moment(dataAux).add(1, 'd').toDate();
130+
}
131+
132+
checkEvent($(this), dateRange);
133+
});
134+
135+
}
136+
137+
var addWeekDays = () => {
138+
// Adiciona os botões de dias da semana ao plugin
139+
$('.datepickk-container').prepend($('<div class="nav-weekdays"></div>'));
140+
141+
var weekdayAux = datepicker.languages.weekStart;
142+
datepicker.languages.dayNames.forEach(function(element) {
143+
$('.nav-weekdays').append('<button class="btn-weekday" data-checked="false" data-weekday="' + weekdayAux + '">' + element + '</button>');
144+
weekdayAux = weekdayAux + 1;
145+
})
146+
147+
addEventWeekDays();
148+
}
149+
150+
var removeEventWeekDays = () => {
151+
$('.btn-weekday').off('click').attr('data-checked',false);
152+
}
153+
154+
var datepicker = new Datepickk();
155+
datepicker.lang = 'br';
156+
datepicker.inline = true;
157+
datepicker.months = 12;
158+
datepicker.container = document.querySelector('.datepickk-container');
159+
datepicker.minDate = new Date();
160+
datepicker.selectDates($('#analyzeSchedule').val().split(','));
161+
datepicker.onSelect = (checked) => {
162+
console.log('onSelect');
163+
var dateRange = [];
164+
datepicker.selectedDates.forEach((element, index) => {
165+
dateRange.push(element.getFullYear() + '/' + (element.getMonth() + 1) + '/' + element.getDate());
166+
});
167+
$('#analyzeSchedule').val(dateRange.join(','));
168+
};
169+
datepicker.onNavigation = () => {
170+
bindEventSelectAll();
171+
addEventWeekDays();
172+
};
173+
datepicker.show();
174+
addSelectAll();
175+
addWeekDays();
176+
</script>
177+
</body>
178+
</html>

0 commit comments

Comments
 (0)