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.
HTML5 Plain Code
-
<p><label for="date1">Enter a date:</label>
-
<input type="date" id="date1" name="date1" placeholder="MM/DD/YYYY" /></p>
CSS Code
-
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
-
(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
-
<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
-
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");
-
}
-
}