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

Write Preview
Loading…
Cancel
Save