Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script>
    $(document).ready(function() {
    			$("#calendar").bootstrapDatepickr();
    			$("#calendar1").bootstrapDatepickr({date_format: "d-m-Y"});
    			$("#calendar2").bootstrapDatepickr({date_format: "l, do F Y"});
    		});
  </script>
</head>

<body>
  <div class="container">
    <div class="page-header">
      <h1>bootstrapDatepickr Eamples</h1>
      <p class="lead">A few basic examples showing bootstrapDatepickr in action.</p>
    </div>

    <h3>Input with input-group addon</h3>
    <p>An input with a Bootstrap input-group addon and a Fontawesome icon.</p>
    <div class="row">
      <div class="col-md-4">
        <div class="input-group">
          <span class="input-group-addon" id="basic-addon1"><i class="fa fa-calendar"></i></span>
          <input type="text" id="calendar" placeholder="test" class="form-control">
        </div>
      </div>
    </div>
    <hr/>
    <h3>Formatted date - d-m-Y</h3>
    <p>A formatted date of two digit day, two digit month and 4 digit year.</p>
    <div class="row">
      <div class="col-md-4">
        <input type="text" id="calendar1" placeholder="test" class="form-control">
      </div>
    </div>
    <hr/>
    <h3>Formatted date - l, do F Y</h3>
    <p>A formatted date of full day name, octal two digit day number (eg: 1st, 22nd), full month and 4 digit year.</p>
    <div class="row">
      <div class="col-md-4">
        <input type="text" id="calendar2" placeholder="test" class="form-control">
      </div>
    </div>
    <hr>
    <div class="credit">
         <p>Project for <a href="https://www.inspirationde.com/" target="_blank">inspirationde</a></p>
    </div>
  </div>
</body>
              
            
!

CSS

              
                .bootstrapDatepickr-cal{
	z-index: 1000;
	position:absolute;
	width: 100%;
}

.bootstrapDatepickr-today{
	background-color: #f0ad4e;
	border-color: #eea236;
	color: #fff;
	cursor: pointer;
}

.bootstrapDatepickr-day{
	cursor: pointer;
}

.bootstrapDatepickr-days{
	font-weight: 700;
}

.bootstrapDatepickr-next-month, .bootstrapDatepickr-prev-month{
	cursor: pointer;
}

.bootstrapDatepickr-selected_date{
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
}

.bootstrapDatepickr-next-month:hover, .bootstrapDatepickr-prev-month:hover, .bootstrapDatepickr-day:hover{
	background-color: #f5f5f5;
}

.bootstrapDatepickr-hidden{
	display: none;
}

#bootstrapDatepickr-table{
	background-color: #fff;
	text-align: center;
}

.bootstrapDatepickr-header th{
	text-align: center;
	font-weight: 700;
}
.credit a{
  font-weight: 700;
}
              
            
!

JS

              
                ;(function ( $, window, document, undefined ) {
	"use strict";
	
	var pluginName = 'bootstrapDatepickr';
    var defaults = {
		date_format: "d/m/Y"
	};
	
	// The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options) ;
        this._defaults = defaults;
        this._name = pluginName;
		this.settings = {
			'date_object': new Date(),
			'selected_day': '',
            'current_month': new Date().getMonth() + 1,
            'current_year': new Date().getFullYear(),
			'selected_date': '',
			'allowed_formats': ['d', 'do', 'D', 'j', 'l', 'w', 'F', 'm', 'M', 'n', 'U', 'y', 'Y'],
			'month_name': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
			'date_formatting': {
				'weekdays': {
					'shorthand': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
					'longhand': ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday','Friday', 'Saturday']
				},
				'months': {
					shorthand: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul','Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
					longhand: ['January', 'February', 'March', 'April', 'May', 'June', 'July','August', 'September', 'October', 'November', 'December']
				}
			}
        };

		this.init();
    }
	
	// Avoid Plugin.prototype conflicts
	$.extend(Plugin.prototype, {
		init: function () {
			var plugin = this;
			var element = plugin.element;
			
			// make input-group-addon's clickable too
			if($(element).parent().hasClass("input-group")){
				$(element).prev().addClass('addonclick_id-' + $(element).attr('id'));
			}
			
			// hook up our event bindings
			this.bindEvents();
			
			// init the calendar 
			this.init_cal(plugin, element, plugin.settings.current_month, plugin.settings.current_year);
		},
		
		bindEvents: function() {
			var plugin = this;
			var element = plugin.element;
			
			// trap click events
			$(element).on("click", plugin, this.wrapper_clicked);
			$('.addonclick_id-' + $(element).attr('id')).on("click",plugin , this.addon_clicked);
		},
		
		// we init the calendar wrappers so we can hook into the next/prev month links
		init_cal: function(plugin, element, cal_month, cal_year) {
			var settings = plugin.settings;
			
			var t = '<div class="bootstrapDatepickr-cal cal_id-' + $(element).attr('id') + ' bootstrapDatepickr-hidden">';
			t += '<table id="bootstrapDatepickr-table" class="table table-bordered table_id-' + $(element).attr('id') + '" cols="7">';
			t += '<tr class="bootstrapDatepickr-header">';
			t += '<th class="bootstrapDatepickr-prev-month prev_id-' + $(element).attr('id') + '" colspan="1">&laquo;</th>';
			t += '<th colspan="5" class="bootstrapDatepickr-month month_id-' + $(element).attr('id') + '">' + settings.month_name[cal_month - 1] + '  ' + cal_year + '</th>';
			t += '<th class="bootstrapDatepickr-next-month next_id-' + $(element).attr('id') + '" colspan="1">&raquo;</th></tr>';
			t += '<tbody id="bootstrapDatepickr-body-' + $(element).attr('id') + '">';
			t += '</tbody></table></div>';
			
			// insert into DOM
			$(element).after(t);
			
			// generate calendar body
			this.generate_calendar(plugin, settings.current_month, settings.current_year);
		},		
		
		addon_clicked: function(e)
		{
			// toggle the calendar on input-group-addon click
			var plugin = e.data;
			$(".cal_id-" + $(plugin.element).attr('id')).toggleClass("bootstrapDatepickr-hidden");
		},
		
		wrapper_clicked: function(e)
		{
			// get settings
			var plugin = e.data;
			var settings = plugin.settings;
			
			// returns the date when a day is clicked
			$('body').unbind().on('click', '.day_id-' + $(this).attr('id'), function () {
				if($(this).html() != "&nbsp;"){
					settings.selected_day = $(this).html();
					var formatted_date = formatDate();
					settings.selected_date = formatted_date;
					
					// set the input value
					$("#" + $(plugin.element).attr('id')).val(formatted_date);
	
					// show/hide the wrapper element
					$(".cal_id-" + $(plugin.element).attr('id')).addClass("bootstrapDatepickr-hidden");
				}
			});
			
			// next month click event
			$('body').on('click', '.next_id-' + $(this).attr('id'), function () {
				// adjust the near if next is pressed in december		
				if(settings.current_month === 12){
					settings.current_year++;
					settings.current_month = 1;
				}else{
					settings.current_month++;
				}

				// generate the new calendar
				plugin.generate_calendar(plugin, settings.current_month, settings.current_year);
				
				// update the month text
				$(".month_id-" + $(plugin.element).attr('id')).html(settings.month_name[settings.current_month - 1] + " - " + settings.current_year);
			});
			
			// previous month click event
			$('body').on('click', '.prev_id-' + $(this).attr('id'), function () {
				// adjust the near if prev is pressed in Jan
				if(settings.current_month == 1){
					settings.current_year = Number(settings.current_year) - 1;
					settings.current_month = 12;
				}else{
					settings.current_month = Number(settings.current_month) - 1;
				}
				
				// generate the new calendar
				plugin.generate_calendar(plugin, settings.current_month, settings.current_year);
				
				// update the month text
				$(".month_id-" + $(plugin.element).attr('id')).html(settings.month_name[settings.current_month - 1] + " - " + settings.current_year);
			});
			
			// show/hide the wrapper element
			$(".cal_id-" + $(this).attr('id')).toggleClass("bootstrapDatepickr-hidden");;
			
			// toggles the 'bootstrapDatepickr-selected_date' class for the already selected day
			plugin.highlight_selected_day(plugin);
			
			// formats the date using the default/supplied options date
			function formatDate () {
				var currentTimestamp = new Date(plugin.settings.current_year, plugin.settings.current_month - 1, plugin.settings.selected_day);
				plugin.settings.date_object = currentTimestamp;
				var dateFormat = plugin.options.date_format,
					dateObj = new Date(currentTimestamp.getTime()),
					formats = {
						d: function () {
							var day = formats.j();
							return (day < 10) ? '0' + day : day;
						},
						do: function () {
							var day = formats.j();
							return getGetOrdinal(day);
						},
						D: function () {
							return plugin.settings.date_formatting.weekdays.shorthand[formats.w()];
						},
						j: function () {
							return dateObj.getDate();
						},
						l: function () {
							return plugin.settings.date_formatting.weekdays.longhand[formats.w()];
						},
						w: function () {
							return dateObj.getDay();
						},
						F: function () {
							return monthToStr(formats.n() - 1, false);
						},
						m: function () {
							var month = formats.n();
							return (month < 10) ? '0' + month : month;
						},
						M: function () {
							return monthToStr(formats.n() - 1, true);
						},
						n: function () {
							return dateObj.getMonth() + 1;
						},
						U: function () {
							return dateObj.getTime() / 1000;
						},
						y: function () {
							return String(formats.Y()).substring(2);
						},
						Y: function () {
							return dateObj.getFullYear();
						}
					};
					var formatPieces = "";
					var splitChar = "";
					if(dateFormat.indexOf("/") > -1){
						formatPieces = dateFormat.split('/');
						splitChar = "/";
					}else if(dateFormat.indexOf("-") > -1){
						formatPieces = dateFormat.split('-');
						splitChar = "-";
					}else{
						formatPieces = dateFormat.split(' ');
						splitChar = " ";
					}
				
				// build formatted date string 
				$.each(formatPieces, function( index, formatPiece ) {
					// strip non alpha from format piece
					formatPiece = formatPiece.replace(/[\W_]+/g,"").trim();
					
					// check the formatPiece is in the list of allowed formatting values. This allows for punctuation (comma etc) in the date format
					if(plugin.settings.allowed_formats.indexOf(formatPiece) > -1){
						dateFormat = dateFormat.replace(formatPiece, formats[formatPiece]);
					}
				});
			
				return dateFormat;
			};
			
			// borrowed from Spotify
			function getGetOrdinal(n) {
				var s=["th","st","nd","rd"],
					v=n%100;
				return n+(s[(v-20)%10]||s[v]||s[0]);
			}
		
			function monthToStr (date, shorthand) {
				if (shorthand === true) {
					return plugin.settings.date_formatting.months.shorthand[date];
				}
		
				return plugin.settings.date_formatting.months.longhand[date];
			};
			
			function pad(n, width, z) {
				z = z || '0';
				n = n + '';
				return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
			}
			
			// splits up the class to get the ID
			function get_id_from_class(full_class){
				var id_class = full_class.split(' ')[1];
				var id_split = id_class.split('-');
				return id_split[id_split.length-1];
			}
		},
		
		// toggles the 'bootstrapDatepickr-selected_date' class for the already selected day
		highlight_selected_day: function(plugin){
			if($(plugin.element).val() != ""){
				if(plugin.settings.selected_date != ""){
					// check selected year is currently showing
					if(plugin.settings.current_year == plugin.settings.date_object.getFullYear()){
						// check selected month is currently showing
						if(plugin.settings.current_month == plugin.settings.date_object.getMonth() + 1){
							$(".day_id-" + $(plugin.element).attr('id')).each(function(index) {
								if(plugin.settings.selected_day == $(this).text()){
									$(this).addClass('bootstrapDatepickr-selected_date');
								}else{
									$(this).removeClass('bootstrapDatepickr-selected_date');
								}
							});
						}
					}
				}
			}
		},
		
		// generate the day rows of the calendar
		generate_calendar: function(plugin, cal_month, cal_year) {
			var element = plugin.element;
			
			var month_days = [31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
			
			var todaydate = new Date();
			
			var dte_obe = new Date(cal_year, cal_month - 1, 1); //DD replaced line to fix date bug when current day is 31st
			dte_obe.od = dte_obe.getDay() + 1; //DD replaced line to fix date bug when current day is 31st
			
			var scanfortoday = (cal_year == todaydate.getFullYear() && cal_month == todaydate.getMonth() + 1) ? todaydate.getDate() : 0 //DD added
		
			month_days[1] = (((dte_obe.getFullYear() % 100 != 0) && (dte_obe.getFullYear() % 4 == 0)) || (dte_obe.getFullYear() % 400 == 0)) ? 29 : 28;
			
			// remove all the rows
			$('.row_id-'+ $(element).attr('id')).remove();
			
			var t = '<tr class="bootstrapDatepickr-row row_id-'+ $(element).attr('id')+'">';
			for (var s = 0; s < 7; s++)t += '<td class="bootstrapDatepickr-days">' + "SMTWTFS".substr(s, 1) + '</td>';
			t += '</tr><tr class="bootstrapDatepickr-row row_id-'+ $(element).attr('id')+'">';
			for (var i = 1; i <= 42; i++) {
				var today_class = "";
				var x = ((i - dte_obe.od >= 0) && (i - dte_obe.od < month_days[cal_month - 1])) ? i - dte_obe.od + 1 : '&nbsp;';
				if (x == scanfortoday){ //DD added
					today_class = 'bootstrapDatepickr-today'; //DD added
				}
				
				t += '<td class="bootstrapDatepickr-day day_id-'+ $(element).attr('id') +' '+ today_class + '">' + x + '</td>';
				if (((i) % 7 == 0) && (i < 36)) t += '</tr><tr class="bootstrapDatepickr-row row_id-'+ $(element).attr('id')+'">';
			}
			
			t += '</tr></table></div>';
			
			// append all the rows
			$('#bootstrapDatepickr-body-' + $(element).attr('id')).append(t);
			
			// loop rows and remove any where all td's are blank
			$('.row_id-'+ $(element).attr('id')).each(function() {
				if($(this).text().trim() === ""){
					$(this).remove();
				}
			});
			
			// here we check for bootstrap input-group tags and ensure the calendar wrapper sits after the input group to 
			// ensure the "add-on" remains the correct height
			if($(element).parent().hasClass("input-group")){
				$('.cal_id-' + $(element).attr('id')).detach().insertAfter($(element).parent());
				$('.cal_id-' + $(element).attr('id')).css("left", $(element).parent().position().left);
				$('.cal_id-' + $(element).attr('id')).css("width", $(element).parent().outerWidth());
			}else{
				$('.cal_id-' + $(element).attr('id')).css("left", $(element).position().left);
				$('.cal_id-' + $(element).attr('id')).css("width", $(element).outerWidth());
			}
			
			// position the wrapper in relation to the triggering element
			$('.cal_id-' + $(element).attr('id')).css("top", $(element).position().top + $(element).outerHeight());
			
			// toggles the 'bootstrapDatepickr-selected_date' class for the already selected day
			this.highlight_selected_day(plugin);
		}	
	});
	
	$.fn[pluginName] = function (options) {
		return this.each(function() {
			if ( !$.data( this, "plugin_" + pluginName ) ) {
					$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
			}
		});
	};
	
})(jQuery, window, document);
              
            
!
999px

Console