Datepicker for Bootstrap

Example

Default functionality

Dates in other months

Display button bar

Display month & year menus

Display multiple months

Icon trigger

Localize calendar

Populate alternate field

Restrict date range

Display inline

Modify the appearance of jquery.ui.datepicker.

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
$(function(){
	$.datepicker.setDefaults({
		"prevText" : '&#x3c;',
		"nextText" : '&#x3e;',
		"beforeShow": function(i, o){
			$(o.dpDiv).addClass('panel panel-default');
		}
	});

	//copy _generateHTML
	$.datepicker.__generateHTML = $.datepicker._generateHTML;
	//overwrite _generateHTML
	$.datepicker._generateHTML = function(inst){
		return '<div class="panel-body">'
			+ $.datepicker.__generateHTML(inst)
				//adjust the width.
				.replace('<table', '<table style="width:200px;"')
				//replace classes.
				.replace('ui-datepicker-prev', 'pull-left btn btn-default btn-sm')
				.replace('ui-datepicker-next', 'pull-right btn btn-default btn-sm')
				.replace('ui-datepicker-title', 'text-center')
				.replace('ui-state-default ui-state-active', 'btn btn-primary btn-block btn-xs')
				.replace(/ui-state-default ui-priority-secondary/g, 'btn btn-info btn-block btn-xs')
				.replace(/ui-state-default/g, 'btn btn-link btn-block btn-xs')
			+ '</div>';
	}

	$('.datepicker').datepicker();
});
</script>

CSS

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style>
.ui-datepicker {box-shadow:3px 3px 5px rgba(0,0,0,0.5);}
.ui-datepicker-header {font-weight:bold;}
.ui-state-hover {background:#eee;}
</style>

Usage

Same as jquery.ui.datepicker.

$('.datepicker').datepicker(options);

Comments