Calendar that is always available

You can configure the dateinput to be always visible. Now you can build applications where the calendar is a core part of the user interface.

standalone demo

Dateinput configuration

There is no special configuration variables to make this possible. We do some simple scripting instead. The logic is simple: 1. show the dateinput when page loads and 2. disable closing of dateinput. When user clicks on a date we update our large "day display" with a custom formatted date string.

// initialize dateinput
$(":date").dateinput( {
 
	// closing is not possible
	onHide: function()  {
		return false;
	},
 
	// when date changes update the day display
	change: function(e, date)  {
		$("#theday").html(this.getValue("dd<span>mmmm yyyy</span>"));
	}
 
// set initial value and show dateinput when page loads
}).data("dateinput").setValue(0).show();

JavaScript

HTML layout

We make a separate wrapper element for the dateinput and the associative calendar and we adjust it's dimensions with CSS. The day display is a simple DIV that get's filled when a day is selected.

<!-- wrapper element -->
<div id="calendar">
  <input type="date" name="mydate" value="0" />
</div>
 
<!-- large date display -->
<div id="theday"></div>

HTML

CSS coding

Here is the styling of the wrapper element and the day display.

<!-- dateinput styling -->
<link rel="stylesheet" type="text/css"
      href="/media/css/dateinput/large.css"/>
<style>
#calendar {
	height:400px;
	width:410px;
	float:left;
}
 
#theday {
	-moz-border-radius:5px;
	background-color:#36387B;
	color:#FFFFFF;
	float:left;
	font-size:90px;
	height:80px;
	line-height:50px;
	margin-top:30px;
	padding:60px;
	text-shadow:0 0 5px #DDDDDD;
	width:117px;
}
 
#theday span {
	display:block;
	font-size:16px;
	text-align:center;
}
</style>

CSS