Ext.ux.DatePickerPlus: MultiMonth, MultiSelection, WeekNumbers, Custom CSS Days,...

[wehtam]

Hello,
Very good work for DatePickerPlus.
I just 2 questions:
- How to pre-select the dates, as if they were clicked ?
- When I am on my form with DatePickerPlus and I click on the dates. If I come back to this page, these same dates are yet clicked. How to display DatePickerPlus without having clicked dates?

Sorry for my very bad english
Thanks

[wm003]

- How to pre-select the dates, as if they were clicked ?

Easy, just set them by "selectedDates"

myDatePickerPlus.selectedDates = [
new Date(2008,0,1),
new Date(2008,3,5),
new Date(2008,6,8)
] 

or add them

myDatePickerPlus.selectedDates.push(new Date(2008,8,9)); 

But this way visual changes will only happen after you open datepickerplus again...mmh I'm going to add methods for that... next beta coming up ( i need to fix the bug, Richie1985 reported above, first)

- When I am on my form with DatePickerPlus and I click on the dates. If I come back to this page, these same dates are yet clicked. How to display DatePickerPlus without having clicked dates?

Same way: just delete the array

myDatePickerPlus.selectedDates = []; 

i think i will add another config option that does that automatically for you before showing datepickerplus again or at runtime (as stated above selectedDates-array does not immedialty change the view....gimme some minutes to make this more comfortable.

[wehtam]

Thanks,
it's work for my second question, but for the pre-select date nothing
My code :

<script language="javascript">

 	
	 Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'under';
	  var simple = new Ext.FormPanel({
        labelWidth: 20, // label settings here cascade unless overridden
        url:'save-form.php',
        frame:true,
        title: 'Gestion des dates pour : <?=addslashes($ol["TitreOffre"])?>',
        bodyStyle:'padding:5px 5px 0',
        width: 250,
		fileUpload : true,
        defaults: {width: 250},
        defaultType: 'textfield',
        items: [datepickerplusmenu =  new Ext.ux.DatePickerPlus  ({
		usePickerPlus	: true, //this will fire the use of datepickerplus instead of datepicker
		noOfMonth : 1,
		fieldLabel : 'ddddd',
		noOfMonthPerRow : 1,
		multiSelection: true,
		multiSelectByCTRL:false,
		markNationalHolidays: false,
		selectMonthText : 'Cliquez ici pour inverser la s&eacute;lection',
		weekName : 'S',
		selectWeekText : 'Cliquez ici pour s&eacute;lectionner tous les jours de la semaine',
		undoText:'Annuler',
		renderTodayButton :false,
		renderOkUndoButtons:true,
		disablePartialUnselect:false,
		listeners:{'undo':function(){ page('listeOffresSpeciales.php'); }} ,
	
		handler : function(dp, date){
			var allStringDates=[];
//take care of multiselection on/off (on will return an array of dateobjects, false will return one single dateobject)
			if (Ext.isDate(date)) {
				allStringDates.push(date.format('Y-m-d'));
			}
			else {
				Ext.each(date,function(c){
					allStringDates.push(c.format('Y-m-d'));
				},this);
			}
			simple.getForm().submit({url:'save-dateoffresspeciales.php' , params:{'dates':allStringDates.join('|')},waitMsg:'Enregistrement des informations ...',
						 success:function(form, action,response){ 
							 page('listeOffresSpeciales.php?id_rub=<?=$o["IdCategorieOffreSpeciale"]?>');
						  }
			
                 		   });
					
					
		//	Ext.MessageBox.alert('Date(s) Selected', 'You have chosen the following day(s):<br>'+allStringDates.join('<br>'));
		}
				
	})
        ]
    });
	datepickerplusmenu.selectedDates = []; 
	datepickerplusmenu.selectedDates.push(new Date(2008,4,7));
    simple.render('div_form');
	
 


 </script>

[galdaka]

Wooooooooooooo

Thanks for share!!!

[wm003]

Thanks,
it's work for my second question, but for the pre-select date nothing
My code :

I uploaded another Version.

try

 myDatepickerPlus.clearSelectedDates(); 

and/or

 myDatepickerPlus.setSelectedDates(new Date(2008,8,9)); //for single date
myDatepickerPlus.setSelectedDates([
  new Date(2008,8,9),
  new Date(2008,3,1),
  new Date(2008,0,2),
  new Date(2008,0,10)
]); // for many dates at once 

[wm003]

mhh but the select event dosnt work

That was a bug

You can/should now _always_ use the "afterdateclick" event.
Get the latest beta 6 and have fun

[sanjshah]

I'm using beta 6 with the afterdateclick event as:

listeners:{'afterdateclick':function(){var mydate = this.value; Ext.MessageBox.alert(mydate); }} 

however the value it picks up is previous one not the new selected one - is this the way it should work? how do I get the new selected date

Thanks

Sanj

[wehtam]

Hello,
I'm testing the beta 6 but with : setSelectedDates , I have no date selected.


My code :

<script language="javascript">

 	
	 Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'under';
	  var simple = new Ext.FormPanel({
        labelWidth: 20, 
        url:'save-form.php',
        frame:true,
        title: 'Gestion des dates pour : <?=addslashes($ol["TitreOffre"])?>',
        bodyStyle:'padding:5px 5px 0',
        width: 250,
		fileUpload : true,
        defaults: {width: 250},
        defaultType: 'textfield',
        items: [datepickerplusmenu =  new Ext.ux.DatePickerPlus  ({
		usePickerPlus	: true, //this will fire the use of datepickerplus instead of datepicker
		noOfMonth : 1,
		fieldLabel : 'ddddd',
		noOfMonthPerRow : 1,
		multiSelection: true,
		multiSelectByCTRL:false,
		markNationalHolidays: false,
		selectMonthText : 'Cliquez ici pour inverser la s&eacute;lection',
		weekName : 'S',
		selectWeekText : 'Cliquez ici pour s&eacute;lectionner tous les jours de la semaine',
		undoText:'Annuler',
		renderTodayButton :false,
		//weekendText: 'This day seems to be a weekend...:)',
		renderOkUndoButtons:true,
		disablePartialUnselect:false,
		listeners:{'undo':function(){ page('listeOffresSpeciales.php?id_rub=<?=$o["IdCategorieOffreSpeciale"]?>'); }} ,
		handler : function(dp, date){
			var allStringDates=[];
			if (Ext.isDate(date)) {
				allStringDates.push(date.format('Y-m-d'));
			}
			else {
				Ext.each(date,function(c){
					allStringDates.push(c.format('Y-m-d'));
				},this);
			}
			simple.getForm().submit({url:'save-dateoffresspeciales.php?id=<?=$_GET["id"]?>' , params:{'dates':allStringDates.join('|')},waitMsg:'Enregistrement des informations ...',
						 success:function(form, action,response){ 
							 page('listeOffresSpeciales.php?id_rub=<?=$o["IdCategorieOffreSpeciale"]?>');
						  }
			
                 		   });
			}
				
	})
        ]
    });
	//datepickerplusmenu.clearSelectedDates(); 
	
    simple.render('div_form');
	
 datepickerplusmenu.setSelectedDates(new Date(2008,4,10)); 


 </script>

thanks

[wm003]

Hello,
I'm testing the beta 6 but with : setSelectedDates , I have no date selected.

Sorry, there still was some bug left in the beta 6. Try current beta 7, please

[wm003]

I'm using beta 6 with the afterdateclick event as:

listeners:{'afterdateclick':function(){var mydate = this.value; Ext.MessageBox.alert(mydate); }} 

however the value it picks up is previous one not the new selected one - is this the way it should work? how do I get the new selected date

Thanks

Sanj

The current selected Date will be passed to the event-function. try this (with latest Beta 7):

listeners:{
    'afterdateclick':function(picker,mydate,wasSelected){
        Ext.MessageBox.alert('afterdateclick',mydate+(!wasSelected?' was unselected':' was selected'));
    }
}