You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Calendar that is always visible


Dateinput demo 5 / 6 : Calendar that is always visible

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.


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();

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>

CSS coding

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

#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;		
}

Here is the standalone version of this demo. You can freely study and copy its source code.
•