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("ddmmmm yyyy"));
	}
 
// 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 コード

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