DatePicker example [Archive]

corey.gilmore

12-15-2006, 12:01 PM

Since there isn't a standalone example of YAHOO.ext.DatePicker, here's a quick example that shows how to position the date picker relative to a link and update a text field based on the selected date. It also tries to load the date from the text field and can optionally compensate for Date.parse assuming two digit years are between 1900-1999.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="yui-ext/resources/css/yui-ext.css">
<script type="text/javascript" src="yui/utilities/utilities.js"></script>
<script type="text/javascript" src="yui-ext/yui-ext.js"></script>

<script type="text/javascript">
YAHOO.namespace("example");

/* example */
var yuiextDatePicker = function() {
this.textfield = getEl('dateTarget');
this.textDateFmt = 'm/d/Y'; // JS format string
this.showLink = getEl('btnShowCal');
this.datepicker = null;
this.calID = YAHOO.util.Dom.generateId(0, 'yui-ext-dp-');
this.twoDigitYearCutoff = "1930"; // set to null to ignore. If Date.parse returns a year before this then add 100 years to put is in the proper century. Cheap hack, presumably won't work in 2100 AD.
}
yuiextDatePicker.prototype.init = function() {
this.datepicker = new YAHOO.ext.DatePicker(this.calID);
this.showLink.on('click', this.show, this, true);
}
yuiextDatePicker.prototype.show = function() {
var r = this.showLink.getRegion();
var _this = this; // scope the callback appropriately
var selectedDate = new Date();
if( this.textfield.dom.value != '' ) {
selectedDate = Date.parse(this.textfield.dom.value);
if( isNaN(selectedDate) ) {
selectedDate = new Date();
} else {
selectedDate = new Date(selectedDate);
if( this.twoDigitYearCutoff && selectedDate.getFullYear() <= this.twoDigitYearCutoff ) {
selectedDate.setFullYear(selectedDate.getFullYear()+100);
}
}
}
this.datepicker.show(r.left, r.bottom, selectedDate, function(selDate) { _this.clickHandler(selDate); } );
}
yuiextDatePicker.prototype.clickHandler = function(selDate) {
this.textfield.dom.value = selDate.dateFormat(this.textDateFmt);

}
/* end */

dateExampleInit = function() {
YAHOO.example.datepicker = new yuiextDatePicker();
YAHOO.example.datepicker.init();

}

YAHOO.ext.EventManager.onDocumentReady(dateExampleInit);

</script>

</head>
<body>
<input type="text" id="dateTarget" value=""/>
show date picker (javascript:void(null);)

</body>

</html>

Minor edit, removed leftover YAHOO.log lines.

pomata

12-15-2006, 12:18 PM

lovely, been waiting for this example......

well done....

can it be easily modified to show picker below textbox when you enter/focus it?

corey.gilmore

12-15-2006, 12:29 PM

lovely, been waiting for this example......

well done....

can it be easily modified to show picker below textbox when you enter/focus it?

Sure, this example was really just to get something out there. Let me clean it up a big and make it a little more extensible. It'd be along these lines:

var textbox = getEl('our date destination');
textbox.on('focus', YAHOO.example.datepicker.show, YAHOO.example.datepicker, true);

jack.slocum

12-15-2006, 01:01 PM

Very cool. Thanks for sharing.

pomata

12-15-2006, 01:04 PM

I know Jack is working on forms validation but....

is there a small example where to filter textboxes by type like the props grid? i.e. accept only digits and not letter... etc...

tx again for date picker...

Pomata

corey.gilmore

12-15-2006, 01:10 PM

To filter a text box I guess you could do something like:

var tb = getEl('textid');
tb.on('keydown', callBackFunctionToCheckKeyCode);

And then in that function trap the keys somehow. In DatePicker.js you can see Jack doing it with the arrow keys:

handleKeyDown : function(e){
switch(e.browserEvent.keyCode){
case e.LEFT:
this.showPrevMonth();
e.stopEvent();
break;
case e.RIGHT:
this.showNextMonth();
e.stopEvent();
break;
case e.DOWN:
this.showPrevYear();
e.stopEvent();
break;
case e.UP:
this.showNextYear();
e.stopEvent();
break;
}
},

corey.gilmore

12-15-2006, 01:22 PM

Here's a more refined and less static example for the Date Picker. A functioning example is at http://crepitus.com/misc/yui/datepicker.html

I guess if you wanted to take this a bit further the next steps would be to add custom events to the Date Picker for onSelect to avoid having to work around the scoping hack DateObj.show(), and add custom events to this to make it easier to use with other types of elements like select boxes.

<DOCTYPE>
<html>
<head>
<link>
<script></script>
<script></script>

<script>
YAHOO.namespace("example");

/* example */
var DatePickerObj = function(opts) {
this.textfield = null;
this.datepicker = null; // YAHOO.ext.DatePicker object
this.calID = YAHOO.util.Dom.generateId(0, 'dpobj-dp-');
this.showDatePicker = null;
this.config = {
textfield: null, // id/HTML Element
showPickerOnFocus: false, // show the picker when the textfield is focused
outputDateFmt: 'm/d/Y',
showPicker: null,
twoDigitYearCutoff: 1980 // null to ignore, otherwise dates before this have 100 years added to them (1904 becomes 2004).
};

// initialize our config
if( typeof opts != 'undefined' ) {
for( var c in this.config) {
if( typeof opts[c] != "undefined" ) {
this.config[c] = opts[c];
}
}
}

}
DatePickerObj.prototype.init = function() {
if( this.config.showPicker ) {
this.showDatePicker = getEl(this.config.showPicker);
// add our click handler to show the link
this.showDatePicker.on('click', this.show, this, true);
}
if( this.config.textfield ) {
this.textfield = getEl(this.config.textfield);
if( this.config.showPickerOnFocus ) {
this.textfield.set({autocomplete:'off'}); // work around firefox errors
this.textfield.on('focus', this.show, this, true);
}
}
this.datepicker = new YAHOO.ext.DatePicker(this.calID);

}

DatePickerObj.prototype.show = function() {
var selectedDate = new Date();
var _this = this; // scope our callback appropriately
var r = { left:0, bottom:0 };

if( this.textfield && this.config.showPickerOnFocus ) {
r = this.textfield.getRegion();
} else if( this.showDatePicker ) {
r = this.showDatePicker.getRegion();
}

if( this.textfield && this.textfield.dom.value != '' ) {
selectedDate = Date.parse(this.textfield.dom.value);
if( isNaN(selectedDate) ) {
selectedDate = new Date();
} else {
selectedDate = new Date(selectedDate);
if( this.config.twoDigitYearCutoff && selectedDate.getFullYear() <= this.config.twoDigitYearCutoff ) {
selectedDate.setFullYear(selectedDate.getFullYear()+100);
}
}
}

this.datepicker.show(r.left, r.bottom, selectedDate, function(selDate) { _this.dateSelectionHandler(selDate); } );
}
// override this to deal with other types of elements like select boxes
DatePickerObj.prototype.dateSelectionHandler = function(selDate) {
if( this.textfield ) {
this.textfield.dom.value = selDate.dateFormat(this.config.outputDateFmt);
}
}
/* end */

dateExampleInit = function() {
YAHOO.example.datepicker = new DatePickerObj({
textfield:'dateTarget',
showPicker:'showCal',
showPickerOnFocus:true
});
YAHOO.example.datepicker.init();

}

YAHOO.ext.EventManager.onDocumentReady(dateExampleInit);

</script>

</head>
<body>
<input>
show date picker (javascript:void(null);)

</body>

</html>

pomata

12-17-2006, 05:49 PM

Hi,

just a small prob, I´ve changed it to:
outputDateFmt: 'd/m/Y',

now when a date is already inserted, it is not recognised by the picker....

where should I set picker to get the date as european?

ta

pomata

corey.gilmore

12-17-2006, 06:08 PM

just a small prob, I´ve changed it to:
outputDateFmt: 'd/m/Y',

now when a date is already inserted, it is not recognised by the picker....

where should I set picker to get the date as european?

It's an issue with Date.parse(), one fix would be to do what is done in YUI and statically define where the pieces of a date are. It's tricky because with ##/##/YYYY Date.parse() has no way of knowing if you entered MM/DD/YYYY or DD/MM/YYYY. 11/12/2006 - November 12th or December 11th? If you're sure that people will ONLY enter dates in DD/MM/YYYY format you could always replace selectedDate = Date.parse(this.textfield.dom.value); with a regexp to split the date like \d{1,2}.\d(1,2}.\d{2,4} and set the date manually using Date.setYear/Day/Month and then continue with the parsing.

pomata

12-17-2006, 08:01 PM

Many thanks,

I don´t want to abuse of your patience, do you know how I can quickly disable backspace in IE7 that causes iframe to navigate away?

Thanks again...

regards

Pomata

corey.gilmore

12-18-2006, 08:31 AM

Many thanks,

I don´t want to abuse of your patience, do you know how I can quickly disable backspace in IE7 that causes iframe to navigate away?

Thanks again...

regards

Pomata
You can add a keylistener to the iframe or document (experiment) and bind it to 8, the key for backspace (on a US keyboard).

pomata

12-21-2006, 09:22 AM

just a small prob, I´ve changed it to:
outputDateFmt: 'd/m/Y',

now when a date is already inserted, it is not recognised by the picker....

where should I set picker to get the date as european?

It's an issue with Date.parse(), one fix would be to do what is done in YUI and statically define where the pieces of a date are. It's tricky because with ##/##/YYYY Date.parse() has no way of knowing if you entered MM/DD/YYYY or DD/MM/YYYY. 11/12/2006 - November 12th or December 11th? If you're sure that people will ONLY enter dates in DD/MM/YYYY format you could always replace selectedDate = Date.parse(this.textfield.dom.value); with a regexp to split the date like \d{1,2}.\d(1,2}.\d{2,4} and set the date manually using Date.setYear/Day/Month and then continue with the parsing.

BTW, works by replacing

selectedDate = Date.parse(this.textfield.dom.value);

to

selectedDate = Date.parseDate(this.textfield.dom.value,this.config.outputDateFmt);

Thanks for your help

skitsanos

01-02-2007, 02:32 PM

hi there, i've tryed this sample with yui-ext 0.40, no luck. when i used includable from http://crepitus.com/misc/yui/yui-ext-build/yui-ext.js - works fine (as i can see there is 0.33 RC2)

would be grerat if anyone can give 0.40 build fixed sample.

corey.gilmore

01-03-2007, 03:41 PM

hi there, i've tryed this sample with yui-ext 0.40, no luck. when i used includable from http://crepitus.com/misc/yui/yui-ext-build/yui-ext.js - works fine (as i can see there is 0.33 RC2)

would be grerat if anyone can give 0.40 build fixed sample.

It works fine with yui-ext 0.40, although the CSS seems to have changed - make sure you're using the css from the SVN repository.

http://crepitus.com/misc/yui40/datepicker.html

I modified it a bit to suit my needs, and you can now subscribe to custom events, currently only onSelect. This lets you do things like this:

dateExampleInit = function() {
YAHOO.example.datepicker = new CalObj({
textfield:'dateTarget',
showPicker:'showCal',
showPickerOnFocus:true
});
YAHOO.example.datepicker.init();
YAHOO.example.datepicker.onSelectEvent.subscribe(calendarRedirect);
}

function calendarRedirect() {
var selDate = this.getSelectedDate();
url="http://site.com/page?date=" + selDate.dateFormat('m/d/Y');
location.href=url;
}

Up until now this was really written specifically for my needs, any further work should probably be done to extend the DatePicker widget itself.

skitsanos

01-03-2007, 03:57 PM

ok. i will give it a try. for the moment i had to use generic yui calendar control because i didnt managed back that time to check why yours wasnt rendered properly with ui-ext v.0.40... i guess i have to pay more attention to css issues...

wrhwang

10-26-2007, 01:28 AM

Hello,

I am new to the extjs and yui development. I installed ext-1.1.1 under my apache/htdoc and tried to use your sample code for date picker below. I am getting error message about YAHOO.ext.EventManager undefined or null (and YAHOO undefined or null if I include the EventManager.js into my html file).

I figure maybe I did not have enough YAHOO YUI components installed so I downloaded yui_2.3.1 and yui_ext.0.33 but I have no clue how to incorporate these new files into my current extjs structure. Or maybe I do not need these files and just something was not set up correctly in my environemnt? Can someone help me with this ?

thanks

wrh

Here's a more refined and less static example for the Date Picker. A functioning example is at http://crepitus.com/misc/yui/datepicker.html

I guess if you wanted to take this a bit further the next steps would be to add custom events to the Date Picker for onSelect to avoid having to work around the scoping hack DateObj.show(), and add custom events to this to make it easier to use with other types of elements like select boxes.

<DOCTYPE>
<html>
<head>
<link>
<script></script>
<script></script>

<script>
YAHOO.namespace("example");

/* example */
var DatePickerObj = function(opts) {
this.textfield = null;
this.datepicker = null; // YAHOO.ext.DatePicker object
this.calID = YAHOO.util.Dom.generateId(0, 'dpobj-dp-');
this.showDatePicker = null;
this.config = {
textfield: null, // id/HTML Element
showPickerOnFocus: false, // show the picker when the textfield is focused
outputDateFmt: 'm/d/Y',
showPicker: null,
twoDigitYearCutoff: 1980 // null to ignore, otherwise dates before this have 100 years added to them (1904 becomes 2004).
};

// initialize our config
if( typeof opts != 'undefined' ) {
for( var c in this.config) {
if( typeof opts[c] != "undefined" ) {
this.config[c] = opts[c];
}
}
}

}
DatePickerObj.prototype.init = function() {
if( this.config.showPicker ) {
this.showDatePicker = getEl(this.config.showPicker);
// add our click handler to show the link
this.showDatePicker.on('click', this.show, this, true);
}
if( this.config.textfield ) {
this.textfield = getEl(this.config.textfield);
if( this.config.showPickerOnFocus ) {
this.textfield.set({autocomplete:'off'}); // work around firefox errors
this.textfield.on('focus', this.show, this, true);
}
}
this.datepicker = new YAHOO.ext.DatePicker(this.calID);

}

DatePickerObj.prototype.show = function() {
var selectedDate = new Date();
var _this = this; // scope our callback appropriately
var r = { left:0, bottom:0 };

if( this.textfield && this.config.showPickerOnFocus ) {
r = this.textfield.getRegion();
} else if( this.showDatePicker ) {
r = this.showDatePicker.getRegion();
}

if( this.textfield && this.textfield.dom.value != '' ) {
selectedDate = Date.parse(this.textfield.dom.value);
if( isNaN(selectedDate) ) {
selectedDate = new Date();
} else {
selectedDate = new Date(selectedDate);
if( this.config.twoDigitYearCutoff && selectedDate.getFullYear() <= this.config.twoDigitYearCutoff ) {
selectedDate.setFullYear(selectedDate.getFullYear()+100);
}
}
}

this.datepicker.show(r.left, r.bottom, selectedDate, function(selDate) { _this.dateSelectionHandler(selDate); } );
}
// override this to deal with other types of elements like select boxes
DatePickerObj.prototype.dateSelectionHandler = function(selDate) {
if( this.textfield ) {
this.textfield.dom.value = selDate.dateFormat(this.config.outputDateFmt);
}
}
/* end */

dateExampleInit = function() {
YAHOO.example.datepicker = new DatePickerObj({
textfield:'dateTarget',
showPicker:'showCal',
showPickerOnFocus:true
});
YAHOO.example.datepicker.init();

}

YAHOO.ext.EventManager.onDocumentReady(dateExampleInit);

</script>

</head>
<body>
<input>
show date picker (http://javascript<b></b>:void(null);)

</body>

</html>

DragonFist

10-26-2007, 12:36 PM

You probably either have not included the needed Ext javascripts on your page or have the order of them wrong.

Read the "INCLUDE_ORDER.txt" file in the main Ext directory. It will tell you what files to include and the order they need to be in.

Best,

Shawn

TommyMaintz

10-26-2007, 01:24 PM

Uuuh... You are working with an example that is written for yui-ext 0.33. Thats a version made over a year ago. Datepickers are now part of Ext so you wont need this code. We are currently at Ext 2.0 beta1.

You also won't need YUI anymore cause Ext has its own base library now. Please read the introduction to Ext guide in the Community Manual (Learn section in the upper menu of this site)

mistress_shiira

11-15-2007, 11:14 PM

Here's a more refined and less static example for the Date Picker. A functioning example is at http://crepitus.com/misc/yui/datepicker.html

I guess if you wanted to take this a bit further the next steps would be to add custom events to the Date Picker for onSelect to avoid having to work around the scoping hack DateObj.show(), and add custom events to this to make it easier to use with other types of elements like select boxes.

<DOCTYPE>
<html>
<head>
<link>
<script></script>
<script></script>

<script>
YAHOO.namespace("example");

/* example */
var DatePickerObj = function(opts) {
this.textfield = null;
this.datepicker = null; // YAHOO.ext.DatePicker object
this.calID = YAHOO.util.Dom.generateId(0, 'dpobj-dp-');
this.showDatePicker = null;
this.config = {
textfield: null, // id/HTML Element
showPickerOnFocus: false, // show the picker when the textfield is focused
outputDateFmt: 'm/d/Y',
showPicker: null,
twoDigitYearCutoff: 1980 // null to ignore, otherwise dates before this have 100 years added to them (1904 becomes 2004).
};

// initialize our config
if( typeof opts != 'undefined' ) {
for( var c in this.config) {
if( typeof opts[c] != "undefined" ) {
this.config[c] = opts[c];
}
}
}

}
DatePickerObj.prototype.init = function() {
if( this.config.showPicker ) {
this.showDatePicker = getEl(this.config.showPicker);
// add our click handler to show the link
this.showDatePicker.on('click', this.show, this, true);
}
if( this.config.textfield ) {
this.textfield = getEl(this.config.textfield);
if( this.config.showPickerOnFocus ) {
this.textfield.set({autocomplete:'off'}); // work around firefox errors
this.textfield.on('focus', this.show, this, true);
}
}
this.datepicker = new YAHOO.ext.DatePicker(this.calID);

}

DatePickerObj.prototype.show = function() {
var selectedDate = new Date();
var _this = this; // scope our callback appropriately
var r = { left:0, bottom:0 };

if( this.textfield && this.config.showPickerOnFocus ) {
r = this.textfield.getRegion();
} else if( this.showDatePicker ) {
r = this.showDatePicker.getRegion();
}

if( this.textfield && this.textfield.dom.value != '' ) {
selectedDate = Date.parse(this.textfield.dom.value);
if( isNaN(selectedDate) ) {
selectedDate = new Date();
} else {
selectedDate = new Date(selectedDate);
if( this.config.twoDigitYearCutoff && selectedDate.getFullYear() <= this.config.twoDigitYearCutoff ) {
selectedDate.setFullYear(selectedDate.getFullYear()+100);
}
}
}

this.datepicker.show(r.left, r.bottom, selectedDate, function(selDate) { _this.dateSelectionHandler(selDate); } );
}
// override this to deal with other types of elements like select boxes
DatePickerObj.prototype.dateSelectionHandler = function(selDate) {
if( this.textfield ) {
this.textfield.dom.value = selDate.dateFormat(this.config.outputDateFmt);
}
}
/* end */

dateExampleInit = function() {
YAHOO.example.datepicker = new DatePickerObj({
textfield:'dateTarget',
showPicker:'showCal',
showPickerOnFocus:true
});
YAHOO.example.datepicker.init();

}

YAHOO.ext.EventManager.onDocumentReady(dateExampleInit);

</script>

</head>
<body>
<input>
show date picker (javascript:void(null);)

</body>

</html>

what is YAHOO?I dont know how to make this work in my local drive..

JeffHowden

11-16-2007, 01:31 AM

You don't need to use the quoted example as date pickers are built into Ext now.

http://extjs.com/deploy/dev/docs/?class=Ext.DatePicker