Jx.Field.Date for JxLib

Jx.Field.Date.js

/*
---

name: Jx.Field.Date

description: A Jx.Field.Date: Provide a field to select a valid date value using a Date Picker

license: MIT-style license.

provides: [Jx.Field.Date]

...
 */
// $Id$
/**
 * Class: Jx.Field.Date
 *
 * A Jx.Field.Date: Provide a field to select a valid date value using a Date Picker
 *
 * Example:
 * (code)
 * 	new Jx.Field.Date({
 * 		label: 'Start Date',
 *		value: '05/05/1984',
 *		format: '%m/%d/%Y'
 *	})
 * (end)
 *
 * Extends:
 * <Jx.Field>
 *
 * Author: Ing. Axel Mendoza Pupo.
 * 
 * License:
 * Copyright (c) 2011, Ing. Axel Mendoza Pupo.
 *
 * This file is licensed under an MIT style license
 */

	Jx.Field.Date = new Class({
	    Family: 'Jx.Field.Date',
	    Extends: Jx.Field,
	    
	    options: {
	        buttonTemplate: '<a class="jxButtonContainer jxButton" href="javascript:void(0);"><img class="jxButtonIcon" src="'+Jx.aPixel.src+'"></a>',
	        /* Option: template
	         */
	        template: '<span class="jxInputContainer"><label class="jxInputLabel"></label><span class="jxInputWrapper"><input type="text" class="jxInputText"  name="{name}"><span class="jxInputRevealer"></span></span><span class="jxInputTag"></span></span>',
	        format: '%d/%m/%Y'
	     },
	     
	     type: 'Text',
	     
	    /**
	     * APIMethod: render
	     * create a new instance of Jx.Field.Date
	     */
	    render: function() {
	        this.classes.combine({
	          wrapper: 'jxInputWrapper',
	          revealer: 'jxInputRevealer',
	          icon: 'jxInputIcon'
	        });
	        this.parent();
	        var that = this;
	        
	        this.formatter = new Jx.Formatter.Date({
	        	format: this.options.format
	        });
	        
	        var pickerContainer = new Element('div',{
	        	styles: {
		        	width: 171,
	            	height: 146
	        	}
	        });
	        
	        var button = new Jx.Button.Flyout({
	            template: this.options.buttonTemplate,
	            imageClass: 'jxInputRevealerIcon',
	            positionElement: this.field,
	            content: pickerContainer
	        }).addTo(this.revealer);
	        
	        this.datePicker = new Jx.DatePicker({
	        	value: this.options.value,
	        	onSelect: function(value){
	        		var valueNew = that.formatter.format(value);
	        		that.setValue(valueNew);
	        		button.hide();
	        	}
	        }).addTo(pickerContainer);
	        
	        button.addEvent('click', function(e) {
	            
	            if (!button.options.enabled) {
	                return;
	            }
	            this.contentContainer.setStyle('visibility','hidden');
	            this.contentContainer.setStyle('display','block');
	            document.id(document.body).adopt(this.contentContainer);
	            /* we have to size the container for IE to render the chrome correctly
	             * but just in the menu/sub menu case - there is some horrible peekaboo
	             * bug in IE related to ULs that we just couldn't figure out
	             */
	            this.contentContainer.setContentBoxSize(this.subDomObj.getMarginBoxSize());

	            this.showChrome(this.contentContainer);

	            this.position(this.contentContainer, that.field, {
	                horizontal: ['left left', 'right right'],
	                vertical: ['bottom top', 'top bottom'],
	                offsets: this.chromeOffsets
	            });

	            this.contentContainer.setStyle('visibility','');

	            document.addEvent('mousedown', this.bound.hide);
	            document.addEvent('keyup', this.bound.keypress);

	            //this.fireEvent('show', this);
	            
	            
	        }.bind(this));
	     }
	});