tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

refactor initializeDateRangePickers method

pull/15806/head
Salih 4 years ago
parent
3cf5cfdddd
commit
44864db332
1 changed files with 290 additions and 237 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 527
      framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js

527
framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js
View File

@ -296,254 +296,317 @@
abp.dom.initializers.initializeDateRangePickers = function ($rootElement) {
$rootElement
.findWithSelf('abp-date-picker,abp-date-range-picker')
.each(function () {
var $this = $(this);
var $input = $this.find('.input-group input[type="text"]')
if ($input.data('daterangepicker')) {
return;
}
var $openButton = $this.find('button[data-type="open"]')
var $clearButton = $this.find('button[data-type="clear"]')
var singleDatePicker = $this.is('abp-date-picker')
var options = {};
options.singleDatePicker = singleDatePicker;
var defaultOptions = {
showDropdowns: true,
opens: "center",
drops: "down",
autoApply: true,
autoUpdateInput: false,
showTodayButton: true,
showClearButton: true,
minYear: parseInt(moment().subtract(100, 'year').locale('en').format('YYYY')),
maxYear: parseInt(moment().add(100, 'year').locale('en').format('YYYY')),
locale: {
direction: abp.localization.currentCulture.isRightToLeft ? 'rtl' : 'ltr',
todayLabel: abp.localization.localize('Today', 'AbpUi'),
clearLabel: abp.localization.localize('Clear', 'AbpUi'),
applyLabel: abp.localization.localize('Apply', 'AbpUi'),
},
singleOpenAndClearButton: true
};
var locale = defaultOptions.locale;
$.extend(options, defaultOptions);
$.extend(options, $this.data());
if (jQuery.isEmptyObject(options.locale)) {
options.locale = locale;
} else {
locale = options.locale;
}
$.extend(options, $this.data("options"));
if (jQuery.isEmptyObject(options.locale)) {
options.locale = locale;
}
function setOptions (options, $datePickerElement, singleDatePicker) {
options.singleDatePicker = singleDatePicker;
var defaultOptions = {
showDropdowns: true,
opens: "center",
drops: "down",
autoApply: true,
autoUpdateInput: false,
showTodayButton: true,
showClearButton: true,
minYear: parseInt(moment().subtract(100, 'year').locale('en').format('YYYY')),
maxYear: parseInt(moment().add(100, 'year').locale('en').format('YYYY')),
locale: {
direction: abp.localization.currentCulture.isRightToLeft ? 'rtl' : 'ltr',
todayLabel: abp.localization.localize('Today', 'AbpUi'),
clearLabel: abp.localization.localize('Clear', 'AbpUi'),
applyLabel: abp.localization.localize('Apply', 'AbpUi'),
},
singleOpenAndClearButton: true
};
var locale = defaultOptions.locale;
$.extend(options, defaultOptions);
$.extend(options, $datePickerElement.data());
if ($.isEmptyObject(options.locale)) {
options.locale = locale;
} else {
locale = options.locale;
}
if (options.timePicker && options.timePicker24Hour === undefined) {
options.timePicker24Hour = moment.localeData().longDateFormat('LT').indexOf('A') < 1;
}
$.extend(options, $datePickerElement.data("options"));
if ($.isEmptyObject(options.locale)) {
options.locale = locale;
}
var isUtc = options.isUtc;
var isIso = options.isIso;
var timePicker = options.timePicker;
var timePicker24Hour = options.timePicker24Hour;
var timePickerSeconds = options.timePickerSeconds;
var dateFormat = options.dateFormat;
var separator = options.separator;
var defaultDateFormat = "YYYY-MM-DD";
var singleOpenAndClearButton = options.singleOpenAndClearButton && $clearButton.length > 0 && $openButton.length > 0;
if (options.timePicker && options.timePicker24Hour === undefined) {
options.timePicker24Hour = moment.localeData().longDateFormat('LT').indexOf('A') < 1;
}
const replaceButton = function (hasDate) {
var hiddenClass = 'd-none';
if (singleOpenAndClearButton) {
if (hasDate) {
$openButton.addClass(hiddenClass);
$clearButton.removeClass(hiddenClass);
$clearButton.insertAfter($openButton);
} else {
$openButton.removeClass(hiddenClass);
$clearButton.addClass(hiddenClass);
$openButton.insertAfter($clearButton);
}
}
}
if (options.dateFormat) {
options.locale = options.locale || {};
options.locale.format = options.dateFormat;
}
const getMoment = function (date) {
if (!date) {
return isUtc ? moment.utc() : moment();
}
if (options.separator) {
options.locale = options.locale || {};
options.locale.separator = options.separator;
}
if (isUtc) {
return moment.utc(date, dateFormat);
if (options.ranges) {
$.each(options.ranges, function (key, value) {
let start = value[0];
let end;
if (value.length > 1) {
end = value[1];
} else {
return moment(date, dateFormat);
end = value[0];
}
}
options.ranges[key] = [getMoment(start, options), getMoment(end, options.isUtc)];
});
}
if (dateFormat) {
options.locale = options.locale || {};
options.locale.format = dateFormat;
}
if (typeof options.template !== 'string' && !(options.template instanceof $))
options.template =
'<div class="daterangepicker">' +
'<div class="ranges"></div>' +
'<div class="drp-calendar left">' +
'<div class="calendar-table"></div>' +
'<div class="calendar-time"></div>' +
'</div>' +
'<div class="drp-calendar right">' +
'<div class="calendar-table"></div>' +
'<div class="calendar-time"></div>' +
'</div>' +
'<div class="drp-buttons">' +
'<button class="applyBtn" disabled="disabled" type="button"></button> ' +
'</div>' +
'</div>';
}
if (separator) {
options.locale = options.locale || {};
options.locale.separator = separator;
}
function replaceOpenButton (hasDate,singleOpenAndClearButton, $openButton, $clearButton) {
var hiddenClass = 'd-none';
var startDate = options.startDate ? moment(options.startDate) : null;
if (singleDatePicker && !startDate) {
startDate = options.date ? moment(options.date) : null;
if (singleOpenAndClearButton) {
if (hasDate) {
$openButton.addClass(hiddenClass);
$clearButton.removeClass(hiddenClass);
$clearButton.insertAfter($openButton);
} else {
$openButton.removeClass(hiddenClass);
$clearButton.addClass(hiddenClass);
$openButton.insertAfter($clearButton);
}
}
}
var endDate = options.endDate ? moment(options.endDate) : null;
if (startDate) {
options.startDate = startDate;
}
if (endDate) {
options.endDate = endDate;
}
function getMoment (date, options, dateFormat) {
var isUtc = options.isUtc;
dateFormat = dateFormat || options.dateFormat;
if (!date) {
return isUtc ? moment.utc() : moment();
}
if (options.ranges) {
$.each(options.ranges, function (key, value) {
let start = value[0];
let end;
if (value.length > 1) {
end = value[1];
} else {
end = value[0];
}
options.ranges[key] = [getMoment(start), getMoment(end)];
});
if (isUtc) {
return moment.utc(date, dateFormat);
} else {
return moment(date, dateFormat);
}
}
function getStartDate(options, startDate){
startDate = startDate ? startDate : options.startDate;
startDate = startDate ? getMoment(startDate, options) : null;
if (options.singleDatePicker && !startDate) {
startDate = options.date ? getMoment(options.date, options) : null;
}
if(startDate && startDate.isValid()){
return startDate;
}
return null;
}
function getEndDate(options, endDate){
if (options.singleDatePicker) {
return null;
}
endDate = endDate ? endDate : options.endDate;
endDate = endDate ? getMoment(endDate, options) : null;
if(endDate && endDate.isValid()){
return endDate;
}
return null;
}
function getTodayButton(options, $input){
if (options.showTodayButton) {
var $todayBtn = $('<button type="button" class="btn btn-sm today-btn" data-action="today">' + options.locale.todayLabel + '</button>');
if(options.todayButtonClasses){
$todayBtn.addClass(options.todayButtonClasses);
}else{
$todayBtn.addClass('btn-default');
}
var $todayBtn = $('<button type="button" class="btn btn-sm btn-default today-btn" data-action="today">' + options.locale.todayLabel + '</button>');
var $clearBtn = $('<button type="button" class="btn btn-sm btn-default clear-btn" data-action="clear">' + options.locale.clearLabel + '</button>');
var extraButtons = [];
if (options.showTodayButton) {
extraButtons.push($todayBtn);
$todayBtn.on('click', function () {
var today = getMoment();
$input.data('daterangepicker').setStartDate(today);
$input.data('daterangepicker').setEndDate(today);
$input.data('daterangepicker').updateView();
});
$todayBtn.on('click', function () {
var today = getMoment(undefined, options);
$input.data('daterangepicker').setStartDate(today);
$input.data('daterangepicker').setEndDate(today);
$input.data('daterangepicker').updateView();
});
return $todayBtn;
}
return null;
}
function getClearButton(options, $input, $dateRangePicker){
if (options.showClearButton) {
var $clearBtn = $('<button type="button" class="btn btn-sm clear-btn" data-action="clear">' + options.locale.clearLabel + '</button>');
if(options.clearButtonClasses){
$clearBtn.addClass(options.clearButtonClasses);
}else{
$clearBtn.addClass('btn-default');
}
$clearBtn.on('click', function () {
$input.val('').trigger('change');
$dateRangePicker.hide();
});
return $clearBtn;
}
return null;
}
function addExtraButtons(options, $dateRangePicker, $input) {
var extraButtons = [getTodayButton(options, $input), getClearButton(options, $input, $dateRangePicker)];
if ($dateRangePicker.container.find('.drp-buttons').css('display') !== 'none') {
if (options.showClearButton) {
extraButtons.push($clearBtn);
$.each(extraButtons, function (index, value) {
$dateRangePicker.container.find('.drp-buttons').prepend(value);
});
} else {
var $div = $('<div class="drp-buttons extra-buttons"></div>');
$div.css('display', 'block');
$.each(extraButtons, function (index, value) {
$div.prepend(value);
});
$clearBtn.on('click', function () {
$input.val('').trigger('change');
$dateRangePicker.hide();
});
$div.insertAfter($dateRangePicker.container.find('.drp-buttons'));
}
}
function addOpenButtonClick($openButton, $dateRangePicker){
if(!$openButton){
return;
}
$dateRangePicker.outsideClick = function (e) {
var target = $(e.target);
// if the page is clicked anywhere except within the daterangerpicker/button itself then call this.hide()
if (
// ie modal dialog fix
e.type == "focusin" ||
target.closest(this.element).length ||
target.closest(this.container).length ||
target.closest('.calendar-table').length ||
target.closest($openButton).length
) {
return;
}
if (typeof options.template !== 'string' && !(options.template instanceof $))
options.template =
'<div class="daterangepicker">' +
'<div class="ranges"></div>' +
'<div class="drp-calendar left">' +
'<div class="calendar-table"></div>' +
'<div class="calendar-time"></div>' +
'</div>' +
'<div class="drp-calendar right">' +
'<div class="calendar-table"></div>' +
'<div class="calendar-time"></div>' +
'</div>' +
'<div class="drp-buttons">' +
'<button class="applyBtn" disabled="disabled" type="button"></button> ' +
'</div>' +
'</div>';
$input.daterangepicker(options);
var $dateRangePicker = $input.data('daterangepicker');
this.hide();
this.element.trigger('outsideClick.daterangepicker', this);
};
if ($dateRangePicker.container.find('.drp-buttons').css('display') !== 'none') {
$openButton.on('click', function () {
$dateRangePicker.toggle();
});
}
$.each(extraButtons, function (index, value) {
$dateRangePicker.container.find('.drp-buttons').prepend(value);
});
function extendDateFormat (format,options) {
if (options.timePicker) {
if (options.timePicker24Hour) {
if (options.timePickerSeconds) {
format += " HH:mm:ss";
} else {
format += " HH:mm";
}
} else {
if (options.timePickerSeconds) {
format += ' ' + " hh:mm:ss A"
} else {
format += " hh:mm A";
}
}
else {
var $div = $('<div class="drp-buttons extra-buttons"></div>');
$div.css('display', 'block');
$.each(extraButtons, function (index, value) {
$div.prepend(value);
});
}
$div.insertAfter($dateRangePicker.container.find('.drp-buttons'));
return format;
}
function fillInput($input, startDate, endDate, options) {
if (options.singleDatePicker) {
if (startDate) {
$input.val(startDate.format(options.dateFormat));
}
} else {
if (startDate && endDate) {
$input.val(startDate.format(options.dateFormat) + options.separator + endDate.format(options.dateFormat));
}
}
}
$rootElement
.findWithSelf('abp-date-picker,abp-date-range-picker')
.each(function () {
var $this = $(this);
var $input = $this.find('.input-group input[type="text"]')
if ($input.data('daterangepicker')) {
return;
}
$dateRangePicker.outsideClick = function (e) {
var target = $(e.target);
// if the page is clicked anywhere except within the daterangerpicker/button itself then call this.hide()
if (
// ie modal dialog fix
e.type == "focusin" ||
target.closest(this.element).length ||
target.closest(this.container).length ||
target.closest('.calendar-table').length ||
target.closest($openButton).length
) {
return;
}
var $openButton = $this.find('button[data-type="open"]')
var $clearButton = $this.find('button[data-type="clear"]')
var singleDatePicker = $this.is('abp-date-picker')
var options = {};
setOptions(options, $this, singleDatePicker);
this.hide();
this.element.trigger('outsideClick.daterangepicker', this);
};
var isIso = options.isIso;
var dateFormat = options.dateFormat;
var separator = options.separator;
var defaultDateFormat = extendDateFormat("YYYY-MM-DD", options);
var singleOpenAndClearButton = options.singleOpenAndClearButton && $clearButton.length > 0 && $openButton.length > 0;
var startDate = getStartDate(options);
$openButton.on('click', function () {
$dateRangePicker.toggle();
});
var endDate = getEndDate(options);
if (startDate) {
options.startDate = startDate;
}
if (endDate) {
options.endDate = endDate;
}
const extendDateFormat = function (format) {
if (timePicker) {
if (timePicker24Hour) {
if (timePickerSeconds) {
format += " HH:mm:ss";
} else {
format += " HH:mm";
}
} else {
if (timePickerSeconds) {
format += ' ' + " hh:mm:ss A"
} else {
format += " hh:mm A";
}
}
}
$input.daterangepicker(options);
return format;
}
var $dateRangePicker = $input.data('daterangepicker');
defaultDateFormat = extendDateFormat(defaultDateFormat);
addExtraButtons(options, $dateRangePicker, $input);
addOpenButtonClick($openButton, $dateRangePicker);
if (!dateFormat) {
dateFormat = extendDateFormat(moment.localeData().longDateFormat('L'))
dateFormat = extendDateFormat(moment.localeData().longDateFormat('L'), options);
options.dateFormat = dateFormat;
}
if (!separator) {
separator = $dateRangePicker.locale.separator;
options.separator = separator;
}
if (singleDatePicker) {
if (startDate) {
$input.val(startDate.format(dateFormat));
}
} else {
if (startDate && endDate) {
$input.val(startDate.format(dateFormat) + separator + endDate.format(dateFormat));
}
if(options.autoUpdateInput){
fillInput($input, startDate, endDate, options);
}
$input.on('apply.daterangepicker', function (ev, picker) {
if (singleDatePicker) {
$(this).val(picker.startDate.format(dateFormat));
@ -560,8 +623,8 @@
});
$input.on('show.daterangepicker', function (ev, picker) {
var momentStartDate = getMoment(startDate);
var momentEndDate = getMoment(endDate);
var momentStartDate = getMoment(startDate, options);
var momentEndDate = getMoment(endDate, options);
if (momentStartDate.isValid()) {
picker.setStartDate(momentStartDate);
}
@ -575,47 +638,35 @@
$input.trigger('change');
});
var firstTrigger = true;
$input.on('change', function () {
if ($(this).val() !== '') {
replaceButton(true);
replaceOpenButton(true, singleOpenAndClearButton, $openButton, $clearButton);
} else {
replaceButton(false);
replaceOpenButton(false, singleOpenAndClearButton, $openButton, $clearButton);
}
var dates = $(this).val().split(separator);
if (dates.length === 2) {
startDate = getMoment(dates[0]);
if (!startDate.isValid()) {
startDate = null;
} else {
startDate = formatDate(startDate);
}
endDate = getMoment(dates[1]);
if (!endDate.isValid()) {
endDate = null;
} else {
endDate = formatDate(endDate);
}
startDate = formatDate(getStartDate(options, dates[0]));
endDate = formatDate(getEndDate(options, dates[1]));
} else {
if (dates[0]) {
startDate = getMoment(dates[0]);
if (!startDate.isValid()) {
startDate = null;
} else {
startDate = formatDate(startDate);
}
startDate = formatDate(getStartDate(options, dates[0]));
}
else {
startDate = null;
if(!firstTrigger){
startDate = null;
}
}
endDate = null;
if(!firstTrigger){
endDate = null;
}
}
if (!startDate) {
replaceButton(false);
replaceOpenButton(false, singleOpenAndClearButton, $openButton, $clearButton);
$(this).val('');
$dateRangePicker.setStartDate(getMoment());
$dateRangePicker.setEndDate(getMoment());
}
if (!singleDatePicker) {
@ -637,6 +688,8 @@
$input.data('startDate', startDate);
$input.data('endDate', endDate);
}
firstTrigger = false;
});
function formatDate(date) {
@ -652,7 +705,7 @@
function getFormattedStartDate() {
if (startDate) {
return getMoment(startDate).format(dateFormat);
return getMoment(startDate, options).format(dateFormat);
}
return null;
@ -660,7 +713,7 @@
function getFormattedEndDate() {
if (endDate) {
return getMoment(endDate).format(dateFormat);
return getMoment(endDate, options).format(dateFormat);
}
return null;

Write Preview
Loading…
Cancel
Save