@ -187,7 +187,7 @@
} ) ; } ) ;
} ) ; } ) ;
} }
abp . libs . bootstrapDateRangePicker = { abp . libs . bootstrapDateRangePicker = {
packageName : "bootstrap-daterangepicker" , packageName : "bootstrap-daterangepicker" ,
@ -207,6 +207,7 @@
if ( options . label ) { if ( options . label ) {
label . text ( options . label ) label . text ( options . label )
} }
$container . append ( label ) $container . append ( label )
var $datePicker = options . singleDatePicker ? $ ( '<abp-date-picker></abp-date-picker>' ) : $ ( '<abp-date-range-picker></abp-date-range-picker>' ) ; var $datePicker = options . singleDatePicker ? $ ( '<abp-date-picker></abp-date-picker>' ) : $ ( '<abp-date-range-picker></abp-date-range-picker>' ) ;
$container . append ( $datePicker ) $container . append ( $datePicker )
@ -292,19 +293,20 @@
return $container ; return $container ;
} }
} ; } ;
abp . dom . initializers . initializeDateRangePickers = function ( $rootElement ) { abp . dom . initializers . initializeDateRangePickers = function ( $rootElement ) {
$rootElement $rootElement
. findWithSelf ( 'abp-date-picker,abp-date-range-picker' ) . findWithSelf ( 'abp-date-picker,abp-date-range-picker' )
. each ( function ( ) { . each ( function ( ) {
var $this = $ ( this ) ; var $this = $ ( this ) ;
var $input = $ ( this ) . find ( '.input-group input[type="text"]' ) var $input = $this . find ( '.input-group input[type="text"]' )
if ( $input . data ( 'daterangepicker' ) ) { if ( $input . data ( 'daterangepicker' ) ) {
return ; return ;
} }
var $openButton = $ ( this ) . find ( 'button[data-type="open"]' )
var $clearButton = $ ( this ) . find ( 'button[data-type="clear"]' ) var $openButton = $this . find ( 'button[data-type="open"]' )
var $clearButton = $this . find ( 'button[data-type="clear"]' )
var singleDatePicker = $this . is ( 'abp-date-picker' ) var singleDatePicker = $this . is ( 'abp-date-picker' )
var options = { } ; var options = { } ;
options . singleDatePicker = singleDatePicker ; options . singleDatePicker = singleDatePicker ;
@ -321,29 +323,27 @@
maxYear : parseInt ( moment ( ) . add ( 100 , 'year' ) . locale ( 'en' ) . format ( 'YYYY' ) ) , maxYear : parseInt ( moment ( ) . add ( 100 , 'year' ) . locale ( 'en' ) . format ( 'YYYY' ) ) ,
locale : { locale : {
direction : abp . localization . currentCulture . isRightToLeft ? 'rtl' : 'ltr' , direction : abp . localization . currentCulture . isRightToLeft ? 'rtl' : 'ltr' ,
todayLabel : abp . localization . localize ( 'Today' , 'AbpUi' ) , todayLabel : abp . localization . localize ( 'Today' , 'AbpUi' ) ,
clearLabel : abp . localization . localize ( 'Clear' , 'AbpUi' ) , clearLabel : abp . localization . localize ( 'Clear' , 'AbpUi' ) ,
applyLabel : abp . localization . localize ( 'Apply' , 'AbpUi' ) , applyLabel : abp . localization . localize ( 'Apply' , 'AbpUi' ) ,
} , } ,
singleOpenAndClearButton : true singleOpenAndClearButton : true
} ; } ;
var locale = defaultOptions . locale ; var locale = defaultOptions . locale ;
$ . extend ( options , defaultOptions ) ; $ . extend ( options , defaultOptions ) ;
$ . extend ( options , $this . data ( ) ) ; $ . extend ( options , $this . data ( ) ) ;
if ( jQuery . isEmptyObject ( options . locale ) ) if ( jQuery . isEmptyObject ( options . locale ) ) {
{
options . locale = locale ; options . locale = locale ;
} else { } else {
locale = options . locale ; locale = options . locale ;
} }
$ . extend ( options , $this . data ( "options" ) ) ; $ . extend ( options , $this . data ( "options" ) ) ;
if ( jQuery . isEmptyObject ( options . locale ) ) if ( jQuery . isEmptyObject ( options . locale ) ) {
{
options . locale = locale ; options . locale = locale ;
} }
if ( options . timePicker && options . timePicker24Hour === undefined ) { if ( options . timePicker && options . timePicker24Hour === undefined ) {
options . timePicker24Hour = moment . localeData ( ) . longDateFormat ( 'LT' ) . indexOf ( 'A' ) < 1 ; options . timePicker24Hour = moment . localeData ( ) . longDateFormat ( 'LT' ) . indexOf ( 'A' ) < 1 ;
} }
@ -356,33 +356,35 @@
var separator = options . separator ; var separator = options . separator ;
var defaultDateFormat = "YYYY-MM-DD" ; var defaultDateFormat = "YYYY-MM-DD" ;
var singleOpenAndClearButton = options . singleOpenAndClearButton && $clearButton . length > 0 && $openButton . length > 0 ; var singleOpenAndClearButton = options . singleOpenAndClearButton && $clearButton . length > 0 && $openButton . length > 0 ;
const replaceButton = function ( hasDate ) { const replaceButton = function ( hasDate ) {
var hiddenClass = 'd-none' ; var hiddenClass = 'd-none' ;
if ( singleOpenAndClearButton ) {
if ( hasDate ) { if ( singleOpenAndClearButton ) {
if ( hasDate ) {
$openButton . addClass ( hiddenClass ) ; $openButton . addClass ( hiddenClass ) ;
$clearButton . removeClass ( hiddenClass ) ; $clearButton . removeClass ( hiddenClass ) ;
$clearButton . insertAfter ( $openButton ) ; $clearButton . insertAfter ( $openButton ) ;
} else { } else {
$openButton . removeClass ( hiddenClass ) ; $openButton . removeClass ( hiddenClass ) ;
$clearButton . addClass ( hiddenClass ) ; $clearButton . addClass ( hiddenClass ) ;
$openButton . insertAfter ( $clearButton ) ; $openButton . insertAfter ( $clearButton ) ;
} }
} }
} }
const getMoment = function ( date ) { const getMoment = function ( date ) {
if ( ! date ) { if ( ! date ) {
return isUtc ? moment . utc ( ) : moment ( ) ; return isUtc ? moment . utc ( ) : moment ( ) ;
} }
if ( isUtc ) {
return moment . utc ( date , dateFormat ) ; if ( isUtc ) {
} else { return moment . utc ( date , dateFormat ) ;
return moment ( date , dateFormat ) ; } else {
return moment ( date , dateFormat ) ;
} }
} }
if ( dateFormat ) { if ( dateFormat ) {
options . locale = options . locale || { } ; options . locale = options . locale || { } ;
options . locale . format = dateFormat ; options . locale . format = dateFormat ;
@ -394,25 +396,25 @@
} }
var startDate = options . startDate ? moment ( options . startDate ) : null ; var startDate = options . startDate ? moment ( options . startDate ) : null ;
if ( singleDatePicker && ! startDate ) { if ( singleDatePicker && ! startDate ) {
startDate = options . date ? moment ( options . date ) : null ; startDate = options . date ? moment ( options . date ) : null ;
} }
var endDate = options . endDate ? moment ( options . endDate ) : null ; var endDate = options . endDate ? moment ( options . endDate ) : null ;
if ( startDate ) { if ( startDate ) {
options . startDate = startDate ; options . startDate = startDate ;
} }
if ( endDate ) { if ( endDate ) {
options . endDate = endDate ; options . endDate = endDate ;
} }
if ( options . ranges ) { if ( options . ranges ) {
$ . each ( options . ranges , function ( key , value ) { $ . each ( options . ranges , function ( key , value ) {
let start = value [ 0 ] ; let start = value [ 0 ] ;
let end ; let end ;
if ( value . length > 1 ) { if ( value . length > 1 ) {
end = value [ 1 ] ; end = value [ 1 ] ;
} else { } else {
end = value [ 0 ] ; end = value [ 0 ] ;
} }
options . ranges [ key ] = [ getMoment ( start ) , getMoment ( end ) ] ; options . ranges [ key ] = [ getMoment ( start ) , getMoment ( end ) ] ;
@ -421,11 +423,11 @@
var $todayBtn = $ ( '<button type="button" class="btn btn-sm btn-default today-btn" data-action="today">' + options . locale . todayLabel + '</button>' ) ; 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 $clearBtn = $ ( '<button type="button" class="btn btn-sm btn-default clear-btn" data-action="clear">' + options . locale . clearLabel + '</button>' ) ;
var extraButtons = [ ] ; var extraButtons = [ ] ;
if ( options . showTodayButton ) { if ( options . showTodayButton ) {
extraButtons . push ( $todayBtn ) ; extraButtons . push ( $todayBtn ) ;
$todayBtn . on ( 'click' , function ( ) { $todayBtn . on ( 'click' , function ( ) {
var today = getMoment ( ) ; var today = getMoment ( ) ;
$input . data ( 'daterangepicker' ) . setStartDate ( today ) ; $input . data ( 'daterangepicker' ) . setStartDate ( today ) ;
@ -433,43 +435,44 @@
$input . data ( 'daterangepicker' ) . updateView ( ) ; $input . data ( 'daterangepicker' ) . updateView ( ) ;
} ) ; } ) ;
} }
if ( options . showClearButton ) { if ( options . showClearButton ) {
extraButtons . push ( $clearBtn ) ; extraButtons . push ( $clearBtn ) ;
$clearBtn . on ( 'click' , function ( ) { $clearBtn . on ( 'click' , function ( ) {
$input . val ( '' ) . trigger ( 'change' ) ; $input . val ( '' ) . trigger ( 'change' ) ;
$dateRangePicker . hide ( ) ; $dateRangePicker . hide ( ) ;
} ) ; } ) ;
} }
if ( typeof options . template !== 'string' && ! ( options . template instanceof $ ) ) if ( typeof options . template !== 'string' && ! ( options . template instanceof $ ) )
options . template = options . template =
'<div class="daterangepicker">' + '<div class="daterangepicker">' +
'<div class="ranges"></div>' + '<div class="ranges"></div>' +
'<div class="drp-calendar left">' + '<div class="drp-calendar left">' +
'<div class="calendar-table"></div>' + '<div class="calendar-table"></div>' +
'<div class="calendar-time"></div>' + '<div class="calendar-time"></div>' +
'</div>' + '</div>' +
'<div class="drp-calendar right">' + '<div class="drp-calendar right">' +
'<div class="calendar-table"></div>' + '<div class="calendar-table"></div>' +
'<div class="calendar-time"></div>' + '<div class="calendar-time"></div>' +
'</div>' + '</div>' +
'<div class="drp-buttons">' + '<div class="drp-buttons">' +
'<button class="applyBtn" disabled="disabled" type="button"></button> ' + '<button class="applyBtn" disabled="disabled" type="button"></button> ' +
'</div>' + '</div>' +
'</div>' ; '</div>' ;
$input . daterangepicker ( options ) ; $input . daterangepicker ( options ) ;
var $dateRangePicker = $input . data ( 'daterangepicker' ) ; var $dateRangePicker = $input . data ( 'daterangepicker' ) ;
if ( $dateRangePicker . container . find ( '.drp-buttons' ) . css ( 'display' ) !== 'none' ) { if ( $dateRangePicker . container . find ( '.drp-buttons' ) . css ( 'display' ) !== 'none' ) {
$ . each ( extraButtons , function ( index , value ) { $ . each ( extraButtons , function ( index , value ) {
$dateRangePicker . container . find ( '.drp-buttons' ) . prepend ( value ) ; $dateRangePicker . container . find ( '.drp-buttons' ) . prepend ( value ) ;
} ) ; } ) ;
} }
else { else {
var $div = $ ( '<div class="drp-buttons extra-buttons"></div>' ) ; var $div = $ ( '<div class="drp-buttons extra-buttons"></div>' ) ;
$div . css ( 'display' , 'block' ) ; $div . css ( 'display' , 'block' ) ;
$ . each ( extraButtons , function ( index , value ) { $ . each ( extraButtons , function ( index , value ) {
@ -477,14 +480,11 @@
} ) ; } ) ;
$div . insertAfter ( $dateRangePicker . container . find ( '.drp-buttons' ) ) ; $div . insertAfter ( $dateRangePicker . container . find ( '.drp-buttons' ) ) ;
} }
$dateRangePicker . outsideClick = function ( e ) {
$dateRangePicker . outsideClick = function ( e ) {
var target = $ ( e . target ) ; var target = $ ( e . target ) ;
// if the page is clicked anywhere except within the daterangerpicker/button
// if the page is clicked anywhere except within the daterangerpicker/button itself then call this.hide()
// itself then call this.hide()
if ( if (
// ie modal dialog fix
// ie modal dialog fix
e . type == "focusin" || e . type == "focusin" ||
@ -492,24 +492,27 @@
target . closest ( this . container ) . length || target . closest ( this . container ) . length ||
target . closest ( '.calendar-table' ) . length || target . closest ( '.calendar-table' ) . length ||
target . closest ( $openButton ) . length target . closest ( $openButton ) . length
) return ; ) {
return ;
}
this . hide ( ) ; this . hide ( ) ;
this . element . trigger ( 'outsideClick.daterangepicker' , this ) ; this . element . trigger ( 'outsideClick.daterangepicker' , this ) ;
} ; } ;
$openButton . on ( 'click' , function ( ) { $openButton . on ( 'click' , function ( ) {
$dateRangePicker . toggle ( ) ; $dateRangePicker . toggle ( ) ;
} ) ; } ) ;
const extendDateFormat = function ( format ) { const extendDateFormat = function ( format ) {
if ( timePicker ) { if ( timePicker ) {
if ( timePicker24Hour ) { if ( timePicker24Hour ) {
if ( timePickerSeconds ) { if ( timePickerSeconds ) {
format += " HH:mm:ss" ; format += " HH:mm:ss" ;
} else { } else {
format += " HH:mm" ; format += " HH:mm" ;
} }
} else { } else {
if ( timePickerSeconds ) { if ( timePickerSeconds ) {
format += ' ' + " hh:mm:ss A" format += ' ' + " hh:mm:ss A"
} else { } else {
@ -517,33 +520,34 @@
} }
} }
} }
return format ; return format ;
} }
defaultDateFormat = extendDateFormat ( defaultDateFormat ) ; defaultDateFormat = extendDateFormat ( defaultDateFormat ) ;
if ( ! dateFormat ) { if ( ! dateFormat ) {
dateFormat = extendDateFormat ( moment . localeData ( ) . longDateFormat ( 'L' ) ) dateFormat = extendDateFormat ( moment . localeData ( ) . longDateFormat ( 'L' ) )
} }
if ( ! separator ) { if ( ! separator ) {
separator = $dateRangePicker . locale . separator ; separator = $dateRangePicker . locale . separator ;
} }
if ( singleDatePicker ) { if ( singleDatePicker ) {
if ( startDate ) { if ( startDate ) {
$input . val ( startDate . format ( dateFormat ) ) ; $input . val ( startDate . format ( dateFormat ) ) ;
} }
} else { } else {
if ( startDate && endDate ) { if ( startDate && endDate ) {
$input . val ( startDate . format ( dateFormat ) + separator + endDate . format ( dateFormat ) ) ; $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 ) ) ;
} else { } else {
$ ( this ) . val ( picker . startDate . format ( dateFormat ) + separator + picker . endDate . format ( dateFormat ) ) ; $ ( this ) . val ( picker . startDate . format ( dateFormat ) + separator + picker . endDate . format ( dateFormat ) ) ;
} }
@ -554,6 +558,7 @@
$ ( this ) . val ( '' ) ; $ ( this ) . val ( '' ) ;
$ ( this ) . trigger ( 'change' ) ; $ ( this ) . trigger ( 'change' ) ;
} ) ; } ) ;
$input . on ( 'show.daterangepicker' , function ( ev , picker ) { $input . on ( 'show.daterangepicker' , function ( ev , picker ) {
var momentStartDate = getMoment ( startDate ) ; var momentStartDate = getMoment ( startDate ) ;
var momentEndDate = getMoment ( endDate ) ; var momentEndDate = getMoment ( endDate ) ;
@ -564,7 +569,6 @@
picker . setEndDate ( momentEndDate ) ; picker . setEndDate ( momentEndDate ) ;
} }
} ) ; } ) ;
$clearButton . on ( 'click' , function ( ) { $clearButton . on ( 'click' , function ( ) {
$input . val ( '' ) ; $input . val ( '' ) ;
@ -572,9 +576,9 @@
} ) ; } ) ;
$input . on ( 'change' , function ( ) { $input . on ( 'change' , function ( ) {
if ( $ ( this ) . val ( ) !== '' ) { if ( $ ( this ) . val ( ) !== '' ) {
replaceButton ( true ) ; replaceButton ( true ) ;
} else { } else {
replaceButton ( false ) ; replaceButton ( false ) ;
} }
var dates = $ ( this ) . val ( ) . split ( separator ) ; var dates = $ ( this ) . val ( ) . split ( separator ) ;
@ -582,91 +586,97 @@
startDate = getMoment ( dates [ 0 ] ) ; startDate = getMoment ( dates [ 0 ] ) ;
if ( ! startDate . isValid ( ) ) { if ( ! startDate . isValid ( ) ) {
startDate = null ; startDate = null ;
} else { } else {
startDate = formatDate ( startDate ) ; startDate = formatDate ( startDate ) ;
} }
endDate = getMoment ( dates [ 1 ] ) ; endDate = getMoment ( dates [ 1 ] ) ;
if ( ! endDate . isValid ( ) ) { if ( ! endDate . isValid ( ) ) {
endDate = null ; endDate = null ;
} else { } else {
endDate = formatDate ( endDate ) ; endDate = formatDate ( endDate ) ;
} }
} else { } else {
if ( dates [ 0 ] ) { if ( dates [ 0 ] ) {
startDate = getMoment ( dates [ 0 ] ) ; startDate = getMoment ( dates [ 0 ] ) ;
if ( ! startDate . isValid ( ) ) { if ( ! startDate . isValid ( ) ) {
startDate = null ; startDate = null ;
} else { } else {
startDate = formatDate ( startDate ) ; startDate = formatDate ( startDate ) ;
} }
} }
else { else {
startDate = null ; startDate = null ;
} }
endDate = null ; endDate = null ;
} }
if ( ! startDate ) {
if ( ! startDate ) {
replaceButton ( false ) ; replaceButton ( false ) ;
$ ( this ) . val ( '' ) ; $ ( this ) . val ( '' ) ;
$dateRangePicker . setStartDate ( getMoment ( ) ) ; $dateRangePicker . setStartDate ( getMoment ( ) ) ;
$dateRangePicker . setEndDate ( getMoment ( ) ) ; $dateRangePicker . setEndDate ( getMoment ( ) ) ;
} }
if ( ! singleDatePicker ) { if ( ! singleDatePicker ) {
var input1 = $this . find ( "input[data-start-date]" ) var input1 = $this . find ( "input[data-start-date]" )
input1 . val ( startDate ) ; input1 . val ( startDate ) ;
var input2 = $this . find ( "input[data-end-date]" ) var input2 = $this . find ( "input[data-end-date]" )
input2 . val ( endDate ) ; input2 . val ( endDate ) ;
} else { } else {
var input = $this . find ( "input[data-date]" ) var input = $this . find ( "input[data-date]" )
input . val ( startDate ) ; input . val ( startDate ) ;
} }
if ( singleDatePicker ) { if ( singleDatePicker ) {
$this . data ( 'date' , startDate ) ; $this . data ( 'date' , startDate ) ;
$input . data ( 'date' , startDate ) ; $input . data ( 'date' , startDate ) ;
} else { } else {
$this . data ( 'startDate' , startDate ) ; $this . data ( 'startDate' , startDate ) ;
$this . data ( 'endDate' , endDate ) ; $this . data ( 'endDate' , endDate ) ;
$input . data ( 'startDate' , startDate ) ; $input . data ( 'startDate' , startDate ) ;
$input . data ( 'endDate' , endDate ) ; $input . data ( 'endDate' , endDate ) ;
} }
} ) ; } ) ;
function formatDate ( date ) { function formatDate ( date ) {
if ( date ) { if ( date ) {
if ( isIso ) { if ( isIso ) {
return date . locale ( 'en' ) . format ( ) ; return date . locale ( 'en' ) . format ( ) ;
} }
return date . locale ( 'en' ) . format ( defaultDateFormat ) return date . locale ( 'en' ) . format ( defaultDateFormat )
} }
return null ; return null ;
} }
function getFormattedStartDate ( ) {
if ( startDate ) { function getFormattedStartDate ( ) {
if ( startDate ) {
return getMoment ( startDate ) . format ( dateFormat ) ; return getMoment ( startDate ) . format ( dateFormat ) ;
} }
return null ; return null ;
} }
function getFormattedEndDate ( ) { function getFormattedEndDate ( ) {
if ( endDate ) { if ( endDate ) {
return getMoment ( endDate ) . format ( dateFormat ) ; return getMoment ( endDate ) . format ( dateFormat ) ;
} }
return null ; return null ;
} }
if ( singleDatePicker ) { if ( singleDatePicker ) {
$this [ 0 ] . getFormattedDate = getFormattedStartDate ; $this [ 0 ] . getFormattedDate = getFormattedStartDate ;
$input [ 0 ] . getFormattedDate = getFormattedStartDate ; $input [ 0 ] . getFormattedDate = getFormattedStartDate ;
$dateRangePicker . getFormattedDate = getFormattedStartDate ; $dateRangePicker . getFormattedDate = getFormattedStartDate ;
} else { } else {
$dateRangePicker . getFormattedStartDate = getFormattedStartDate ; $dateRangePicker . getFormattedStartDate = getFormattedStartDate ;
$dateRangePicker . getFormattedEndDate = getFormattedEndDate ; $dateRangePicker . getFormattedEndDate = getFormattedEndDate ;
$this [ 0 ] . getFormattedStartDate = getFormattedStartDate ; $this [ 0 ] . getFormattedStartDate = getFormattedStartDate ;
$this [ 0 ] . getFormattedEndDate = getFormattedEndDate ; $this [ 0 ] . getFormattedEndDate = getFormattedEndDate ;
$input [ 0 ] . getFormattedStartDate = getFormattedStartDate ; $input [ 0 ] . getFormattedStartDate = getFormattedStartDate ;
$input [ 0 ] . getFormattedEndDate = getFormattedEndDate ; $input [ 0 ] . getFormattedEndDate = getFormattedEndDate ;
} }
Ebicoglu
4 years ago