<!DOCTYPE html>
<html>
<head>
<link data-require="pickadate.js@3.3.0" data-semver="3.3.0" rel="stylesheet" href="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/themes/classic.css" />
<link data-require="pickadate.js@3.3.0" data-semver="3.3.0" rel="stylesheet" href="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/themes/classic.date.css" />
<link data-require="pickadate.js@3.3.0" data-semver="3.3.0" rel="stylesheet" href="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/themes/classic.time.css" />
<link data-require="bootstrap-css@3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="pickadate.js@3.3.0" data-semver="3.3.0" src="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/picker.js"></script>
<script data-require="pickadate.js@3.3.0" data-semver="3.3.0" src="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/picker.date.js"></script>
<script data-require="pickadate.js@3.3.0" data-semver="3.3.0" src="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/picker.time.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="https://rawgit.com/Toilal/ng-pickadate/master/ng-pickadate.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body style="padding: 1em;" ng-app="DemoApp" ng-controller="DemoAppCtrl"> <br/><br/>
<input type="text" pick-a-date="curDate" pick-a-date-options="options" /> <br/><br/>
<button ng-click="changeDatePickerOptions()">Change options</button>
</body>
</html>
(function(angular) {
'use strict';
angular.module('DemoApp', ['pickadate']).controller('DemoAppCtrl', function($scope) {
$scope.curDate = new Date();
$scope.options = {
firstDay: 0,
format: 'dd/mm/yyyy',
selectYears: true,
editable: true,
min: -5
};
$scope.changeDatePickerOptions = function() {
alert('Format should now get updated');
$scope.options.format = 'd mmmm, yyyy';
}
});
})(angular);
/* Styles go here */
.my-form-control {
display: block;
// width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.my-form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.my-form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.my-form-control:-ms-input-placeholder {
color: #999;
}
.my-form-control::-webkit-input-placeholder {
color: #999;
}