Permalink
Browse files

Merge pull request #10 from josefzamrzla/date-input-ranges

  • Loading branch information...
2 parents dbbb865 + 296bc9c commit 0b1101cfbd15fd1f74691fd53e6a6fc803fb9187 @pdanis pdanis committed Nov 21, 2012
Showing with 84 additions and 2 deletions.
  1. +6 −2 demos/templates/ngx.ui.dateInput.html
  2. +34 −0 src/modules/date/date.js
  3. +44 −0 src/modules/ui/dateInput/dateInput.js
View
8 demos/templates/ngx.ui.dateInput.html
@@ -4,7 +4,9 @@
<div class="control-group">
<label class="control-label">Start date:</label>
<div class="controls">
- <input type="text" name="dateFrom" ng-model="dateFrom" ngx-date-input required="" />
+ <input type="text" name="dateFrom" ng-model="dateFrom" ngx-date-input
+ min="today" max="+365d" range-maxdays="365" required="" />
+
<input type="text" name="timeFrom" ng-model="timeFrom" ngx-time-input ngx-time-date-input="form_date.dateFrom" />
<span ngx-invalid="form_date.dateFrom" data-error="date" class="help-inline">
Invalid start date
@@ -14,7 +16,9 @@
<div class="control-group">
<label class="control-label">End date:</label>
<div class="controls">
- <input type="text" name="dateTo" ng-model="dateTo" required="" ngx-date-input data-range-input="form_date.dateFrom" />
+ <input type="text" name="dateTo" ng-model="dateTo" required="" ngx-date-input
+ min="today" max="+365d" range-maxdays="365" range-input="form_date.dateFrom" />
+
<input type="text" name="timeTo" ng-model="timeTo" ngx-time-input ngx-time-date-input="form_date.dateTo" />
<span ngx-invalid="form_date.dateTo" data-error="date" class="help-inline">
Invalid end date
View
34 src/modules/date/date.js
@@ -268,6 +268,40 @@
return (month > 0 && month < 13 && year > 0 && year < 32768 && day > 0 && day <= (new Date(year, month, 0)).getDate());
};
+ /**
+ * Date parser
+ * Accepts date in format DD.MM.YYYY or placeholder string "today" or relative number of days +1d / -1d
+ * @param inputValue Date (DD.MM.YYYY) or relative date placeholder
+ * @return {Date}
+ */
+ ngxDate.parse = function(inputValue) {
+ var r = new RegExp('^([0-9]{1,2}). ?([0-9]{1,2}). ?([0-9]{4})').exec(inputValue);
+ var str = new RegExp('^([\\-|\\+]?)([0-9]+)d').exec(inputValue);
+ var now = new Date();
+
+ if (inputValue == 'today') {
+ // just return today's date
+ return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+ } else if (r && ngxDate.check(r[3], r[2], r[1])) {
+ // parse exact date
+ return new Date(r[3], r[2] - 1, r[1]);
+ } else if (str) {
+ // parse relative date
+ var inc = str[2]*60*60*24*1000;
+ var timestamp = now.getTime();
+
+ if (str[1] == '-') {
+ timestamp -= inc;
+ } else {
+ timestamp += inc;
+ }
+
+ return new Date(timestamp);
+ }
+
+ return undefined;
+ };
+
angular.module('ngx.date', [])
.value('ngxDate', ngxDate);
View
44 src/modules/ui/dateInput/dateInput.js
@@ -8,6 +8,7 @@
* @todo range/time refactoring
*/
module.directive('ngxDateInput', ['$parse', 'ngxDate', function($parse, ngxDate) {
+
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
@@ -35,6 +36,21 @@
// store element reference into widget scope for future datepicker update
ctrl.element = element;
+ var dateRangeMaxDays = attrs.rangeMaxdays ? attrs.rangeMaxdays : undefined;
+ var dateInputMin = ngxDate.parse(attrs.min);
+ var dateInputMax = ngxDate.parse(attrs.max);
+ var dateInputMaxRange = null;
+
+ // set initial minimum date
+ if (dateInputMin) {
+ ctrl.element.datepicker('option', 'minDate', dateInputMin);
+ }
+
+ // set initial maximum date
+ if (dateInputMax) {
+ ctrl.element.datepicker('option', 'maxDate', dateInputMax);
+ }
+
// related date range input (from-to)
if (attrs.rangeInput) {
// range config
@@ -65,6 +81,29 @@
if (valid) {
date = new Date(pd[3], pd[2] - 1, pd[1]);
+ // check min input date
+ if (dateInputMin && date < dateInputMin) {
+ valid = false;
+ }
+
+ // check max input date
+ if (dateInputMax) {
+ if (date > dateInputMax) {
+ valid = false;
+ }
+
+ // if max-days range is set, move max input to range end
+ if (dateRangeMaxDays) {
+ dateInputMaxRange = new Date(date.getTime() + (60*60*24*dateRangeMaxDays*1000));
+
+ if (ctrl.range.ctrl.timestampValue) {
+ if (date.getTime() - (60*60*24*dateRangeMaxDays*1000) > (ctrl.range.ctrl.timestampValue * 1000)) {
+ valid = false;
+ }
+ }
+ }
+ }
+
// apply related time input
if (ctrl.timeInput) {
if (ctrl.timeInput.$valid) {
@@ -98,7 +137,12 @@
if (ctrl.range) {
// update related date picker min/max
if (!ctrl.$error.date) {
+
ctrl.range.ctrl.element.datepicker('option', ctrl.range.type + 'Date', viewValue);
+
+ if (ctrl.range.type == 'min' && dateInputMaxRange) {
+ ctrl.range.ctrl.element.datepicker('option', 'maxDate', dateInputMaxRange);
+ }
}
// range validation

0 comments on commit 0b1101c

Please sign in to comment.