bootstrap calendar

Posted by On 2月 08, 2016 0 Comment

Bootstrap and datepicker

There are several ways to make datepicker(calendar) with bootstrap.
I introduce 3 libraries to make it.

Requirement

  • Use input and click input and calendar is shown
  • Use angular js and jquery
  • Final input is dd/mm/yyyy style
  • After picking up date, dialog which has the result is shown

And angular.js is not essential part of these examples. Just use, not requirement for those libraries

How

  • eonasdan-bootstrap-datetimepicker
  • Jquery UI
  • bootstrap-datepicker

eonasdan-bootstrap-datetimepicker

Bootstrap 3 datepicker, Github is datepicker with bootstrap 3.
This works with moment.js.
bower

bower install eonasdan-bootstrap-datetimepicker --save

HTML

<html>
<head>
	<title>DatePicker</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<script src="bower_components/angular/angular.min.js"></script>
	<script src="bower_components/jquery/dist/jquery.min.js"></script>
	<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="bower_components/moment/min/moment.min.js"></script>
	<script src="bower_components/moment-timezone/builds/moment-timezone-with-data.min.js"></script>
	<script src="bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
	<link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />

	<script src="javascripts/calendarcontrol.js"></script>
</head>
<body ng-app="appModule" ng-controller="mainController">

<div id="container">
	<h2>Birthday</h2>
	<input type="text" id="birthday">
</div>

</body>
</html>

JavaScript(calendarcontrol.js)

var app = angular.module('appModule', []);

app.controller('mainController', function($scope){
	$('#birthday').datetimepicker({
		format: 'DD/MM/YYYY',
		useCurrent: false
	});

	$("#birthday").on("dp.change", function(e) {
		// Chagne Event
		alert('Date:' + $(this).val());
	});
});

Result

eonasdan-bootstrap-datetimepicker

datepicker pick up

Jquery UI

JQuery UI is expansion of jquery library. This has origianl theme and we can use it with several interesting UIs.
datepicker
bower

bower install jquery-ui --save

HTML

<html>
<head>
	<title>Specten</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="bower_components/jquery-ui/themes/mint-choc/jquery-ui.min.css">
	<script src="bower_components/angular/angular.min.js"></script>
	<script src="bower_components/jquery/dist/jquery.min.js"></script>
	<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
	<script src="javascripts/calendarcontrol2.js"></script>
	
</head>
<body ng-app="appModule" ng-controller="mainController">

<div id="container">
	<h2>Birthday</h2>
	<input type="text" id="birthday">
</div>

</body>
</html>

This example uses mint-choc theme

JavaScript(calendarcontrol2.js)

var app = angular.module('appModule', []);

app.controller('mainController', function($scope){
	$( "#birthday" ).datepicker();

	$("#birthday").on('change', function(){
		alert($(this).val());
	});
});

Result

jqeury-ui datepicker

bootstrap-datepicker

bootstrap-datepicker is the simplest way of those ways. No additional requirements.
bower

bower install bootstrap-datepicker --save

HTML

<html>
<head>
	<title>Specten</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="styles/common.css">
	<link rel="stylesheet" type="text/css" href="styles/header-member.css">
	<link rel="stylesheet" type="text/css" href="styles/calendar.css">
	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css">
	<script src="bower_components/angular/angular.min.js"></script>
	<script src="bower_components/jquery/dist/jquery.min.js"></script>
	<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
	<script src="javascripts/calendarcontrol3.js"></script>
</head>
<body ng-app="appModule" ng-controller="mainController">

<div id="container">
	<h2>Birthday</h2>
	<input type="text" id="birthday">
</div>

</body>
</html>

JavaScript

var app = angular.module('appModule', []);

app.controller('mainController', function($scope){
	$( "#birthday" ).datepicker({format: 'dd/mm/yyyy', autoclose: true});

	$('#birthday').on("changeDate", function() {
		alert($(this).val());
	});
});

Result

bootstrap-datepicker

TOPICS