KAWWA Markup Pattern Library


Forms

Datepicker Component Information

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

Add to list

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

COPY
  1. <p><label for="date1">Enter a date:</label>
  2. 	<input type="date" id="date1" name="date1" placeholder="MM/DD/YYYY" /></p>

CSS Code

COPY
  1. input.k-datepick {width: 6.7em; text-align: center;}
  2. 
                                
  3. /* Calendar button */
  4. img.ui-datepicker-trigger {padding: 0 5px; vertical-align: top; cursor: pointer;}
  5. 
                                
  6. /* Today's date link */
  7. td.ui-datepicker-today a, td.ui-datepicker-today a:link, td.ui-datepicker-today a:visited {
  8. 	color: #FFF;
  9. 	background: #A40800;
  10. }
  11. 
                                
  12. /* Values for calendar table */
  13. .ui-datepicker {
  14. 	display: none;
  15. 	margin: 0;
  16. 	background: #F2F2F2;
  17. 	border: 1px solid #808080;
  18. 	box-shadow: 0 0 3px #666;
  19. }
  20. .ui-datepicker table {margin: 0;}
  21. .ui-datepicker tr:nth-child(even) td {color: #000; background: #FFF;}
  22. .ui-datepicker th {
  23. 	font: 0.65em open_sansbold, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  24. 	text-transform: uppercase;
  25. 	text-align: right;
  26. 	color: #FFF;
  27. 	background: #808080;
  28. 	padding: 0.2em 0.3em;
  29. }
  30. .ui-datepicker td {
  31. 	font-size: 0.7em;
  32. 	text-align: right;
  33. 	padding: 0.1em;
  34. 	border: none;
  35. }
  36. .ui-datepicker td span, .ui-datepicker td a {
  37. 	display: block;
  38. 	text-decoration: none;
  39. 	color: #000;
  40. 	padding: 0.3em;
  41. }
  42. .ui-datepicker td a:hover {
  43. 	color: #FFF;
  44. 	background: #A40800;
  45. }
  46. 
                                
  47. /* Month/Year title */
  48. .ui-datepicker .ui-datepicker-title {
  49. 	font: 0.75em open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  50. 	text-transform: uppercase;
  51. 	text-align: center;
  52. 	color: #FFF;
  53. 	background: #000;
  54. 	padding: 0.3em 0;
  55. }
  56. 
                                
  57. /* Prev/Next Arrows */
  58. .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  59. 	position: absolute;
  60. 	top: 2px;
  61. 	width: 23px;
  62. 	height: 23px;
  63. }
  64. 
                                
  65. .ui-datepicker .ui-icon {
  66. 	display: block;
  67. 	overflow: hidden;
  68. 	text-indent: -99999px;
  69. 	cursor: pointer;
  70. }
  71. .ui-icon-circle-triangle-w {
  72. 	width: 16px;
  73. 	height: 16px;
  74. 	background: transparent url(../img/k-theme0/date_prev.gif) 0 2px no-repeat;
  75. }
  76. .ui-icon-circle-triangle-e {
  77. 	width: 16px;
  78. 	height: 16px;
  79. 	background: transparent url(../img/k-theme0/date_next.gif) right 2px no-repeat;
  80. }
  81. 
                                
  82. .ui-datepicker .ui-datepicker-prev {left: 2px;}
  83. .ui-datepicker .ui-datepicker-next {right: 2px;}
  84. .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
  85. 	display: block;
  86. 	position: absolute;
  87. 	left: 50%;
  88. 	margin-left: -8px;
  89. 	top: 50%;
  90. 	margin-top: -8px;
  91. }
  92. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	/* With Feature detection for date input type */
  5. 
                                
  6. 	function dateTest() {
  7. 		var i = document.createElement('input');
  8. 		i.setAttribute('type', 'date');
  9. 		return i.type !== 'text';
  10. 	}
  11. 
                                
  12. 	$(document).ready(function(){
  13. 
                                
  14.         if (!dateTest()) {
  15.             if ($.ui && $.ui.datepicker) {
  16.                 $('input[type=date]').addClass('k-datepick');
  17. 
                                
  18.                 /* Use the commented code below to apply translation initialisation
  19.                  jQuery(function($){
  20.                     jQuery.datepicker.regional['fr'] = {
  21.                         closeText: 'Fermer',
  22.                         prevText: 'Mois précedent',
  23.                         nextText: 'Mois suivant',
  24.                         currentText: 'Courant',
  25.                         monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
  26.                         'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
  27.                         monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
  28.                         'Jul','Aoû','Sep','Oct','Nov','Déc'],
  29.                         dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
  30.                         dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
  31.                         dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
  32.                         dateFormat: 'dd/mm/yy', firstDay: 1,
  33.                         isRTL: false};
  34.                     $.datepicker.setDefaults($.datepicker.regional['fr']);
  35.                 });*/
  36.                 $('input.k-datepick').datepicker({
  37.                     showOn: 'button',
  38.                     buttonImage: '../img/k-theme0/pic_calendar.gif',
  39.                     buttonImageOnly: true,
  40.                     buttonText: 'Click to open/close the calendar'
  41.                 });
  42.             }
  43.         } else {
  44.             $('input[type=date]').css('width', '9em');
  45.         }
  46. 	});
  47. })(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
  1. <form t:type="form">
  2.      		
  3.      <p>
  4.      	<t:label t:for="date1">Enter a date:</t:label>
  5.      	<input t:type="datefield" t:id="date1" class="k-datepick" t:name="date1" 
  6.     	t:mixins="jquery/CustomDatepicker" t:params="options"/>
  7. 	</p>
  8. 	
  9. </form>

Java Implementation

COPY
  1. import java.util.Date;
  2. 
                                
  3. import org.apache.tapestry5.ioc.annotations.Inject;
  4. import org.apache.tapestry5.json.JSONObject;
  5. import org.apache.tapestry5.services.AssetSource;
  6. 
                                
  7. public class DateField {
  8. 
                                
  9. 	@Property
  10. 	private Date date1;
  11. 	
  12. 	@Inject
  13. 	private AssetSource as;
  14. 	
  15. 	public JSONObject getOptions(){
  16. 		
  17. 		return new JSONObject()
  18. 				.put("showOn", "button")
  19. 				.put("buttonImage", as.getClasspathAsset("${kawwa2.img-path}/pic_calendar.gif").toClientURL())
  20. 				.put("buttonImageOnly", true)
  21. 				.put("buttonText", "Click to open/close the calendar");
  22. 
                                
  23. 	}
  24. }

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce