This is a message.

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