PDA

View Full Version : DatePicker not automatically closing



amrutha
26 May 2010, 1:59 AM
Has datepicker got an option to automatically hide itself when clicked elsewhere except on the pop-up calendar? Badly need help!

wm003
26 May 2010, 3:00 AM
Well, that's the default behaviour when using a DateField
A DatePicker itself is a static calendar widget with no option for that. If you need to hide it either put it into a window and/or create an eventlistener to the document body which will hide the Picker/close the window

amrutha
26 May 2010, 3:13 AM
<script type="text/javascript">


Ext.onReady(function() {

var selectHandler = function(myDP, date) {




var

field = document.getElementById('<%=dateField%>');


field.value = date.format('m/d/Y');

myDP.hide();

field.focus();
};







var myDP = new Ext.DatePicker({startDay: 1,listeners: {'select':selectHandler}});

myDP.render('divCalId');

myDP.hide();
var clickHandler = function() {
myDP.show();
};
var blurHandler= function() {
myDP.hide();
};







Ext.EventManager.on(



'ImageClicker', 'click', clickHandler);


Ext.EventManager.on('ImageClicker', 'blur', blurHandler);

});




</script>



Well, this is the code that I'm using. The blur event which I tried to hide is not working. Any idea what event can be used to hide the calendar?

amrutha
26 May 2010, 9:01 PM
If date picker calendar can be put inside a window, we can add a close button inside the window. so that we can allow a 'calendar close' option. Anybody got an idea how to get it to work ? Pls give the code excerpts if you could think in line with this.

wm003
26 May 2010, 9:49 PM
var datePickerWin = new Ext.Window({
title :"DatePicker Window",
closeAction: 'hide',
layout : 'fit',
hideBorders : true,
items: new Ext.DatePicker({
value: new Date(2010, 4, 18)
})
});
datePickerWin.show();

amrutha
27 May 2010, 3:31 AM
thanks a ton dude. it worked! (with my datepicker inside the window with a close button)