Angular Date Picker
11:29
Introduction
In this article I want to show how to create date picker in AngularJsUsing Scripts & CSS
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-messages.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.js"></script> <script src="js/angular-daterangepicker.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.css" />
Test.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="AngularDatePicker.Test" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Daterange picker example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-messages.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.js"></script>
<script src="js/angular-daterangepicker.min.js"></script>
<div class="container">
<h1>Daterange picker example</h1>
<div class="row">
<div class="col-md-6" ng-controller="TestCtrl">
<form name="dateForm" class="form-horizontal">
<div class="form-group">
<label for="daterange1" class="control-label">A. Simple picker:</label>
<input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text" ng-model="date" required />
</div>
<div class="form-group" ng-class="{'has-error': dateForm.daterange2.$invalid}">
<label for="daterange2" class="control-label">B. Picker with min and max date:</label>
<input date-range-picker id="daterange2" name="daterange2" class="form-control date-picker" type="text" min="'2015-01-23'" max="'2015-08-25'" ng-model="date" required />
<div class="help-block" ng-messages="dateForm.daterange2.$error">
<p ng-message="min">Start date is too far in the past.</p>
<p ng-message="max">End date is too far in the future.</p>
<p ng-message="required">Range is required.</p>
</div>
</div>
<div class="form-group">
<label for="daterange3" class="control-label">C. Picker with custom locale:</label>
<input date-range-picker id="daterange3" name="daterange3" class="form-control date-picker" type="text" ng-model="date" options="opts" required />
</div>
<div class="form-group">
<label for="daterange4" class="control-label">D. Clearable picker:</label>
<input date-range-picker id="daterange4" name="daterange4" class="form-control date-picker" type="text" ng-model="date" clearable="true" required />
</div>
<div class="form-group">
<label for="daterange5" class="control-label">E. Picker with custom format:</label>
<input date-range-picker name="daterange5" id="daterange5" class="form-control date-picker" type="text" ng-model="date" options="{locale: {format: 'MMMM D, YYYY'}}" required />
</div>
<div class="form-grou">
<button type="button" class="btn" ng-click="setStartDate()">Set Start Date to 4 days ago</button>
<button type="button" class="btn" ng-click="setRange()">Set Range to 4 days ago</button>
</div>
<div class="form-group">
<label for="daterange6" class="control-label">F. Single date:</label>
<input date-range-picker name="daterange6" id="daterange6" class="form-control date-picker" type="text" ng-model="singleDate" options="{singleDatePicker: true}" required />
</div>
</form>
<div class="row">
<h4>Model:</h4>
<div class="col-md-12 well">
<label>Date range:</label><br>
{{date | json}}<br>
<label>Single date:</label><br>
{{singleDate | json}}<br>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
exampleApp = angular.module('example', ['ngMessages', 'daterangepicker']);
exampleApp.controller('TestCtrl', function ($scope) {
$scope.date = {
startDate: moment().subtract(1, "days"),
endDate: moment()
};
$scope.singleDate = moment();
$scope.opts = {
locale: {
applyClass: 'btn-green',
applyLabel: "Apply",
fromLabel: "From",
format: "YYYY-MM-DD",
toLabel: "To",
cancelLabel: 'Cancel',
customRangeLabel: 'Custom range'
},
ranges: {
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()]
}
};
$scope.setStartDate = function () {
$scope.date.startDate = moment().subtract(4, "days").toDate();
};
$scope.setRange = function () {
$scope.date = {
startDate: moment().subtract(5, "days"),
endDate: moment()
};
};
//Watch for date changes
$scope.$watch('date', function (newDate) {
console.log('New date set: ', newDate);
}, false);
});
angular.bootstrap(document, ['example']);</script>
</html>
Run the application and we can see the below screen:
0 comments