[ KAWWA PORTAL ] Components : Datepicker

Forms

Datepicker

Class name: (k-datepick)
Version: 1.1
jQuery Interactive feature
Tapestry Integration

This component uses the "date" input type. For browsers that don't support this type of input, the jQuery plugin "datepicker" will be called instead.

Demo
Snippets
Tapestry Integration

Enter a date:

HTML5 Plain Code

COPY

<p><label for="date1">Enter a date:</label>

	<input type="date" id="date1" name="date1" placeholder="MM/DD/YYYY" /></p>

CSS Code

COPY

input.k-datepick {width: 6.7em; text-align: center;}

```
/* Calendar button */
```

img.ui-datepicker-trigger {padding: 0 5px; vertical-align: top; cursor: pointer;}

```
/* Today's date link */
```

td.ui-datepicker-today a, td.ui-datepicker-today a:link, td.ui-datepicker-today a:visited {

```
	color: #FFF;
```
```
	background: #A40800;
```
```
}
```
```
/* Values for calendar table */
```
```
.ui-datepicker {
```
```
	display: none;
```
```
	margin: 0;
```
```
	background: #F2F2F2;
```
```
	border: 1px solid #808080;
```
```
	box-shadow: 0 0 3px #666;
```
```
}
```
```
.ui-datepicker table {margin: 0;}
```

.ui-datepicker tr:nth-child(even) td {color: #000; background: #FFF;}

```
.ui-datepicker th {
```

	font: 0.65em open_sansbold, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

```
	text-transform: uppercase;
```
```
	text-align: right;
```
```
	color: #FFF;
```
```
	background: #808080;
```
```
	padding: 0.2em 0.3em;
```
```
}
```
```
.ui-datepicker td {
```
```
	font-size: 0.7em;
```
```
	text-align: right;
```
```
	padding: 0.1em;
```
```
	border: none;
```
```
}
```

.ui-datepicker td span, .ui-datepicker td a {

```
	display: block;
```
```
	text-decoration: none;
```
```
	color: #000;
```
```
	padding: 0.3em;
```
```
}
```
```
.ui-datepicker td a:hover {
```
```
	color: #FFF;
```
```
	background: #A40800;
```
```
}
```
```
/* Month/Year title */
```
```
.ui-datepicker .ui-datepicker-title {
```

	font: 0.75em open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

```
	text-transform: uppercase;
```
```
	text-align: center;
```
```
	color: #FFF;
```
```
	background: #000;
```
```
	padding: 0.3em 0;
```
```
}
```
```
/* Prev/Next Arrows */
```

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {

```
	position: absolute;
```
```
	top: 2px;
```
```
	width: 23px;
```
```
	height: 23px;
```
```
}
```
```
.ui-datepicker .ui-icon {
```
```
	display: block;
```
```
	overflow: hidden;
```
```
	text-indent: -99999px;
```
```
	cursor: pointer;
```
```
}
```
```
.ui-icon-circle-triangle-w {
```
```
	width: 16px;
```
```
	height: 16px;
```

	background: transparent url(../img/k-theme0/date_prev.gif) 0 2px no-repeat;

```
}
```
```
.ui-icon-circle-triangle-e {
```
```
	width: 16px;
```
```
	height: 16px;
```

	background: transparent url(../img/k-theme0/date_next.gif) right 2px no-repeat;

```
}
```

.ui-datepicker .ui-datepicker-prev {left: 2px;}

.ui-datepicker .ui-datepicker-next {right: 2px;}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {

```
	display: block;
```
```
	position: absolute;
```
```
	left: 50%;
```
```
	margin-left: -8px;
```
```
	top: 50%;
```
```
	margin-top: -8px;
```
```
}
```

How to apply

COPY

```
(function($){
```
```
	'use strict';
```

	/* With Feature detection for date input type */

```
	function dateTest() {
```

		var i = document.createElement('input');

```
		i.setAttribute('type', 'date');
```
```
		return i.type !== 'text';
```
```
	}
```
```
	$(document).ready(function(){
```
```
        if (!dateTest()) {
```

            if ($.ui && $.ui.datepicker) {

                $('input[type=date]').addClass('k-datepick');

                /* Use the commented code below to apply translation initialisation

```
                 jQuery(function($){
```

                    jQuery.datepicker.regional['fr'] = {

                        closeText: 'Fermer',

                        prevText: 'Mois prÃ©cedent',

                        nextText: 'Mois suivant',

                        currentText: 'Courant',

                        monthNames: ['Janvier','FÃ©vrier','Mars','Avril','Mai','Juin',

                        'Juillet','AoÃ»t','Septembre','Octobre','Novembre','DÃ©cembre'],

                        monthNamesShort: ['Jan','FÃ©v','Mar','Avr','Mai','Jun',

                        'Jul','AoÃ»','Sep','Oct','Nov','DÃ©c'],

                        dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],

                        dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],

                        dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],

                        dateFormat: 'dd/mm/yy', firstDay: 1,

```
                        isRTL: false};
```

                    $.datepicker.setDefaults($.datepicker.regional['fr']);

```
                });*/
```

                $('input.k-datepick').datepicker({

```
                    showOn: 'button',
```

                    buttonImage: '../img/k-theme0/pic_calendar.gif',

                    buttonImageOnly: true,

                    buttonText: 'Click to open/close the calendar'

```
                });
```
```
            }
```
```
        } else {
```

            $('input[type=date]').css('width', '9em');

```
        }
```
```
	});
```
```
})(jQuery);
```

For more information about how to apply this plug-in, its options, events and methods, see the jQuery UI Datepicker page.

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Integration

The DateField component come from the Tapesry framework, but with the jQuery UI Javascript file. So, you will have the same behavior as the original one.

NB: Those components belong to the tapestry5-jquery project, please have a look to the official website.

If you want to override the JSONObject of the jQuery UI widget, you need to use the CustomDatepicker mixin, provided by the Tapestry5-jQuery project. This mixin has just one JSONObject-type parameter params, which correspond to the parameters of the jQuery UI widget. You will find more information on the Tapestry5-jQuery website : http://tapestry5-jquery.com/docs/mixins/customdatepicker

You should not use the dateFormat parameter of the jQuery UI widget. The Java and jQuery formats are not the same. We have created an utility method, that will convert a Java format into a jQuery one. If you need to specify a specific format, you should use the format parameter of the datefield component.

The Template

COPY

```
<form t:type="form">
```
```
     		
```
```
     <p>
```

     	<t:label t:for="date1">Enter a date:</t:label>

     	<input t:type="datefield" t:id="date1" class="k-datepick" t:name="date1"

    	t:mixins="jquery/CustomDatepicker" t:params="options"/>

```
	</p>
```
```
	
```
```
</form>
```

Java Implementation

COPY

```
import java.util.Date;
```

import org.apache.tapestry5.ioc.annotations.Inject;

import org.apache.tapestry5.json.JSONObject;

import org.apache.tapestry5.services.AssetSource;

```
public class DateField {
```
```
	@Property
```
```
	private Date date1;
```
```
	
```
```
	@Inject
```
```
	private AssetSource as;
```
```
	
```
```
	public JSONObject getOptions(){
```
```
		
```
```
		return new JSONObject()
```
```
				.put("showOn", "button")
```

				.put("buttonImage", as.getClasspathAsset("${kawwa2.img-path}/pic_calendar.gif").toClientURL())

```
				.put("buttonImageOnly", true)
```

				.put("buttonText", "Click to open/close the calendar");

```
	}
```
```
}
```

Top

KAWWA Markup Pattern Library

Forms

Datepicker

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Tapestry Integration

The Template

Java Implementation

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce