PDA

View Full Version : how can i hide the month navigation icons in datemenu



sencha99999
16 Feb 2012, 2:24 AM
hi can you please suggest how can we hide the month navigation icons in datemenu calendar.

friend
16 Feb 2012, 4:55 AM
If manually constructing an Ext.picker.Date, you can call method hideMonthPicker() on the picker instance.

If using the default picker supplied by an Ext.form.field.Date object, I had to resort to this code in the afterrender event of the Date field:



afterrender: function(component, eOpts) {
var picker = component.getPicker();
// picker.monthBtn.hide(); // you can optionally hide the Month button completely.
picker.monthBtn.events.click = null // prevents month button click.
picker.nextEl.hide();
picker.prevEl.hide();
}


There's probably an easier way, but the following did not work for me, which is why I had to resort to the code above:



myDateField.getPicker().hideMonthPicker(true);

sencha99999
17 Feb 2012, 12:48 AM
Thanks, i got it working to hide the month buttons on the calendar with the provided code, can you please help me, how to hide the today button in the datepicker and also how to set the calendar to the month i want to.

friend
17 Feb 2012, 5:04 AM
This will hide the 'today' button:


picker.todayBtn.hide();


And this will set the current date of the picker:



picker.setValue(<someDateObject>);

sencha99999
17 Feb 2012, 8:39 AM
afterrender: function(component, eOpts) {
var picker=Ext.getCmp('picker1');
//picker.monthBtn.events.click = null; // prevents month button click.
picker.nextEl.hide();
picker.prevEl.hide();picker.todayBtn.hide();
//picker.setValue(new Date().setDate(2012,3,2));
//picker.setValue(new Date(2012,1,1));}

Thanks for the response, am able to hide the today button as suggested but with the above code i want to acheive following things

1, want to nullify the action to month btn click(still it is firing the event)
2. want to set the date to first feb 2012, which am not able to set with above code with setValue method, (calendar is not rendering if i uncomment the call to setValue)


suggest me the same to acheive

sencha99999
22 Feb 2012, 2:53 AM
Hi,

Can you one suggest how to remove the default selection of the current date at the initial render of the Datepicker(Calendar) on the screen at runtime, currently it is setting to the default date or any other date i have given, but i want to totally unselect any of the dates in that month.

friend
22 Feb 2012, 12:49 PM
After poking through the source code for Ext.picker.Date, it appears that it's heavily geared towards initially showing a date, when the picker is expanded, so overriding the class might be a bit of a pain.

Having said that, note that you can call picker.cells.elements[n], where each element represents a 'block' in the picker's UI. All you have to do is remove CSS class 'x-datepicker-today' from the appropriate cell's element and no day will appear to be selected.