AngularJS HTML5 Native Date Range

created by ozkary.com

by ozkary

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
<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'}}"...

JavaScript

(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));