fix onChange event with multiple dates

This commit is contained in:
t1m0n 2015-10-28 10:43:59 +03:00
parent 38e199d5be
commit 7ef2686c3d
4 changed files with 52 additions and 20 deletions

35
dist/js/datepicker.js vendored
View File

@ -22,14 +22,14 @@ var Datepicker;
maxData: '',
//TODO возможно добавить огрнаичивать число выделяемых дат
multipleDates: false,
multipleDates: true,
multipleDatesSeparator: ',',
// navigation
prevHtml: '«',
nextHtml: '»',
// events
// TODO сделать с множественными датами
onChange: ''
};
@ -81,7 +81,7 @@ var Datepicker;
_buildDatepickersContainer: function () {
this.containerBuilt = true;
$body.append('<div class="datepickers-container" id="datepickers-container"></div>')
$body.append('<div class="datepickers-container" id="datepickers-container"></div>');
$datepickersContainer = $('#datepickers-container');
},
@ -100,9 +100,25 @@ var Datepicker;
},
_triggerOnChange: function (cellType) {
var dateString = this.formatDate(this.opts.dateFormat, this.date);
var selectedDates = this.selectedDates,
parsedSelected = Datepicker.getParsedDate(selectedDates[0]),
formattedDates = this.formatDate(this.opts.dateFormat, selectedDates[0]),
_this = this,
dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
this.opts.onChange(dateString, this.date, this);
if (this.opts.multipleDates) {
formattedDates = selectedDates.map(function (date) {
return _this.formatDate(_this.opts.dateFormat, date)
}).join(this.opts.multipleDatesSeparator);
// Create new dates array, to separate it from original selectedDates
dates = selectedDates.map(function(date) {
var parsedDate = Datepicker.getParsedDate(date);
return new Date(parsedDate.year, parsedDate.month, parsedDate.date)
})
}
this.opts.onChange(formattedDates, dates, this);
},
next: function () {
@ -137,7 +153,7 @@ var Datepicker;
formatDate: function (string, date) {
var result = string,
d = this.parsedDate;
d = Datepicker.getParsedDate(date);
switch (true) {
case /dd/.test(result):
@ -162,7 +178,6 @@ var Datepicker;
selectDate: function (date) {
if (this.opts.multipleDates) {
if (!this._isSelected(date)) {
console.log('push');
this.selectedDates.push(date);
}
} else {
@ -458,7 +473,7 @@ Datepicker.Cell = function () {
if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
if (this.d._isSelected(date, 'day')) _class += ' -selected-';
return '<div class="' + _class + '" data-date="' + date.getDate() + '">' + date.getDate() + '</div>';
return '<div class="' + _class + '" data-date="' + date.getDate() + '" data-month="' + date.getMonth() + '">' + date.getDate() + '</div>';
},
/**
@ -560,10 +575,10 @@ Datepicker.Cell = function () {
_handleClick: {
days: function (el) {
var date = el.data('date'),
month = el.data('month'),
d = this.d.parsedDate;
this.d.date = new Date(d.year, d.month, date);
this.d.selectDate(this.d.date);
this.d.selectDate(new Date(d.year, month, date));
if (this.d.opts.onChange) {
this.d._triggerOnChange()

View File

@ -17,7 +17,8 @@
<script type="text/javascript">
$('.calendar').datepicker({
onChange: function (dateString, date, inst) {
console.log(dateString);
console.log(date[0].getFullYear());
}
});
</script>

View File

@ -94,7 +94,7 @@
if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
if (this.d._isSelected(date, 'day')) _class += ' -selected-';
return '<div class="' + _class + '" data-date="' + date.getDate() + '">' + date.getDate() + '</div>';
return '<div class="' + _class + '" data-date="' + date.getDate() + '" data-month="' + date.getMonth() + '">' + date.getDate() + '</div>';
},
/**
@ -196,10 +196,10 @@
_handleClick: {
days: function (el) {
var date = el.data('date'),
month = el.data('month'),
d = this.d.parsedDate;
this.d.date = new Date(d.year, d.month, date);
this.d.selectDate(this.d.date);
this.d.selectDate(new Date(d.year, month, date));
if (this.d.opts.onChange) {
this.d._triggerOnChange()

View File

@ -22,7 +22,8 @@ var Datepicker;
maxData: '',
//TODO возможно добавить огрнаичивать число выделяемых дат
multipleDates: false,
multipleDates: true,
multipleDatesSeparator: ',',
// navigation
prevHtml: '&laquo;',
@ -81,7 +82,7 @@ var Datepicker;
_buildDatepickersContainer: function () {
this.containerBuilt = true;
$body.append('<div class="datepickers-container" id="datepickers-container"></div>')
$body.append('<div class="datepickers-container" id="datepickers-container"></div>');
$datepickersContainer = $('#datepickers-container');
},
@ -100,9 +101,25 @@ var Datepicker;
},
_triggerOnChange: function (cellType) {
var dateString = this.formatDate(this.opts.dateFormat, this.date);
var selectedDates = this.selectedDates,
parsedSelected = Datepicker.getParsedDate(selectedDates[0]),
formattedDates = this.formatDate(this.opts.dateFormat, selectedDates[0]),
_this = this,
dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
this.opts.onChange(dateString, this.date, this);
if (this.opts.multipleDates) {
formattedDates = selectedDates.map(function (date) {
return _this.formatDate(_this.opts.dateFormat, date)
}).join(this.opts.multipleDatesSeparator);
// Create new dates array, to separate it from original selectedDates
dates = selectedDates.map(function(date) {
var parsedDate = Datepicker.getParsedDate(date);
return new Date(parsedDate.year, parsedDate.month, parsedDate.date)
})
}
this.opts.onChange(formattedDates, dates, this);
},
next: function () {
@ -137,7 +154,7 @@ var Datepicker;
formatDate: function (string, date) {
var result = string,
d = this.parsedDate;
d = Datepicker.getParsedDate(date);
switch (true) {
case /dd/.test(result):
@ -162,7 +179,6 @@ var Datepicker;
selectDate: function (date) {
if (this.opts.multipleDates) {
if (!this._isSelected(date)) {
console.log('push');
this.selectedDates.push(date);
}
} else {