<div ng-app="app" ng-controller="dateRangeCtrl as ctrl"> <div class="body-content panel-body"> <h5 class="text-center text-info">HTML5 Date Range by ozkary.com</h5> <div class="row"> <form class="form-horizontal margin-bottom-10" role="form" name="dateRangeForm" novalidate> <fieldset> <legend>Select a date range (7 days limit)</legend> <div class="col-sm-12"> <div class="control-group"> <label class="control-label col-sm-2" for="">From:</label> <div class="col-sm-4" ng-class="{ 'has-error' : dateRangeForm.from.$invalid && !dateRangeForm.from.$pristine }"> <div class="controls"> <input type="date" ng-required="true" name="from" ng-model="ctrl.dateRange.startDate" ng-change="ctrl.setDateConstraint()" class="form-control" /> </div> </div> <label class="control-label col-sm-2" for="">To:</label> <div class="col-sm-4" ng-class="{ 'has-error' : dateRangeForm.to.$invalid && !dateRangeForm.to.$pristine }"> <div class="controls"> <input type="date" name="to" min="{{ctrl.dateRange.minDate | date: 'yyyy-MM-dd'}}" max="{{ctrl.dateRange.maxDate | date: 'yyyy-MM-dd'}}" ng-model="ctrl.dateRange.endDate" class="form-control" ng-disabled="!ctrl.dateRange.startDate" ng-required="ctrl.dateRange.startDate" /> </div> </div> </div> </div> </fieldset> </form> <hr /> </div> </div> </div>
(function (angular) { 'use strict'; var app = angular.module('app', []); app.controller('dateRangeCtrl', [dateRange]); function dateRange() { var ctrl = this; ctrl.dateRange = {}; //ctrl scope functions ctrl.setDateConstraint = function () { if (ctrl.dateRange.startDate) { //next day should be min ctrl.dateRange.minDate = addDays(ctrl.dateRange.startDate, 1); //7 max days ctrl.dateRange.maxDate = addDays(ctrl.dateRange.startDate, 7); } } //private functions function addDays(date, days) { //make sure is date type var tmpDate = typeof (date) != 'Date' ? new Date(date) : date; tmpDate.setDate(tmpDate.getDate() + days); return tmpDate; } } }(angular));