TimeTrex Community Edition v16.2.0
This commit is contained in:
440
interface/html5/global/widgets/datepicker/TDatePicker.js
Normal file
440
interface/html5/global/widgets/datepicker/TDatePicker.js
Normal file
@ -0,0 +1,440 @@
|
||||
( function( $ ) {
|
||||
|
||||
$.fn.TDatePicker = function( options ) {
|
||||
var opts = $.extend( {}, $.fn.TDatePicker.defaults, options );
|
||||
//Global.addCss( 'global/widgets/datepicker/TDatePicker.css' );
|
||||
|
||||
var $this = this;
|
||||
var field;
|
||||
var validation_field;
|
||||
var date_picker_input;
|
||||
var icon;
|
||||
var error_string = '';
|
||||
var error_tip_box;
|
||||
var mode = 'date';
|
||||
var multiple; // This is used to test Punches -> Edit view Date
|
||||
var mass_edit_mode = false;
|
||||
var check_box = null;
|
||||
var enabled = true;
|
||||
var is_open = false;
|
||||
var focus_out_timer;
|
||||
var can_open = false; //default when the calender can be open, we only open it when click on the icon
|
||||
var is_static_width = false;
|
||||
|
||||
this.getEnabled = function() {
|
||||
return enabled;
|
||||
};
|
||||
|
||||
this.setEnabled = function( val ) {
|
||||
enabled = val;
|
||||
if ( val === false || val === '' ) {
|
||||
//$this.attr( 'disabled', 'true' );
|
||||
date_picker_input.addClass( 't-date-picker-readonly' );
|
||||
icon.css( 'display', 'none' );
|
||||
date_picker_input.attr( 'readonly', 'readonly' );
|
||||
if ( check_box ) {
|
||||
check_box.hide();
|
||||
}
|
||||
} else {
|
||||
//$this.removeAttr( 'disabled' );
|
||||
date_picker_input.removeClass( 't-date-picker-readonly' );
|
||||
icon.css( 'display', 'inline' );
|
||||
date_picker_input.removeAttr( 'readonly' );
|
||||
if ( check_box ) {
|
||||
check_box.show();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.setCheckBox = function( val ) {
|
||||
if ( check_box ) {
|
||||
check_box.children().eq( 0 )[0].checked = val;
|
||||
}
|
||||
};
|
||||
|
||||
this.isChecked = function() {
|
||||
if ( check_box ) {
|
||||
if ( check_box.children().eq( 0 )[0].checked === true ) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
this.setMassEditMode = function( val ) {
|
||||
mass_edit_mode = val;
|
||||
|
||||
if ( mass_edit_mode ) {
|
||||
check_box = $( ' <div class="mass-edit-checkbox-wrapper"><input type="checkbox" class="mass-edit-checkbox"></input>' +
|
||||
'<label for="checkbox-input-1" class="input-helper input-helper--checkbox"></label></div>' );
|
||||
check_box.insertBefore( $( this ) );
|
||||
|
||||
check_box.change( function() {
|
||||
$this.trigger( 'formItemChange', [$this] );
|
||||
} );
|
||||
|
||||
} else {
|
||||
if ( check_box ) {
|
||||
check_box.remove();
|
||||
check_box = null;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.setErrorStyle = function( errStr, show, isWarning ) {
|
||||
if ( isWarning ) {
|
||||
date_picker_input.addClass( 'warning-tip' );
|
||||
} else {
|
||||
date_picker_input.addClass( 'error-tip' );
|
||||
}
|
||||
error_string = errStr;
|
||||
|
||||
if ( show ) {
|
||||
this.showErrorTip();
|
||||
}
|
||||
};
|
||||
|
||||
this.showErrorTip = function( sec ) {
|
||||
|
||||
if ( !Global.isSet( sec ) ) {
|
||||
sec = 2;
|
||||
}
|
||||
|
||||
if ( !error_tip_box ) {
|
||||
error_tip_box = Global.loadWidgetByName( WidgetNamesDic.ERROR_TOOLTIP );
|
||||
error_tip_box = error_tip_box.ErrorTipBox();
|
||||
}
|
||||
if ( date_picker_input.hasClass( 'warning-tip' ) ) {
|
||||
error_tip_box.show( this, error_string, sec, true );
|
||||
} else {
|
||||
error_tip_box.show( this, error_string, sec );
|
||||
}
|
||||
};
|
||||
|
||||
this.hideErrorTip = function() {
|
||||
|
||||
if ( Global.isSet( error_tip_box ) ) {
|
||||
error_tip_box.remove();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Error: TypeError: date_picker_input is undefined in /interface/html5/global/widgets/datepicker/TDatePicker.js?v=8.0.3-20150313-161037 line 122
|
||||
this.clearErrorStyle = function() {
|
||||
if ( !date_picker_input ) {
|
||||
return;
|
||||
}
|
||||
date_picker_input.removeClass( 'error-tip' );
|
||||
date_picker_input.removeClass( 'warning-tip' );
|
||||
this.hideErrorTip();
|
||||
error_string = '';
|
||||
};
|
||||
|
||||
this.getField = function() {
|
||||
return field;
|
||||
};
|
||||
|
||||
this.getValidationField = function() {
|
||||
return validation_field;
|
||||
};
|
||||
|
||||
this.getDefaultFormatValue = function() {
|
||||
// Error: Uncaught TypeError: Cannot read property 'val' of undefined in interface/html5/global/widgets/datepicker/TDatePicker.js?v=9.0.5-20151222-162114 line 145
|
||||
var val = date_picker_input ? date_picker_input.val() : null;
|
||||
//Error: Uncaught TypeError: Cannot read property 'format' of null in interface/html5/global/widgets/datepicker/TDatePicker.js?v=9.0.0-20150909-213207 line 140
|
||||
val = Global.strToDate( val ) && Global.strToDate( val ).format( 'YYYY-MM-DD' );
|
||||
|
||||
return val;
|
||||
};
|
||||
|
||||
this.setPlaceHolder = function( val ) {
|
||||
date_picker_input.attr( 'placeholder', val );
|
||||
};
|
||||
|
||||
this.getValue = function() {
|
||||
// This is used to test Punches -> Edit view Date
|
||||
if ( multiple ) {
|
||||
return [date_picker_input.val()];
|
||||
}
|
||||
|
||||
return date_picker_input.val();
|
||||
};
|
||||
|
||||
this.setValue = function( val ) {
|
||||
//Error: Uncaught TypeError: Cannot read property 'val' of undefined in /interface/html5/global/widgets/datepicker/TDatePicker.js?v=8.0.0-20141230-130626 line 144
|
||||
if ( !date_picker_input ) {
|
||||
return;
|
||||
}
|
||||
if ( !val ) {
|
||||
val = '';
|
||||
}
|
||||
date_picker_input.val( val );
|
||||
this.autoResize();
|
||||
};
|
||||
|
||||
this.setDefaultWidgetValue = function() {
|
||||
if ( $( this ).attr( 'widget-value' ) ) {
|
||||
this.setValue( $( this ).attr( 'widget-value' ) );
|
||||
}
|
||||
};
|
||||
|
||||
this.autoResize = function() {
|
||||
var content_width, example_width, example_display;
|
||||
if ( LocalCacheData.getLoginUserPreference() ) {
|
||||
example_display = LocalCacheData.getLoginUserPreference().date_format_display;
|
||||
} else {
|
||||
example_display = 'dd-mmm-yy';
|
||||
}
|
||||
if ( !is_static_width ) {
|
||||
if ( mode === 'date' ) {
|
||||
example_width = Global.calculateTextWidth( example_display );
|
||||
} else if ( mode === 'date_time' ) {
|
||||
example_width = Global.calculateTextWidth( example_display + ' ' + LocalCacheData.getLoginUserPreference().time_format_display );
|
||||
}
|
||||
content_width = Global.calculateTextWidth( date_picker_input.val(), {
|
||||
min_width: example_width,
|
||||
max_width: ( example_width + 100 ),
|
||||
padding: 28
|
||||
} );
|
||||
$this.width( content_width + 'px' );
|
||||
}
|
||||
};
|
||||
|
||||
this.each( function() {
|
||||
var o = $.meta ? $.extend( {}, opts, $( this ).data() ) : opts;
|
||||
field = o.field;
|
||||
if ( o.validation_field ) {
|
||||
validation_field = o.validation_field;
|
||||
}
|
||||
multiple = o.multiple; // This is used to test Punches -> Edit view Date
|
||||
if ( Global.isSet( o.mode ) ) {
|
||||
mode = o.mode;
|
||||
}
|
||||
icon = $( this ).find( '.t-date-picker-icon' );
|
||||
date_picker_input = $( this ).find( '.t-date-picker' );
|
||||
icon.attr( 'src', Global.getRealImagePath( 'images/cal.png' ) );
|
||||
|
||||
icon.bind( 'mousedown', function( e ) {
|
||||
e.stopPropagation(); //Stop jquery-ui datepickers own mousedown event from firing, which cause the date picker to close, then the below 'mouseup' event opens it again.
|
||||
} );
|
||||
|
||||
icon.bind( 'mouseup', function() { //Need to use 'mouseup' event as main.js binds 'mousedown' for closing when clicked off.
|
||||
if ( !enabled ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( !is_open ) {
|
||||
date_picker_input.datepicker( 'show' );
|
||||
is_open = true;
|
||||
} else {
|
||||
date_picker_input.datepicker( 'hide' );
|
||||
is_open = false;
|
||||
}
|
||||
} );
|
||||
|
||||
var time_format = 'h:mm TT';
|
||||
var format = 'dd-M-y';
|
||||
// When portal mode, no user preference.
|
||||
if ( LocalCacheData.getLoginUserPreference() ) {
|
||||
format = LocalCacheData.getLoginUserPreference().date_format_1;
|
||||
time_format = LocalCacheData.getLoginUserPreference().time_format_1;
|
||||
}
|
||||
var day_name_min = [
|
||||
$.i18n._( 'Sun' ), $.i18n._( 'Mon' ), $.i18n._( 'Tue' ),
|
||||
$.i18n._( 'Wed' ), $.i18n._( 'Thu' ), $.i18n._( 'Fri' ), $.i18n._( 'Sat' )
|
||||
];
|
||||
var month_name_short = [
|
||||
$.i18n._( 'Jan' ), $.i18n._( 'Feb' ),
|
||||
$.i18n._( 'Mar' ), $.i18n._( 'Apr' ), $.i18n._( 'May' ),
|
||||
$.i18n._( 'Jun' ), $.i18n._( 'Jul' ), $.i18n._( 'Aug' ),
|
||||
$.i18n._( 'Sep' ), $.i18n._( 'Oct' ), $.i18n._( 'Nov' ),
|
||||
$.i18n._( 'Dec' )
|
||||
];
|
||||
var current_text = $.i18n._( 'Today' );
|
||||
var close_text = $.i18n._( 'Close' );
|
||||
|
||||
$.datepicker._gotoToday = function( id ) {
|
||||
//This fixes JS exception when using the "TODAY" button in the date pickers: Uncaught TypeError: Cannot read property 'selectedYear' of undefined
|
||||
$( id ).datepicker( 'setDate', new Date() ).datepicker( 'hide' ).change();
|
||||
|
||||
// var target = $( id );
|
||||
// var inst = this._getInst( target[0] );
|
||||
// if ( this._get( inst, 'gotoCurrent' ) && inst.currentDay ) {
|
||||
// inst.selectedDay = inst.currentDay;
|
||||
// inst.drawMonth = inst.selectedMonth = inst.currentMonth;
|
||||
// inst.drawYear = inst.selectedYear = inst.currentYear;
|
||||
// }
|
||||
// else {
|
||||
// var date = new Date();
|
||||
// inst.selectedDay = date.getDate();
|
||||
// inst.drawMonth = inst.selectedMonth = date.getMonth();
|
||||
// inst.drawYear = inst.selectedYear = date.getFullYear();
|
||||
// // the below two lines are new
|
||||
// this._setDateDatepicker( target, date );
|
||||
// this._selectDate( id, this._getDateDatepicker( target ) );
|
||||
// $( target ).datepicker( 'setDate', date );
|
||||
// }
|
||||
// this._notifyChange( inst );
|
||||
// this._adjustDate( target );
|
||||
};
|
||||
|
||||
if ( mode === 'date' ) {
|
||||
date_picker_input = date_picker_input.datepicker( {
|
||||
showOtherMonths: true,
|
||||
selectOtherMonths: true,
|
||||
showTime: false,
|
||||
dateFormat: format,
|
||||
showHour: false,
|
||||
showMinute: false,
|
||||
changeMonth: true,
|
||||
changeYear: true,
|
||||
showButtonPanel: true,
|
||||
duration: '',
|
||||
showAnim: '',
|
||||
yearRange: '-100:+10',
|
||||
showOn: '',
|
||||
dayNamesMin: day_name_min,
|
||||
currentText: current_text,
|
||||
monthNamesShort: month_name_short,
|
||||
closeText: close_text,
|
||||
beforeShow: function() {
|
||||
if ( o.beforeShow ) {
|
||||
o.beforeShow();
|
||||
}
|
||||
},
|
||||
|
||||
onClose: function() {
|
||||
is_open = false;
|
||||
$this.autoResize();
|
||||
if ( o.onClose ) {
|
||||
o.onClose();
|
||||
}
|
||||
},
|
||||
|
||||
//#2353 - removed because it breaks the month navigation buttons
|
||||
// onChangeMonthYear: function( year, month, args ) {
|
||||
// var day = $.datepicker.formatDate( 'dd', $( this ).datepicker( 'getDate' ) );
|
||||
// $( this ).val( $.datepicker.formatDate( format, new Date( year, month - 1, day ) ) );
|
||||
// }
|
||||
|
||||
} );
|
||||
|
||||
// Portal mode, no user preference.
|
||||
if ( LocalCacheData.getLoginUserPreference() ) {
|
||||
$this.setPlaceHolder( LocalCacheData.getLoginUserPreference().date_format_display );
|
||||
} else {
|
||||
$this.setPlaceHolder( 'dd-mmm-yy' );
|
||||
}
|
||||
|
||||
} else if ( mode === 'date_time' ) {
|
||||
date_picker_input = date_picker_input.datetimepicker( {
|
||||
showOtherMonths: true,
|
||||
selectOtherMonths: true,
|
||||
dateFormat: format,
|
||||
timeFormat: time_format,
|
||||
showTime: true,
|
||||
showHour: true,
|
||||
showMinute: true,
|
||||
changeMonth: true,
|
||||
changeYear: true,
|
||||
showButtonPanel: true,
|
||||
duration: '',
|
||||
showAnim: '',
|
||||
showOn: '',
|
||||
yearRange: '-100:+10',
|
||||
closeText: close_text,
|
||||
dayNamesMin: day_name_min,
|
||||
monthNamesShort: month_name_short,
|
||||
currentText: current_text,
|
||||
onClose: function() {
|
||||
is_open = false;
|
||||
$this.autoResize();
|
||||
if ( o.onClose ) {
|
||||
o.onClose();
|
||||
}
|
||||
}
|
||||
} );
|
||||
$this.setPlaceHolder( LocalCacheData.loginUserPreference.date_format_display + ' ' + LocalCacheData.loginUserPreference.time_format_display );
|
||||
}
|
||||
|
||||
date_picker_input.change( function() {
|
||||
if ( check_box ) {
|
||||
$this.setCheckBox( true );
|
||||
}
|
||||
|
||||
$this.trigger( 'formItemChange', [$this] );
|
||||
$this.autoResize();
|
||||
} );
|
||||
|
||||
date_picker_input.mouseover( function() {
|
||||
|
||||
if ( enabled ) {
|
||||
if ( error_string && error_string.length > 0 ) {
|
||||
$this.showErrorTip( 20 );
|
||||
}
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
date_picker_input.mouseout( function() {
|
||||
if ( !$( $this ).is( ':focus' ) ) {
|
||||
$this.hideErrorTip();
|
||||
}
|
||||
} );
|
||||
|
||||
date_picker_input.focusin( function( e ) {
|
||||
if ( !enabled ) {
|
||||
if ( !check_box ) {
|
||||
if ( LocalCacheData.current_open_sub_controller &&
|
||||
LocalCacheData.current_open_sub_controller.edit_view &&
|
||||
LocalCacheData.current_open_sub_controller.is_viewing ) {
|
||||
error_string = LocalCacheData.current_open_sub_controller.getViewModeErrorMessage();
|
||||
$this.showErrorTip( 10 );
|
||||
} else if ( LocalCacheData.current_open_primary_controller &&
|
||||
LocalCacheData.current_open_primary_controller.edit_view &&
|
||||
LocalCacheData.current_open_primary_controller.is_viewing ) {
|
||||
error_string = LocalCacheData.current_open_primary_controller.getViewModeErrorMessage();
|
||||
$this.showErrorTip( 10 );
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
if ( error_string && error_string.length > 0 ) {
|
||||
$this.showErrorTip( 20 );
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
date_picker_input.focusout( function() {
|
||||
$this.hideErrorTip();
|
||||
|
||||
} );
|
||||
|
||||
if ( o.width > 0 ) {
|
||||
$this.width( o.width );
|
||||
is_static_width = true;
|
||||
} else {
|
||||
$this.autoResize();
|
||||
is_static_width = false;
|
||||
}
|
||||
|
||||
$this.setDefaultWidgetValue();
|
||||
|
||||
} );
|
||||
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
$.fn.TDatePicker.defaults = {};
|
||||
$.fn.TDatePicker.html_template = `
|
||||
<div class="t-date-picker-div">
|
||||
<input class="t-date-picker" type="text"/>
|
||||
<img id="tDatePickerIcon" class="t-date-picker-icon"/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
} )( jQuery );
|
||||
@ -0,0 +1,8 @@
|
||||
<table class="inside-editor-render">
|
||||
<tr class="title">
|
||||
<td class="ranger-picker-dates-width-tr" style="width: 250px"><%= start_date_stamp %></td>
|
||||
<td style="width: 25px">
|
||||
</td>
|
||||
<td style="width: 25px"></td>
|
||||
</tr>
|
||||
</table>
|
||||
@ -0,0 +1,9 @@
|
||||
<tr class="inside-editor-row data-row">
|
||||
<td class="start-date-stamp cell"></td>
|
||||
<td class="cell control-icon">
|
||||
<button class="plus-icon" onclick=""></button>
|
||||
</td>
|
||||
<td class="cell control-icon">
|
||||
<button class="minus-icon " onclick=""></button>
|
||||
</td>
|
||||
</tr>
|
||||
29
interface/html5/global/widgets/datepicker/TRangePicker.html
Normal file
29
interface/html5/global/widgets/datepicker/TRangePicker.html
Normal file
@ -0,0 +1,29 @@
|
||||
<div class="edit-view t-range-picker-div">
|
||||
<div class="edit-view-tab-bar t-range-picker-tab-bar">
|
||||
<span class="close-icon"></span>
|
||||
<ul class="edit-view-tab-bar-label">
|
||||
<li><a ref="tab_range" href="#tab_range"></a></li>
|
||||
<li><a ref="tab_date" href="#tab_date"></a></li>
|
||||
</ul>
|
||||
<div id="tab_range" class="edit-view-tab-outside">
|
||||
<div class="edit-view-tab" id="tab_range_content_div">
|
||||
<div class="full-width-column">
|
||||
<div class="col-section start-picker-section">
|
||||
<span class="label start-picker-label"></span>
|
||||
<div class="start-picker"></div>
|
||||
</div>
|
||||
<div class="col-section end-picker-section">
|
||||
<span class="label end-picker-label"></span>
|
||||
<div class="end-picker"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab_date" class="edit-view-tab-outside">
|
||||
<div class="edit-view-tab" id="tab_date_content_div">
|
||||
<div class="inside-editor-div full-width-column">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
630
interface/html5/global/widgets/datepicker/TRangePicker.js
Normal file
630
interface/html5/global/widgets/datepicker/TRangePicker.js
Normal file
@ -0,0 +1,630 @@
|
||||
( function( $ ) {
|
||||
|
||||
$.fn.TRangePicker = function( options ) {
|
||||
var opts = $.extend( {}, $.fn.TRangePicker.defaults, options );
|
||||
//Global.addCss( 'global/widgets/datepicker/TDatePicker.css' );
|
||||
|
||||
var $this = this;
|
||||
var field;
|
||||
var validation_field;
|
||||
var date_picker_input;
|
||||
var icon;
|
||||
var error_string = '';
|
||||
var error_tip_box;
|
||||
var mass_edit_mode = false;
|
||||
var check_box = null;
|
||||
var enabled = true;
|
||||
var is_open = false;
|
||||
var focus_out_timer;
|
||||
var is_mouse_over = false;
|
||||
var ranger_picker;
|
||||
|
||||
var range_start_picker;
|
||||
var range_end_picker;
|
||||
|
||||
var result;
|
||||
|
||||
var editor;
|
||||
|
||||
var can_not_close = false;
|
||||
|
||||
var tab_bars;
|
||||
|
||||
var date_picker;
|
||||
|
||||
var default_width_by_format = {
|
||||
'DD-MMM-YY': 100,
|
||||
'ddd, MMMM DD YYYY': 170,
|
||||
'dddd, MMMM DD YYYY': 190,
|
||||
'DD-MMM-YYYY': 110,
|
||||
'DDMMMYYYY': 100,
|
||||
'DD/MM/YYYY': 100,
|
||||
'DD/MM/YY': 100,
|
||||
'DD-MM-YY': 100,
|
||||
'DD-MM-YYYY': 100,
|
||||
'MM/DD/YY': 100,
|
||||
'MM/DD/YYYY': 100,
|
||||
'MM-DD-YY': 100,
|
||||
'MM-DD-YYYY': 100,
|
||||
'YYYY-MM-DD': 100,
|
||||
'MMM-DD-YY': 100,
|
||||
'MMM-DD-YYYY': 110,
|
||||
'ddd, MMM DD YYYY': 140,
|
||||
'ddd, DD-MMM-YYYY': 140,
|
||||
'ddd, DDMMMYYYY': 130
|
||||
};
|
||||
|
||||
this.getEnabled = function() {
|
||||
return enabled;
|
||||
};
|
||||
|
||||
this.setEnabled = function( val ) {
|
||||
enabled = val;
|
||||
if ( val === false || val === '' ) {
|
||||
$this.attr( 'disabled', 'true' );
|
||||
date_picker_input.addClass( 't-date-picker-readonly' );
|
||||
icon.css( 'display', 'none' );
|
||||
// date_picker_input.attr( 'readonly', 'readonly' )
|
||||
} else {
|
||||
$this.removeAttr( 'disabled' );
|
||||
date_picker_input.removeClass( 't-date-picker-readonly' );
|
||||
icon.css( 'display', 'inline' );
|
||||
// date_picker_input.removeAttr( 'readonly' );
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.setCheckBox = function( val ) {
|
||||
if ( check_box ) {
|
||||
check_box.children().eq( 0 )[0].checked = val;
|
||||
}
|
||||
};
|
||||
|
||||
this.isChecked = function() {
|
||||
if ( check_box ) {
|
||||
if ( check_box.children().eq( 0 )[0].checked === true ) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
this.setMassEditMode = function( val ) {
|
||||
mass_edit_mode = val;
|
||||
|
||||
if ( mass_edit_mode ) {
|
||||
check_box = $( ' <div class="mass-edit-checkbox-wrapper"><input type="checkbox" class="mass-edit-checkbox"></input>' +
|
||||
'<label for="checkbox-input-1" class="input-helper input-helper--checkbox"></label></div>' );
|
||||
check_box.insertBefore( $( this ) );
|
||||
|
||||
check_box.change( function() {
|
||||
$this.trigger( 'formItemChange', [$this] );
|
||||
} );
|
||||
|
||||
} else {
|
||||
if ( check_box ) {
|
||||
check_box.remove();
|
||||
check_box = null;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.setErrorStyle = function( errStr, show, isWarning ) {
|
||||
if ( isWarning ) {
|
||||
date_picker_input.addClass( 'warning-tip' );
|
||||
} else {
|
||||
date_picker_input.addClass( 'error-tip' );
|
||||
}
|
||||
error_string = errStr;
|
||||
|
||||
if ( show ) {
|
||||
this.showErrorTip();
|
||||
}
|
||||
};
|
||||
|
||||
this.showErrorTip = function( sec ) {
|
||||
|
||||
if ( !Global.isSet( sec ) ) {
|
||||
sec = 2;
|
||||
}
|
||||
|
||||
if ( !error_tip_box ) {
|
||||
error_tip_box = Global.loadWidgetByName( WidgetNamesDic.ERROR_TOOLTIP );
|
||||
error_tip_box = error_tip_box.ErrorTipBox();
|
||||
}
|
||||
if ( date_picker_input.hasClass( 'warning-tip' ) ) {
|
||||
error_tip_box.show( this, error_string, sec, true );
|
||||
} else {
|
||||
error_tip_box.show( this, error_string, sec );
|
||||
}
|
||||
};
|
||||
|
||||
this.hideErrorTip = function() {
|
||||
|
||||
if ( Global.isSet( error_tip_box ) ) {
|
||||
error_tip_box.remove();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.clearErrorStyle = function() {
|
||||
date_picker_input.removeClass( 'error-tip' );
|
||||
date_picker_input.removeClass( 'warning-tip' );
|
||||
this.hideErrorTip();
|
||||
error_string = '';
|
||||
};
|
||||
|
||||
this.getField = function() {
|
||||
return field;
|
||||
};
|
||||
|
||||
this.getValidationField = function() {
|
||||
return validation_field;
|
||||
};
|
||||
|
||||
this.getDefaultFormatValue = function() {
|
||||
var val = date_picker_input.val();
|
||||
|
||||
val = Global.strToDate( val ).format( 'YYYY-MM-DD' );
|
||||
|
||||
return val;
|
||||
};
|
||||
|
||||
this.getValue = function() {
|
||||
return result;
|
||||
};
|
||||
|
||||
this.setValue = function( val ) {
|
||||
if ( !val ) {
|
||||
val = '';
|
||||
}
|
||||
if ( $.type( val ) !== 'array' ) {
|
||||
result = [val];
|
||||
date_picker_input.val( val );
|
||||
date_picker_input.removeAttr( 'readonly' );
|
||||
} else {
|
||||
result = val;
|
||||
if ( val.length == 1 ) {
|
||||
date_picker_input.val( val[0] );
|
||||
date_picker_input.removeAttr( 'readonly' );
|
||||
} else {
|
||||
date_picker_input.val( val.length + ' ' + $.i18n._( 'dates selected' ) );
|
||||
date_picker_input.attr( 'readonly', 'readonly' );
|
||||
}
|
||||
}
|
||||
this.autoResize();
|
||||
};
|
||||
|
||||
this.autoResize = function() {
|
||||
var content_width, example_width;
|
||||
example_width = Global.calculateTextWidth( LocalCacheData.getLoginUserPreference().date_format_display );
|
||||
content_width = Global.calculateTextWidth( date_picker_input.val(), {
|
||||
min_width: example_width,
|
||||
max_width: ( ( example_width * 2 ) + 100 ),
|
||||
padding: 28
|
||||
} );
|
||||
date_picker.width( content_width + 'px' );
|
||||
};
|
||||
|
||||
this.close = function() {
|
||||
|
||||
if ( can_not_close ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var tab_index = tab_bars.tabs( 'option', 'active' );
|
||||
|
||||
ranger_picker.remove();
|
||||
is_open = false;
|
||||
LocalCacheData.openRangerPicker = null;
|
||||
is_mouse_over = false; //When close from esc, this maybe true
|
||||
|
||||
if ( tab_index == 0 ) {
|
||||
result = range_start_picker.val() + ' - ' + range_end_picker.val();
|
||||
date_picker_input.val( result );
|
||||
date_picker_input.attr( 'readonly', 'readonly' );
|
||||
} else {
|
||||
result = editor.getValue();
|
||||
|
||||
if ( result.length > 1 ) {
|
||||
date_picker_input.val( result.length + ' ' + $.i18n._( 'dates selected' ) );
|
||||
date_picker_input.attr( 'readonly', 'readonly' );
|
||||
} else {
|
||||
date_picker_input.val( result[0] );
|
||||
date_picker_input.removeAttr( 'readonly' );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.autoResize();
|
||||
|
||||
setTimeout( function() {
|
||||
$this.trigger( 'formItemChange', [$this] );
|
||||
}, 100 );
|
||||
//
|
||||
|
||||
};
|
||||
|
||||
this.getIsMouseOver = function() {
|
||||
return is_mouse_over;
|
||||
};
|
||||
|
||||
var insideEditorSetValue = function( val ) {
|
||||
|
||||
var len = val ? val.length : 0;
|
||||
this.removeAllRows();
|
||||
|
||||
if ( len > 0 ) {
|
||||
for ( var i = 0; i < val.length; i++ ) {
|
||||
if ( Global.isSet( val[i] ) ) {
|
||||
var row = val[i];
|
||||
this.addRow( row );
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.addRow( '' );
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Commented out due to its use of this._super (no longer valid in ES6 syntax) and it appears not to be used.
|
||||
// var setEditViewDataDone = function() {
|
||||
// this._super( 'setEditViewDataDone' );
|
||||
// this.initInsideEditorData();
|
||||
//
|
||||
// };
|
||||
|
||||
var initInsideEditorData = function() {
|
||||
var $this = this;
|
||||
|
||||
var args = {};
|
||||
args.filter_data = {};
|
||||
args.filter_data.hierarchy_control_id = this.current_edit_record.id ? this.current_edit_record.id : ( this.copied_record_id ? this.copied_record_id : '' );
|
||||
|
||||
if ( ( !this.current_edit_record || !this.current_edit_record.id ) && !this.copied_record_id ) {
|
||||
this.editor.addRow();
|
||||
} else {
|
||||
this.hierarchy_level_api.getHierarchyLevel( args, true, {
|
||||
onResult: function( res ) {
|
||||
if ( !$this.edit_view ) {
|
||||
return;
|
||||
}
|
||||
var data = res.getResult();
|
||||
|
||||
$this.editor.setValue( data );
|
||||
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
var insideEditorRemoveRow = function( row ) {
|
||||
var index = row[0].rowIndex - 1;
|
||||
row.remove();
|
||||
this.rows_widgets_array.splice( index, 1 );
|
||||
this.removeLastRowLine();
|
||||
};
|
||||
|
||||
var insideEditorAddRow = function( data ) {
|
||||
if ( !data ) {
|
||||
data = '';
|
||||
}
|
||||
|
||||
if ( this.rows_widgets_array.length > 0 && !data ) {
|
||||
var current_data = this.rows_widgets_array[this.rows_widgets_array.length - 1].start_date_stamp.getValue();
|
||||
|
||||
if ( !current_data ) {
|
||||
current_data = new Date();
|
||||
} else {
|
||||
current_data = Global.strToDate( current_data );
|
||||
}
|
||||
|
||||
current_data = new Date( new Date( current_data.getTime() ).setDate( current_data.getDate() + 1 ) );
|
||||
data = current_data.format();
|
||||
|
||||
} else if ( this.rows_widgets_array.length === 0 && !data ) {
|
||||
data = new Date().format();
|
||||
}
|
||||
|
||||
var row = this.getRowRender(); //Get Row render
|
||||
var render = this.getRender(); //get render, should be a table
|
||||
var widgets = {}; //Save each row's widgets
|
||||
|
||||
//Build row widgets
|
||||
|
||||
//Date
|
||||
var form_item_input = Global.loadWidgetByName( FormItemType.DATE_PICKER );
|
||||
form_item_input.TDatePicker( {
|
||||
field: 'start_date_stamp',
|
||||
beforeShow: function() {
|
||||
can_not_close = true;
|
||||
},
|
||||
onClose: function() {
|
||||
can_not_close = false;
|
||||
}
|
||||
} );
|
||||
|
||||
$( '.ranger-picker-dates-width-tr' ).width( form_item_input.width() + 80 );
|
||||
|
||||
form_item_input.setValue( data );
|
||||
widgets[form_item_input.getField()] = form_item_input;
|
||||
row.children().eq( 0 ).append( form_item_input );
|
||||
|
||||
$( render ).append( row );
|
||||
|
||||
this.rows_widgets_array.push( widgets );
|
||||
|
||||
this.addIconsEvent( row ); //Bind event to add and minus icon
|
||||
this.removeLastRowLine();
|
||||
};
|
||||
|
||||
var insideEditorGetValue = function( current_edit_item_id ) {
|
||||
var len = this.rows_widgets_array.length;
|
||||
|
||||
var result = [];
|
||||
|
||||
for ( var i = 0; i < len; i++ ) {
|
||||
var row = this.rows_widgets_array[i];
|
||||
if ( row.start_date_stamp.getValue() ) {
|
||||
result.push( row.start_date_stamp.getValue() );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
var show = function() {
|
||||
ranger_picker = $( Global.loadWidget( 'global/widgets/datepicker/TRangePicker.html' ) );
|
||||
var tab_0_label = ranger_picker.find( 'a[ref=tab_range]' );
|
||||
var tab_1_label = ranger_picker.find( 'a[ref=tab_date]' );
|
||||
tab_0_label.text( $.i18n._( 'Range' ) );
|
||||
tab_1_label.text( $.i18n._( 'Dates' ) );
|
||||
range_start_picker = ranger_picker.find( '#tab_range_content_div' ).find( '.start-picker' );
|
||||
range_end_picker = ranger_picker.find( '#tab_range_content_div' ).find( '.end-picker' );
|
||||
var start_picker_label = ranger_picker.find( '#tab_range_content_div' ).find( '.start-picker-label' );
|
||||
var end_picker_label = ranger_picker.find( '#tab_range_content_div' ).find( '.end-picker-label' );
|
||||
start_picker_label.text( $.i18n._( 'Start' ) );
|
||||
end_picker_label.text( $.i18n._( 'End' ) );
|
||||
var format = LocalCacheData.getLoginUserPreference().date_format_1;
|
||||
|
||||
$.datepicker._gotoToday = function( id ) {
|
||||
var target = $( id );
|
||||
var inst = this._getInst( target[0] );
|
||||
if ( this._get( inst, 'gotoCurrent' ) && inst.currentDay ) {
|
||||
inst.selectedDay = inst.currentDay;
|
||||
inst.drawMonth = inst.selectedMonth = inst.currentMonth;
|
||||
inst.drawYear = inst.selectedYear = inst.currentYear;
|
||||
} else {
|
||||
var date = new Date();
|
||||
inst.selectedDay = date.getDate();
|
||||
inst.drawMonth = inst.selectedMonth = date.getMonth();
|
||||
inst.drawYear = inst.selectedYear = date.getFullYear();
|
||||
// the below two lines are new
|
||||
this._setDateDatepicker( target, date );
|
||||
this._selectDate( id, this._getDateDatepicker( target ) );
|
||||
$( target ).datepicker( 'setDate', date );
|
||||
}
|
||||
this._notifyChange( inst );
|
||||
this._adjustDate( target );
|
||||
};
|
||||
|
||||
range_start_picker.datepicker( {
|
||||
showOtherMonths: true,
|
||||
selectOtherMonths: true,
|
||||
showTime: false,
|
||||
dateFormat: format,
|
||||
showHour: false,
|
||||
showMinute: false,
|
||||
changeMonth: true,
|
||||
changeYear: true,
|
||||
showButtonPanel: true,
|
||||
duration: '',
|
||||
showAnim: '',
|
||||
yearRange: '-100:+10',
|
||||
showOn: '',
|
||||
dayNamesMin: [
|
||||
$.i18n._( 'Sun' ), $.i18n._( 'Mon' ), $.i18n._( 'Tue' ),
|
||||
$.i18n._( 'Wed' ), $.i18n._( 'Thu' ), $.i18n._( 'Fri' ), $.i18n._( 'Sat' )
|
||||
],
|
||||
currentText: $.i18n._( 'Today' ),
|
||||
monthNamesShort: [
|
||||
$.i18n._( 'Jan' ), $.i18n._( 'Feb' ),
|
||||
$.i18n._( 'Mar' ), $.i18n._( 'Apr' ), $.i18n._( 'May' ),
|
||||
$.i18n._( 'Jun' ), $.i18n._( 'Jul' ), $.i18n._( 'Aug' ),
|
||||
$.i18n._( 'Sep' ), $.i18n._( 'Oct' ), $.i18n._( 'Nov' ),
|
||||
$.i18n._( 'Dec' )
|
||||
],
|
||||
} );
|
||||
|
||||
range_end_picker.datepicker( {
|
||||
showOtherMonths: true,
|
||||
selectOtherMonths: true,
|
||||
showTime: false,
|
||||
dateFormat: format,
|
||||
showHour: false,
|
||||
showMinute: false,
|
||||
changeMonth: true,
|
||||
changeYear: true,
|
||||
showButtonPanel: true,
|
||||
duration: '',
|
||||
showAnim: '',
|
||||
yearRange: '-100:+10',
|
||||
showOn: '',
|
||||
dayNamesMin: [
|
||||
$.i18n._( 'Sun' ), $.i18n._( 'Mon' ), $.i18n._( 'Tue' ),
|
||||
$.i18n._( 'Wed' ), $.i18n._( 'Thu' ), $.i18n._( 'Fri' ), $.i18n._( 'Sat' )
|
||||
],
|
||||
currentText: $.i18n._( 'Today' ),
|
||||
monthNamesShort: [
|
||||
$.i18n._( 'Jan' ), $.i18n._( 'Feb' ),
|
||||
$.i18n._( 'Mar' ), $.i18n._( 'Apr' ), $.i18n._( 'May' ),
|
||||
$.i18n._( 'Jun' ), $.i18n._( 'Jul' ), $.i18n._( 'Aug' ),
|
||||
$.i18n._( 'Sep' ), $.i18n._( 'Oct' ), $.i18n._( 'Nov' ),
|
||||
$.i18n._( 'Dec' )
|
||||
]
|
||||
|
||||
} );
|
||||
|
||||
var close_icon = ranger_picker.find( '.close-icon' );
|
||||
|
||||
close_icon.click( function() {
|
||||
$this.close();
|
||||
} );
|
||||
|
||||
//Add render in tab 1
|
||||
|
||||
var tab_date = ranger_picker.find( '#tab_date' );
|
||||
|
||||
var inside_editor_div = tab_date.find( '.inside-editor-div' );
|
||||
var args = {
|
||||
start_date_stamp: $.i18n._( 'Date' )
|
||||
};
|
||||
|
||||
editor = Global.loadWidgetByName( FormItemType.INSIDE_EDITOR );
|
||||
|
||||
editor = editor.InsideEditor( {
|
||||
title: '',
|
||||
addRow: insideEditorAddRow,
|
||||
getValue: insideEditorGetValue,
|
||||
setValue: insideEditorSetValue,
|
||||
removeRow: insideEditorRemoveRow,
|
||||
parent_controller: this,
|
||||
render: 'global/widgets/datepicker/TRangeInsideEditorRender.html',
|
||||
render_args: args,
|
||||
api: null,
|
||||
row_render: 'global/widgets/datepicker/TRangeInsideEditorRow.html'
|
||||
} );
|
||||
|
||||
inside_editor_div.append( editor );
|
||||
|
||||
editor.setValue();
|
||||
|
||||
$( 'body' ).append( ranger_picker );
|
||||
|
||||
tab_bars = $( ranger_picker.find( '.edit-view-tab-bar' ) );
|
||||
|
||||
tab_bars = tab_bars.tabs( {
|
||||
activate: function( e, ui ) {
|
||||
|
||||
if ( !tab_bars || !tab_bars.is( ':visible' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
} );
|
||||
|
||||
ranger_picker.mouseenter( function() {
|
||||
is_mouse_over = true;
|
||||
} );
|
||||
|
||||
ranger_picker.mouseleave( function() {
|
||||
is_mouse_over = false;
|
||||
} );
|
||||
|
||||
//Set Position
|
||||
|
||||
var range_width = ranger_picker.width();
|
||||
|
||||
if ( range_width + $( $this ).offset().left + 50 > Global.bodyWidth() ) {
|
||||
ranger_picker.css( 'left', Global.bodyWidth() - range_width - 50 );
|
||||
} else {
|
||||
|
||||
ranger_picker.css( 'left', $( $this ).offset().left );
|
||||
}
|
||||
|
||||
if ( $( $this ).offset().top + 25 + 300 < Global.bodyHeight() ) {
|
||||
ranger_picker.css( 'top', $( $this ).offset().top + 25 );
|
||||
} else {
|
||||
ranger_picker.css( 'top', Global.bodyHeight() - 300 );
|
||||
}
|
||||
|
||||
LocalCacheData.openRangerPicker = $this;
|
||||
|
||||
if ( result && ( typeof result == 'string' ) ) {
|
||||
var result_array = result.split( ' - ' );
|
||||
range_start_picker.datepicker( 'setDate', result_array[0] );
|
||||
range_end_picker.datepicker( 'setDate', result_array[1] );
|
||||
} else if ( result && $.type( result ) === 'array' ) {
|
||||
tab_bars.tabs( 'option', 'active', 1 );
|
||||
|
||||
editor.setValue( result );
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.setPlaceHolder = function( val ) {
|
||||
date_picker_input.attr( 'placeholder', val );
|
||||
};
|
||||
|
||||
this.each( function() {
|
||||
|
||||
var o = $.meta ? $.extend( {}, opts, $( this ).data() ) : opts;
|
||||
|
||||
date_picker = $( this );
|
||||
|
||||
field = o.field;
|
||||
if ( o.validation_field ) {
|
||||
validation_field = o.validation_field;
|
||||
}
|
||||
icon = $( this ).find( '.t-date-picker-icon' );
|
||||
date_picker_input = $( this ).find( '.t-date-picker' );
|
||||
icon.attr( 'src', Global.getRealImagePath( 'images/cal.png' ) );
|
||||
|
||||
$this.setPlaceHolder( LocalCacheData.loginUserPreference.date_format_display );
|
||||
|
||||
date_picker_input.change( function() {
|
||||
if ( check_box ) {
|
||||
$this.setCheckBox( true );
|
||||
}
|
||||
result = [date_picker_input.val()];
|
||||
$this.trigger( 'formItemChange', [$this] );
|
||||
$this.autoResize();
|
||||
return true;
|
||||
} );
|
||||
|
||||
icon.bind( 'mouseup', function() { //Need to use 'mouseup' event as main.js binds 'mousedown' for closing when clicked off.
|
||||
if ( !enabled ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( !is_open ) {
|
||||
show();
|
||||
is_open = true;
|
||||
} else {
|
||||
$this.close();
|
||||
is_open = false;
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
date_picker_input.mouseover( function() {
|
||||
|
||||
if ( enabled ) {
|
||||
if ( error_string && error_string.length > 0 ) {
|
||||
$this.showErrorTip( 20 );
|
||||
}
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
date_picker_input.mouseout( function() {
|
||||
if ( !$( $this ).is( ':focus' ) ) {
|
||||
$this.hideErrorTip();
|
||||
}
|
||||
} );
|
||||
|
||||
$this.autoResize();
|
||||
|
||||
} );
|
||||
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
$.fn.TRangePicker.defaults = {};
|
||||
|
||||
} )( jQuery );
|
||||
Reference in New Issue
Block a user