Skip to content

Instantly share code, notes, and snippets.

@matthewbednarski

matthewbednarski/index.html

Created May 21, 2015 15:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matthewbednarski/6d0f8b73e0583887dcda to your computer and use it in GitHub Desktop.
Save matthewbednarski/6d0f8b73e0583887dcda to your computer and use it in GitHub Desktop.
Download ZIP
A simple bootstrap form with 2 bootstrap datepicker A simple bootstrap form with 2 bootstrap datepickers // source http://jsbin.com/nidewi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="A simple bootstrap form with 2 bootstrap datepickers">
<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/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>A simple bootstrap form with 2 bootstrap datepicker</title>
</head>
<body>
<script>
</script>
<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">{{ 'app.receipt' | translate }}</div>
<div class="panel-body">
<form novalidate name="form" class="simple-form">
<div class="form-group" ng-class="{ 'has-error' : form.store_label.$invalid && !form.store_label.$pristine }">
<div class="input-group form-group" ng-class="{ 'has-error' : form.date.$invalid && !form.date.$pristine }">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<div class="input-append date">
<input data-provide="datepicker" class="form-control" name="datefrom" data-date-format="yyyy-mm-dd" ng-model="ctl.item.datefrom" required/>
</div>
</div>
<div class="input-group form-group" ng-class="{ 'has-error' : form.date.$invalid && !form.date.$pristine }">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<div class="input-append date">
<input data-provide="datepicker" class="form-control" name="dateto" data-date-format="yyyy-mm-dd" ng-model="ctl.item.dateto" required/>
</div>
</div>
<div class="button-group">
<button ng-show="!form.$pristine || form.$valid" type="rst" class="btn" ng-click="ctl.reset()" tooltip="{{ 'action.reset' | translate}}">
<i class="fa fa-eraser fa-2x">
</i>
</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment