'[% l('This page may have unsaved data.\n\nAre you sure you want to leave this page?') %]';
s.EG_UNLOAD_PAGE_PROMPT_MSG =
'[% l('This page may have unsaved data.') %]';
+ s.EG_DATE_INPUT_CLOSE_TEXT = '[% l('Close') %]';
}]);
</script>
<div class="flex-cell"></div>
<div class="pad-horiz">[% l('Effective Date') %]</div>
<!-- date max= not yet supported -->
- <div><input eg-date-input
- class="form-control" ng-model="checkinArgs.backdate"/>
+ <div><eg-date-input ng-model="checkinArgs.backdate"></eg-date-input>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active">
- <div class="flex-row padded">
- <div ng-if="bill_tab == 'transactions'">[% l('Selected Billed:') %]</div>
- <div ng-if="bill_tab == 'transactions'">{{totals.selected_billed() | currency}}</div>
- <div>[% l('Selected Paid:') %]</div>
- <div>{{totals.selected_paid() | currency}}</div>
- <div class="flex-cell"></div>
- <div><button class="btn btn-default" ng-click="actions.apply_date_range()">[% l('Apply') %]</button></div>
- <div>[% l('Start Date:') %]</div>
- <div><input eg-date-input class="form-control" ng-model="dates.xact_start"/></div>
- <div>[% l('End Date:') %]</div>
- <div><input eg-date-input class="form-control" ng-model="dates.xact_finish"/></div>
+ <div class="row padded">
+ <div class="col-md-2">
+ <span ng-if="bill_tab == 'transactions'">
+ <label>[% l('Selected Billed:') %]</label>
+ {{totals.selected_billed() | currency}}
+ <br/>
+ </span>
+ <label>[% l('Selected Paid:') %]</label>
+ <span>{{totals.selected_paid() | currency}}</span>
+ </div>
+ <div class="col-md-1">
+ <span><button class="btn btn-default"
+ ng-click="actions.apply_date_range()">[% l('Apply') %]</button></span>
+ </div>
+ <div class="col-md-4 flex-row padded">
+ <label>[% l('Start Date:') %]</label>
+ <div><eg-date-input ng-model="dates.xact_start"></eg-date-input></div>
+ </div>
+ <div class="col-md-4 flex-row padded">
+ <label>[% l('End Date:') %]</label>
+ <div><eg-date-input ng-model="dates.xact_finish"></eg-date-input></div>
+ </div>
</div><!-- top row -->
<hr/>
[% INCLUDE 'staff/circ/patron/t_bill_history_xacts.tt2' %]
-->
<!-- FIXME: This needs a time component as well, but type="datetime"
is not yet supported by any browsers -->
- <div><input eg-date-input class="form-control"
- ng-model="checkoutArgs.due_date"/>
+ <div><eg-date-input ng-model="checkoutArgs.due_date"></eg-date-input>
</div>
</div>
</div>
<div class="row reg-field-row" ng-show="show_field('au.dob')">
[% draw_field_label('au', 'dob') %]
<div class="col-md-3 reg-field-input">
- <input
- name="dob"
- uib-datepicker-popup="shortDate"
+ <eg-date-input
+ ng-model="patron.dob"
ng-change="field_modified()"
- ng-required="field_required('au', 'dob')"
- ng-blur="handle_field_changed(patron, 'dob')"
- is-open="dob_is_open"
- close-text="[% l('Close') %]"/>
- class="form-control" ng-model="patron.dob"/>
+ ng-blur="handle_field_changed(patron, 'dob')">
+ </eg-date-input>
</div>
<div class="col-md-6 patron-reg-example">
[% draw_example_text('au', 'dob') %]
<div class="row reg-field-row" ng-show="show_field('au.expire_date')">
[% draw_field_label('au', 'expire_date') %]
<div class="col-md-3 reg-field-input">
- <input eg-date-input
+ <eg-date-input
+ ng-change="field_modified()"
ng-blur="handle_field_changed(patron, 'expire_date')"
- class="form-control" ng-model="patron.expire_date"/>
+ ng-model="patron.expire_date">
+ </eg-date-input>
</div>
<div class="col-md-3">
<button class="btn btn-default" ng-click="set_expire_date()">
</div>
<div class="modal-body">
<div class="form-group row pad-vert">
- <div class="col-md-6">
+ <div class="col-md-4">
[% l('Enter Due Date: ') %]
</div>
- <div class="col-md-6">
- <input eg-date-input class="form-control" ng-model="args.due_date"/>
+ <div class="col-md-8">
+ <eg-date-input show-time-picker ng-model="args.due_date"></eg-date-input>
</div>
</div>
<!-- TODO: time picker -->
<div class="pad-vert"><hr/></div>
-<div class="pad-vert flex-row padded">
- <div class="strong-text-2">[% l('Archived Penalties / Messages') %]</div>
- <div class="flex-cell"></div>
- <div>[% l('Set Date Start:') %]</div>
- <div><input eg-date-input class="form-control" ng-model="dates.start_date"/></div>
- <div>[% l('Set Date End:') %]</div>
- <div><input eg-date-input class="form-control" ng-model="dates.end_date"/></div>
+<div class="pad-vert row padded">
+ <div class="col-md-4">
+ <div class="strong-text-2">[% l('Archived Penalties / Messages') %]</div>
+ </div>
+ <div class="col-md-4">
+ <label>[% l('Set Date Start:') %]</label>
+ <eg-date-input ng-model="dates.start_date"></eg-date-input>
+ </div>
+ <div class="col-md-4">
+ <label>[% l('Set Date End:') %]</label>
+ <eg-date-input ng-model="dates.end_date"></eg-date-input>
+ </div>
</div>
<eg-grid
idl-class="ausp"
</div>
<div class="pad-vert row">
<div class="col-md-5">
- <input eg-date-input required
- class="form-control" ng-model="args.date"/>
+ <eg-date-input required ng-model="args.date"></eg-date-input>
</div>
</div>
</div>
</div>
<!-- FIXME: This needs a time component as well, but type="datetime"
is not yet supported by any browsers -->
- <div><input eg-date-input class="form-control" ng-model="renewalArgs.due_date"/>
+ <div><eg-date-input ng-model="renewalArgs.due_date"></eg-date-input>
</div>
</div>
</div>
<div class="pad-vert row">
<div class="col-md-6">[% l('Effective Date:') %]</div>
<div class="col-md-6">
- <input eg-date-input required
- class="form-control" ng-model="dialog.backdate"/>
+ <eg-date-input required ng-model="dialog.backdate"></eg-date-input>
</div>
</div>
</div>
<label for='thaw_date'>[% l("Hold Activate Date") %]</label>
</div>
<div class="col-md-7">
- <input id='thaw_date' eg-date-input
- ng-disabled="!args.modify_thaw_date" ng-model="args.thaw_date"/>
+ <eg-date-input id='thaw_date'
+ ng-disabled="!args.modify_thaw_date" ng-model="args.thaw_date">
+ </eg-date-input>
</div>
</div>
<div class="row">
<label for='request_time'>[% l("Hold Request Date") %]</label>
</div>
<div class="col-md-7">
- <input id='request_time' eg-date-input
- ng-disabled="!args.modify_request_time" ng-model="args.request_time"/>
+ <eg-date-input id='request_time'
+ ng-disabled="!args.modify_request_time" ng-model="args.request_time">
+ </eg-date-input>
</div>
</div>
<div class="row">
<label for='expire_time'>[% l("Hold Expire Date") %]</label>
</div>
<div class="col-md-7">
- <input id='expire_time' eg-date-input
- ng-disabled="!args.modify_expire_time" ng-model="args.expire_time"/>
+ <eg-date-input id='expire_time'
+ ng-disabled="!args.modify_expire_time" ng-model="args.expire_time">
+ </eg-date-input>
</div>
</div>
<div class="row">
<label for='shelf_expire_time'>[% l("Shelf Expire Date") %]</label>
</div>
<div class="col-md-7">
- <input id='shelf_expire_time' eg-date-input
+ <ng-date-input id='shelf_expire_time'
ng-disabled="!args.modify_shelf_expire_time" ng-model="args.shelf_expire_time"/>
+ </eg-date-input>
</div>
</div>
</div>
</div>
<div class="pad-vert row">
<div class="col-md-5">
- <input eg-date-input required
- class="form-control" ng-model="args.date"/>
+ <eg-date-input ng-required="true"
+ class="form-control" ng-model="args.date">
+ </eg-date-input>
</div>
</div>
</div>
--- /dev/null
+<div>
+ <div>
+ <!-- Date Picker -->
+ <div class="input-group">
+ <input type="text"
+ class="form-control"
+ ng-show="!hideDatePicker"
+ uib-datepicker-popup="shortDate"
+ is-open="datePickerIsOpen"
+ ng-model="ngModel"
+ ng-change="ngChange"
+ ng-disabled="ngDisabled"
+ ng-required="ngRequired"
+ close-text="{{closeText}}"/>
+ <span class="input-group-btn">
+ <button type="button" class="btn btn-default"
+ ng-click="datePickerIsOpen=!datePickerIsOpen">
+ <i class="glyphicon glyphicon-calendar"></i>
+ </button>
+ </span>
+ </div>
+ </div>
+ <!-- Time Picker
+ let time picker break to a new line since it does not
+ not line up horizontally very well with the date picker -->
+ <div>
+ <span>
+ <uib-timepicker
+ ng-show="showTimePicker"
+ ng-model="ngModel"
+ ng-disabled="ngDisabled"
+ ng-required="ngRequired"
+ ng-change="ngChange">
+ </uib-timepicker>
+ </span>
+ </div>
+</div>
+
})
/*
-http://stackoverflow.com/questions/18061757/angular-js-and-html5-date-input-value-how-to-get-firefox-to-show-a-readable-d
-
-This directive allows us to use html5 input type="date" (for Chrome) and
-gracefully fall back to a regular ISO text input for Firefox.
-It also allows us to abstract away some browser finickiness.
+* Handy wrapper directive for uib-datapicker-popup
*/
.directive(
- 'egDateInput',
- function(dateFilter) {
+ 'egDateInput', ['egStrings',
+ function(egStrings) {
return {
+ scope : {
+ closeText : '@',
+ ngModel : '=',
+ ngChange : '=',
+ ngDisabled : '=',
+ ngRequired : '=',
+ hideDatePicker : '='
+ },
require: 'ngModel',
- template: '<input type="date"></input>',
+ templateUrl: './share/t_datetime',
replace: true,
- link: function(scope, elm, attrs, ngModelCtrl) {
-
- // since this is a date-only selector, set the time
- // portion to 00:00:00, which should better match the
- // user's expectations. Note this allows us to retain
- // the timezone.
- function strip_time(date) {
- if (!date) date = new Date();
- date.setHours(0);
- date.setMinutes(0);
- date.setSeconds(0);
- date.setMilliseconds(0);
- return date;
- }
+ link : function(scope, elm, attrs) {
+ if (!scope.closeText)
+ scope.closeText = egStrings.EG_DATE_INPUT_CLOSE_TEXT;
- ngModelCtrl.$formatters.unshift(function (modelValue) {
- // apply strip_time here in case the user never
- // modifies the date value.
- if (!modelValue) return '';
- return dateFilter(strip_time(modelValue), 'yyyy-MM-dd');
- });
-
- ngModelCtrl.$parsers.unshift(function(viewValue) {
- if (!viewValue) return null;
- return strip_time(new Date(viewValue));
- });
- },
+ if ('showTimePicker' in attrs)
+ scope.showTimePicker = true;
+ }
};
-})
+ }
+])
projects / working / Evergreen.git / commitdiff