matthewbednarski/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="A simple bootstrap form with 2 bootstrap datepickers"/>
  <meta name="gist-url" content="https://gist.github.com/matthewbednarski/a1da75343128c2036b98"/>
  <meta name="jsbin-url" content="http://jsbin.com/nidewi"/>
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <script src="https://rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment-with-locales.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>
    $( document ).ready(function() {
    		$('.datepicker').datepicker({
            autoclose: true,
            beforeShowDay: $.noop,
            calendarWeeks: false,
            clearBtn: false,
            daysOfWeekDisabled: [],
            endDate: Infinity,
            forceParse: true,
            format: 'yyyy-mm-dd',
            keyboardNavigation: true,
            language: 'en',
            minViewMode: 0,
            orientation: "top",
            rtl: false,
            startDate: -Infinity,
            startView: 0, //day picker
					/*
            startView: 1, //month picker
            startView: 2, //year picker
						*/

            todayBtn: true,
            todayHighlight: true,
            weekStart: 0
        });

    });
  </script>
  <script>
    function Controller($scope, service){
    			var moment_date_format = 'YYYY-MM-DD'
    			this.item = {
    				date_from : moment().add( -3, 'months').format(moment_date_format),
    				date_to : moment().format(moment_date_format)
    			};
    			this.text = {
    				title : 'Index',
    				action : {
    					submit : 'Submit',
    					reset  : 'Reset'
    			  }
   			  }
					this.submit = function(){
						var promise = service.submit(this.item.date_from, this.item.date_to);
						promise.then(function(item){
							console.log(item);
						});
						console.log("All submitted");
						return promise;
					}
    	}
		function Service($q){
			var svc = {};
			svc.submit = function(date1, date2){
				var defer = $q.defer();
				_.delay(function(d1, d2){
				  console.log('Dates: ' + d1 + " to " + d2);
				  defer.resolve({
					  date1 : d1, date2 : d2
				  });
			}, 5000, date1, date2);
				return defer.promise;
			}
			return svc;
		}
    	var app = angular.module('app', []);
    	app.controller = app.controller('controller', ['$scope', 'service', Controller]);
	    app.service = app.service('service', [ '$q', Service ]);
  </script>
</head>

<body ng-app="app">
  <div ng-controller="controller as ctl">
    <!--<input class="datepicker" data-date-format="yyyy-mm-dd" />
    <input type="button" onclick="$('.datepicker').datepicker();" value="test" />
-->
    <div class="col-xs-12 col-md-6">
      <div class="panel panel-primary">
        <div class="panel-heading">{{ ctl.text.title }}</div>
        <div class="panel-body" id="dates_form">
          <form novalidate name="form" class="simple-form">
            <div class="input-group form-group" ng-class="{ 'has-error' : form.date_from.$invalid && !form.date_from.$pristine }">
              <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
              <div class="input-append date">
                <input class="datepicker form-control" name="date_from" ng-model="ctl.item.date_from" required/>
              </div>
            </div>
            <div class="input-group form-group" ng-class="{ 'has-error' : form.date_to.$invalid && !form.date_to.$pristine }">
              <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
              <div class="input-append date">
                <input class="form-control datepicker" name="date_to" ng-model="ctl.item.date_to" required/>
              </div>
            </div>
            <div class="button-group">
              <!--<button ng-show="!form.$pristine || form.$valid" type="rst" class="btn" ng-click="ctl.reset()" tooltip="{{ ctl.text.action.reset }}">
                <i class="fa fa-eraser fa-2x">
				</i>
              </button>-->
              <button ng-disabled="!form.$valid" type="submit" class="btn" ng-click="ctl.submit()" tooltip="{{ ctl.text.action.submit }}">
                {{ ctl.text.action.submit }}
                <!--       <i class="fa fa-repeat">
								</i>-->
              </button>

            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta name="description" content="A simple bootstrap form with 2 bootstrap datepickers"/>
	<meta name="gist-url" content="https://gist.github.com/matthewbednarski/a1da75343128c2036b98"/>
	<meta name="jsbin-url" content="http://jsbin.com/nidewi"/>
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
	<script src="https://rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment-with-locales.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<script>
	$( document ).ready(function() {
	$('.datepicker').datepicker({
	autoclose: true,
	beforeShowDay: $.noop,
	calendarWeeks: false,
	clearBtn: false,
	daysOfWeekDisabled: [],
	endDate: Infinity,
	forceParse: true,
	format: 'yyyy-mm-dd',
	keyboardNavigation: true,
	language: 'en',
	minViewMode: 0,
	orientation: "top",
	rtl: false,
	startDate: -Infinity,
	startView: 0, //day picker
	/*
	startView: 1, //month picker
	startView: 2, //year picker
	*/

	todayBtn: true,
	todayHighlight: true,
	weekStart: 0
	});

	});
	</script>
	<script>
	function Controller($scope, service){
	var moment_date_format = 'YYYY-MM-DD'
	this.item = {
	date_from : moment().add( -3, 'months').format(moment_date_format),
	date_to : moment().format(moment_date_format)
	};
	this.text = {
	title : 'Index',
	action : {
	submit : 'Submit',
	reset : 'Reset'
	}
	}
	this.submit = function(){
	var promise = service.submit(this.item.date_from, this.item.date_to);
	promise.then(function(item){
	console.log(item);
	});
	console.log("All submitted");
	return promise;
	}
	}
	function Service($q){
	var svc = {};
	svc.submit = function(date1, date2){
	var defer = $q.defer();
	_.delay(function(d1, d2){
	console.log('Dates: ' + d1 + " to " + d2);
	defer.resolve({
	date1 : d1, date2 : d2
	});
	}, 5000, date1, date2);
	return defer.promise;
	}
	return svc;
	}
	var app = angular.module('app', []);
	app.controller = app.controller('controller', ['$scope', 'service', Controller]);
	app.service = app.service('service', [ '$q', Service ]);
	</script>
	</head>

	<body ng-app="app">
	<div ng-controller="controller as ctl">
	<!--<input class="datepicker" data-date-format="yyyy-mm-dd" />
	<input type="button" onclick="$('.datepicker').datepicker();" value="test" />
	-->
	<div class="col-xs-12 col-md-6">
	<div class="panel panel-primary">
	<div class="panel-heading">{{ ctl.text.title }}</div>
	<div class="panel-body" id="dates_form">
	<form novalidate name="form" class="simple-form">
	<div class="input-group form-group" ng-class="{ 'has-error' : form.date_from.$invalid && !form.date_from.$pristine }">
	<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
	<div class="input-append date">
	<input class="datepicker form-control" name="date_from" ng-model="ctl.item.date_from" required/>
	</div>
	</div>
	<div class="input-group form-group" ng-class="{ 'has-error' : form.date_to.$invalid && !form.date_to.$pristine }">
	<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
	<div class="input-append date">
	<input class="form-control datepicker" name="date_to" ng-model="ctl.item.date_to" required/>
	</div>
	</div>
	<div class="button-group">
	<!--<button ng-show="!form.$pristine \|\| form.$valid" type="rst" class="btn" ng-click="ctl.reset()" tooltip="{{ ctl.text.action.reset }}">
	<i class="fa fa-eraser fa-2x">
	</i>
	</button>-->
	<button ng-disabled="!form.$valid" type="submit" class="btn" ng-click="ctl.submit()" tooltip="{{ ctl.text.action.submit }}">
	{{ ctl.text.action.submit }}
	<!-- <i class="fa fa-repeat">
	</i>-->
	</button>

	</div>
	</form>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>