PDA

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



Pages : [1] 2

wm003
5 Apr 2008, 5:58 AM
The "go advanced" Button within sencha forum software does not work anymore when editing a post afterwards, so i am currently not able to upload the current version in this very first post of this thread. get the current version from the demopage instead

After some days of work and testing i finally managed to put the most popular Extensions for Datepicker together to a powerful calendar widget and added the most requested features (such as custom css days) and like to share the result :D:

- Supports Ext 3.3.1/3.2.1/2.3/2.2.1 -


You will always find the current Version (1.4.3) here in the first post and on the

Demopage & Current Download
http://www.lubber.de/extjs/datepickerplus

Description

Ext.ux.DatePickerPlus works in all modes: Standalone, as a DateMenu and as a DateField (in this case its the new Ext.ux.form.DateFieldPlus Widget)
Main Features:
-MultiMonth
-Multiselection with CTRL and SHIFT-Key as usual behaviour
-Weekend, Holidays and custom CSS days
-Weeknumber display
-Localization Support (example Files included)
-Quicktip support
-Undo Function of date selection

New config Items
[since 1.4.2]
"showPrevNextTrigger" (DateFieldPlus only and not with multiselection)
To display 2 buttons next to the DateFieldPlus to select next/previous day(s)

"prevNextTriggerType" (DateFieldPlus only not with multiselection)
values:
"m": means +/- month (valid End of month will be considered)
any numeric value: means amount of +/- days

[since 1.4 beta]
"prevNextDaysView" String/Boolean (default "mark")
values:
"mark" : selected days will be marked in prev/next months also
"nomark" will not be marked and are not selectable
false: will hide them, thus are not selectable too
Note: When using anything other than "mark", week or monthclick will not select days outside the current month!

[since 1.2]
"styleDisabledDates": Boolean (default false)
To be able to set custom style dates (eventdates/weekends..) on disabled dates also

"eventDatesSelectable": Boolean (default true)
To disable event-dates selection if desired (even if the dates are not disabled at all)

"disableSingleDateSelection": Boolean (default false)
To force user to use week- or monthselection only

"stayInAllowedRange": Boolean (default true)
When setting minDate/maxDate, this will prevent to change months outside the allowed daterange (suggested by descheret)

"summarizeHeader": Boolean (default false)
To add an optional global header when using multimonth display containing the month range (e.g. january 2008-october 2008)

[U][since 1.1 Final]
"allowMouseWheel": Boolean (default true)
Self explaining...

[since 1.1 RC4]
"multiSelectionDelimiter": String (default ',')
For Datefieldplus and Multiselection only

"renderPrevNextButtons": Boolean (default true)
If you want the user not to be able to change the month or force him to use the monthpicker, set this to false

"renderPrevNextYearButtons": Boolean (default false)
Display 2 small double-arrow buttons for changing next/previous year

"nextYearText": String (default "Next Year (Control+Up)")
Will be displayed as tooltip on NextYear Button (updated locale!)

"prevYearText": String (default "Previous Year (Control+Down)")
Will be displayed as tooltip on PrevYear Button (updated locale!)

"showActiveDate": Boolean (default false)
Will display the active Date to use keynavigation

"shiftSpaceSelect": Boolean (default true)
if set to true (default) and showactivedate is set to true you can select dates on keynavigation by using shift+Space (because the space-key alone will select the today-date)
if this is set to false , this behaviour reverses (shift+space selects today, space alone select the date under the shown activedate from keynavigation)
Remember Keynavigation works only when the datepicker has got focus which isnt always the case in some browsers

"disableMonthPicker": Boolean (default false)
Self explaining...

"disabledLetter": String/Boolean (default false)
Display e.g. a "X" instead of the daynumber if a date is disabled.

[since 1.0 RC3]
"strictRangeSelect" Boolean (default false)
Set this to true does only allow multiselection in a range without the possibility to create gaps. Selection by CTRL is still possible, but DatepickerPLus checks, if the selected Day(s) will append the existing selection or would produce a gap

"displayMask" Number (default 3)
As huge multimonth calendars can take some updating time this will display a mask when the noOfMonth property is higher than the given value in displayMask.
Set to false to never display the mask

"displayMaskText" String (default "Please wait...")
The Message to be displayed when a mask is shown

"defaultEventDatesText" String (default '')
Used if no text-object is given in eventdates

"defaultEventDatesCls" String (default 'x-datepickerplus-eventdates')
Used if no cls-object is given in eventdates

[since 0.9 beta 9]
"allowedDates" Array{Dateobjects}/false (default false)
If this is set with an Array of Dates, only these Dates are available for Selection in the DatepickerPlus, all other dates are automatically disabled

"allowedDatesText" String (default '')
Text to display on the disabled Days as quicktip

[since 0.9 beta 2]
"disablePartialUnselect" : Boolean/String (default true) (suggested by DVSDevise)
When multiselecting whole months or weeks, already selected days within this week/month will _not_ get unselected anymore. Set this to false, if you want them to get unselected.
Note: When the _whole set_ of the month/week are already selected, they get _all_ unselected anyway.

"renderOkUndoButtons" : Boolean (default true) (suggested by jsakalos)
If set to false, the OK- and Undo-Buttons will not be rendered on Multiselection Calendars
This way any selected Date will be immediatly available in the "selectedDates" Array. If used together with DateMenu or DateFieldPlus you need to click outside the Calendar to make it disappear or press Return (if calendar got focus...)
Works only if multiSelection is set to true

"renderTodayButton" : Boolean (default true) (suggested by jsakalos)
Whether the Today-Button should be rendered

[since 0.9 beta]
"noOfMonth" : Number (default 1)
how many months should be displayed

"noOfMonthPerRow" :Number (default 3)

"fillupRows" : Boolean (default true)
to automatically increase month-amount to fit display-matrix of rows/columns

"showWeekNumber" : Boolean(default true)
to support display of weekNumbers

"selectWeekText" : String (default "Click to select all days of this week")
Will be displayed when hovering over Weeknumber

"selectMonthText" : String (default "Click to select all weeks of this month")
Will be displayed when hovering over WeeknumberHeader

"weekName" : String (default "Wk.")
Text, that appears on the Weeknumber Header

"multiSelection" : Boolean (default false to act like original datepicker)
Whether Multiselection should be possible or not

"multiSelectByCTRL" Boolean (default true)
If set to false, its possible to multiselect the "easy" way (without CTRL) also

"selectedDates" : Array
Holds an array of dateobjects which have been selected (after clicking the OK-Button, or immediatly, if renderOkUndoButtons is set to false)

"preSelectedDates" : Array
Holds an array of date-times (getTime()) which have been selected at runtime (before clicking the OK-Button)

"nationalHolidays" : function(year) (default US Holidays)
Called every year-change to generate holidays with custom CSS

"nationalHolidaysCls" : String (default to 'x-datepickerplus-nationalholidays')
CSS Class to be applied to holidays

"markNationalHolidays" : Boolean (default true)
Whether national Holidays should be marked with different CSS

"markWeekends" : Boolean (default true)
Whether weekends should be marked with different CSS
Custom CSS Days can also be used for cycling weekevents like "every friday"

"weekendDays" : Array (default [6,0] for Saturday and Sunday)
Array of weekdays which are supposed to be weekends

"weekendText" : String (default '')
Text to be display as Quicktips when hovering over weekends

"useQuickTips" : Boolean (default true)
To be able to show cellinfos in nice quicktips instead of cell-titles
Occurs for disabled/eventdates/weekends/holidays days

"pageKeyWarp" : Number(default 1)
Extend pageup/pagedown keynav for custom amount of months forward/backward

"maxSelectionDays" : Boolean (default false for unlimited selection)
To limit the selection of single days to a specific amount

"maxSelectionDaysTitle" : String (default 'Datepicker')
Window-title of the alert-msg which is disdplayed when trying to select more than the allowed amount of days

"maxSelectionDaysText" : String (default 'You can only select a maximum amount of %0 days')
Window-Contentext of the alert-msg which is disdplayed when trying to select more than the allowed amount of days (When translating this use %0 as placeholder for the amount of days)


"undoText" : String (default 'Undo')
Buttontext for the Undo-option


"eventdates" : function(year)
Returns days which are marked by a specific css class and not as selected

"eventDatesRE" : RegExp (default null)
Regular Expression to select custom CSS Days (works just like disabledDaysRE)

"eventDatesRECls" : String (default '')
CSS Class to be used if days are found by eventDatesRE

"eventDatesREText" : String (default '')
Quicktip Text to be displayed if days are found by eventDatesRE

"lastSelectedDate" : Number
Contains the last selected Date.. (getTime() value)

"tooltip" : String/Object (for DateFieldPlus only)
Works exactly like in Buttons-Widget (works on Trigger Button, not field itself to keep invalidText tooltips intact!)

"tooltipType" : String (for DateFieldPlus only)
Works exactly like in Buttons-Widget

"submitFormat": String (for DateFieldPlus only) (default 'Y-m-d')

"submitFormatAddon" String (for DateFieldPlus only) (default '-format')
Will be used for the hidden submitFormat Field as a suffix if id and name are equal

"usePickerPlus" : Boolean (for datemenus only)

New Events
[since 1.4.2]
"onPrevTriggerRelease" (DateFieldPlus only not with multiselection)
Fires when the PrevTrigger MouseUp Event occurs (if omitted the usual select-handler will be triggered)

"onNextTriggerRelease" (DateFieldPlus only not with multiselection)
Fires when the PrevTrigger MouseUp Event occurs (if omitted the usual select-handler will be triggered)


[since 1.4 beta]
"beforemonthclick"
Called with pickerobject, monthnumber (0=january,1=february...) and selectedState (if true, the whole month was selected, if false, it was unselected)
Fires only when multiSelection=true and showWeekNumbers=true. Return false to cancel selection.

"beforeweekclick"
Called with pickerobject, date (firstdate of clicked week) and selectedState (if true, the whole week was selected, if false, it was unselected)
Fires only when multiSelection=true and showWeekNumbers=true. Return false to cancel selection.

"beforedateclick"
Called with pickerobject, current clicked date andselectedState (if true, the day was selected, if false, it was unselected)
Fires before a date is clicked. Return false to cancel selection.

[since 1.1 Final]
"beforemousewheel"
Fires before the month will change on mousewheel trigger

"beforemaxdays"
Fires before the default ext alertbox will appear when the amount of maxSelectionDays has been reached (return false to cancel the msgbox appearance)

[since 1.1 RC4]
"beforeyearchange"
Called with pickerobject, oldStartYear, newStartYear
Fires everytime before the year of the first month changes (by monthpicker or prev/next(year)-month buttons

"afteryearchange"
Called with pickerobject, oldStartYear, newStartYear
Fires everytime after the year of the first month changes (by monthpicker or prev/next(year)-month buttons

[since 1.0 RC3]
"beforemonthchange"
Called with pickerobject, oldStartMonth, newStartMonth
Fires everytime before the first month changes (by monthpicker or prev/next-month buttons

"aftermonthchange"
Called with pickerobject, oldStartMonth, newStartMonth
Fires everytime after the first month changes (by monthpicker or prev/next-month buttons

[since 0.9 beta]
"aftermonthclick"
Called with pickerobject, monthnumber (0=january,1=february...) and [since 0.9 beta 7]selectedState (if true, the whole month was selected, if false, it was unselected)
Fires only when multiSelection=true and showWeekNumbers=true

"afterweekclick"Called with pickerobject, date (firstdate of clicked week) and [since 0.9 beta 7]selectedState (if true, the whole week was selected, if false, it was unselected)
Fires only when multiSelection=true and showWeekNumbers=true

"afterdateclick"Called with pickerobject, current clicked date and [since 0.9 beta 7] selectedState (if true, the day was selected, if false, it was unselected)
Fires everytime a date is clicked

"undo"
Fires on undo-button-click on multiSelection


New Methods
[since 1.0 RC3]
"setEventDates(Array{DateObjects}/Object{eventDatesObject(date,text,cls)},update(default true))
To automatically transform given arrays/or objects to working functions, if not already specified

[since 0.9 beta 9]
"setAllowedDates(Array{DateObject},update(default true)])"
To set an Array of Dates to be available only at runtime and update the picker visually. If update is set to false, the visual update will not happen.

[since 0.9 beta 6/7]
"clearSelectedDates()"
To delete all selected dates and update the picker visually. If update is set to false, the visual update will not happen.

"setSelectedDates(Array/DateObject,update(default true)])"
To set one or more Dates and update the picker visually. If update is set to false, the visual update will not happen.

[U][since 0.9 beta 5]
"setDateLimits(minDate{DateObject},maxDate{DateObject})"
To change both minDate and maxDate at one at runtime

[since 0.9 beta 4]
"setMinDate({DateObject})"
To change the minDate at runtime and immediatly update the rendered DatepickerPlus. You need to specify a valid DateObject

"setMaxDate({DateObject})"
Same with the maxDate


Compatibility
This Widget has been tested on Firefox2/3.x, IE6/7/8, Chromium 3/4/5, Opera 9/10 and Safari 3.1/4 (Win) You need to use at least ExtJS 2.0.2 or higher


Revision History
v.1.4.3 [2011/03/18]
- BUGFIX: Config wasn't set when used in Editorgridpanel
v.1.4.2 [2011/02/23]
- checked to work with ExtJS 3.3.1
- added config: showPrevNextTrigger (DateFieldPlus only and not with multiselection) to display 2 buttons next to the DateFieldPlus
- added config: prevNextTriggerType (DateFieldPlus only not with multiselection): m means +/- month (valid End of month will be considered), any numeric value means amount of +/- days
- added Event "onPrevTriggerRelease", (DateFieldPlus only not with multiselection) which triggers when the PrevTrigger MouseUp Event occurs (if omitted the usual select-handler will be triggered)
- added Event "onNextTriggerRelease", (DateFieldPlus only not with multiselection) which triggers when the PrevTrigger MouseUp Event occurs (if omitted the usual select-handler will be triggered)
- BUGFIX: When specifying that weeknumbers should not be rendered and showing more than 1 row of months,the widths of daily columns in the 2nd and subsequent rows of months are too small. (reported by josefhaydn)
- BUGFIX: select event was triggered twice on Datefieldplus
- BUGFIX: When using strictRangeSelection all clicked dates outside gaps were still selected even when not displayed (reported by gkarmadi)


2483024831
v.1.4.1 [2010/11/09]
- checked to work with ExtJS 3.3.0
- Forced to update viewport on setValue
- BUGFIX: correctly position picker in datefield with hiddenfield on IE in some cases
v.1.4 [2010/04/30]
- checked to work with ExtJS 3.2.1
- BUGFIX: Datepickers with shown months > 1 had a white glitch obove them (thanks to radubrehar)
- BUGFIX: CSS Fixes for Datemenus and more than 1 row of months when using IE8 in Compatibility Mode
- added romanian locale (thanks to radubrehar)
- added japanese locale (thanks to itheart)
- added polish locale (thanks to maboch)

v.1.4 RC1 [2010/03/04]
- checked to work with ExtJS 3.1.1
- BUGFIX: DateField Events did not work properly (reported by yuewah)
- BUGFIX: beforedestroy throws exception when parent control of datepickerplus gets destroyed (reported by yuewah)
- spanish locale corrected (holiday had a leading zero)

v.1.4 Beta 2 [2009/09/18]
- checked to work with ExtJS 3.0.0
- checked to work with ExtJS 2.3.0
- Adopted config item prevNextDaysView to DateFieldPlus
- Adopted events beforedateclick, beforeweekclick and beforemonthclick to DateFieldPlus
- more code optimization for Ext 3.0 compatibility
- support option "defaultvalue" on datefieldplus
- BUGFIX: setDisabled did not work under Ext 3.0 (reported by radtad)

v.1.4 Beta [2009/07/03]
- checked to work with ExtJS 3.0-RC3
- checked to work with ExtJS 2.2.1
- support of jsondates (e.g. "2008-08-04T12:22:00") in setEventDates, setSelectedDates, setAllowedDates,setMindate and setMaxdate
- some Code optimizations
- corrected holidays in german locale
- added events beforedateclick, beforeweekclick and beforemonthclick
- added dutch locale (thanks to walldorff)
- added french locale (thanks to dubdub)
- added Norwegian bokmål locale (thanks to Alex Brasetvik)
- added spanish locale (thanks to erzsebet)
- added version config
- added config prevNextDaysView ("mark","nomark",false) to disable automatic selection/view of selected days of current months in previous and next month, so only the current months days are selectable (suggested by sirtimbly)
- BUGFIX: select-event on datefieldplus was added again each time the trigger has been clicked
- BUGFIX: Fix for updatehidden in case of multiselection (thanks to Hunyi)
- BUGFIX: do not handle dateselection when disabled-property is set

v.1.3 [2008/08/05]
- Support of ExtJS 2.2
- Adopted new config items from 1.2 to DateFieldPlus also

v.1.2 [2008/08/04]
- support "allowOtherMenus" Config for DateFieldPlus
- datefieldplus can be hidden by clicking the triggerbutton again in cases hiding by clicking outside isn't possible
- added config "styleDisabledDates" to be able to set custom style dates (eventdates/weekends..) on disabled dates also (suggested by descheret)
- added config "eventDatesSelectable" to disble event-dates selection if desired (even if the dates are not disabled at all) (thanks to descheret)
- added config "disableSingleDateSelection" to force user to use week- or monthselection only (suggested by chemist458)
- added config "stayInAllowedRange" when setting minDate/maxDate, this will prevent to change months outside the allowed daterange (suggested by descheret)
- added config "summarizeHeader" to add an optional global header when using multimonth display containing the month range (e.g. january 2008-october 2008)
- added italian locale (thanks to andreabat)
- FIX: setMinDate/MaxDate/DateLimits did not update the viewport properly (reported by sasho)

V1.1 Final [2008/06/12]
- added config "allowMouseWheel" to generally turn on/off Mousewheelsupport (suggested by boraldo)
- added event "beforemousewheel" to be able to temporary disable the mousewheel if desired
- added event "beforemaxdays" to be able to cancel the default MessageBox but do something on your own instead
- Implemented fix for xdatefield code to support applyTo Config (thanks to mystix)
- updated russian local (thanks to WhiteRussian)
- BUGFIX: updating eventclasses (and others) could result in wrong class-definition per cell (reported by aacraig)

V1.1 RC4 [2008/05/20]
- DateFieldPlus now also supports multiselection (thanks to Nohcs777)
- extended xdatefield to support multiselection
- "value" config for datefieldplus now also supports arrays in multiselection mode instead of just one date
- range selection is now also possible for a wider period than only the visible months (suggested by jo2008)
- updated xdatefield code integration to disable/enable the hidden submitfield from datefieldplus also, if the mainformfield gets disabled/enabled
- improved xdatefield code to fill the hiddenField with a given value at config time
- Improved some code-sections (mainly for respecting summertime changings when handling with Date.gettime())
- Corrected eventhandling on Datemenu and DateFieldPlus
- support for minDate and maxDate for Datefieldplus (as an alias for datepickers minValue and maxValue) to be more compatible to usual datepicker/datemenu config options
- added "multiSelectionDelimiter" config (datefieldplus and multiselection only)
- added "renderPrevNextButtons" config (if you want the user not to be able to change the month or force him to use the monthpicker)
- added "renderPrevNextYearButtons" config to display 2 small double-arrow buttons for changing next/previous year
- added "nextYearText" config which will be displayed as tooltip on NextYear Button (updated locale!)
- added "prevYearText" config which will be displayed as tooltip on PrevYear Button (updated locale!)
- added "showActiveDate" will display the active Date to use keynavigation
- added "shiftSpaceSelect" if set to true (default) and showactivedate is set to true you can select dates on keynavigation by using shift+Space (because the space-key alone will select the today-date)
if this is set to false , this behaviour reverses (shift+space selects today, space alone select the date under the shown activedate from keynavigation)
- added "disableMonthPicker" config
- added "disabledLetter" config to display e.g. a "X" instead of the daynumber if a date is disabled. (default false)
- added event "beforeyearchange"
- added event "afteryearchange"
- added russian locale (thanks to WhiteRussian)
- UP/DOWN/LEFT/RIGHT Keynavigation is now only available if showActiveDate is set to true and works much faster
- CTRL+UP/DOWN for year changing is now only available if either disableMonthPicker is false or renderPrevNextYearButtons is true
- CTRL+LEFT/RIGHT for month changing is now only available if either disableMonthPicker is false or renderPrevNextButtons is true
- BUGFIX: setEventDates did not update the viewport (reported by aacraig)
- BUGFIX: Array-Cloning was done in a wrong way (reported by lpfLoveExt)
- BUGFIX: weekselection was wrong when a different startDay was given (reported by WhiteRussian)
- Minor Upgrade Version because of much added features instead of a bugfix-only release

V1.0 RC3 [2008/04/21]
- checked to work with ExtJS 2.1
- added config strictRangeSelect (suggested by sigaref)
- added config displayMask and displayMaskText to support update masking (localization files also updated)
- added config defaultEventDatesText and defaultEventDatesCls. used if no text/cls-object is given in eventdates
- added Events "aftermonthchange" and "beforemonthchange" (fires everytime the first month changes (by monthpicker or prev/next-month buttons)
- added method setEventDates, to automatically transform given arrays/or objects to working functions, if not already specified
- BUGFIX: range selection over specific months was incorrect

V1.0 RC2 [2008/04/10]
- BUGFIX: typo in DateFieldPlus corrected (reported by sigaref)

V1.0 RC1 [2008/04/10]
- BUGFIX: Undo-Function works again
- BUGFIX: Config items allowedDates and allowedDatesText had no effect on DateFieldPlus

V0.9 Beta 9 [2008/04/09]
- Added config items allowedDates and allowedDatesText
- Added method setAllowedDates()

V0.9 Beta 8 [2008/04/09]
- BUGFIX: setSelectedDates still had another Bug.8-|..(thanks to wehtam for reporting!)

V0.9 Beta 7 [2008/04/08]
- added the state of the afterdateclick to examine, if the date was selected or unselected, same with week/month
- added option to cleanSelectedDates to not update the picker (e.g. to immediatly add dates manually by setSelectedDates(that would call update twice)
- added option to setSelectedDates to clean the selectedDates before setting the new once and to not update the picker
- BUGFIX: setSelectedDates did not work properly

V0.9 Beta 6 [2008/04/08]
- Added method clearSelectedDates() (suggested by wehtam)
- Added method setSelectedDates() (suggested by wehtam)
- Changed eventtriggering for afterdateclick. It will now always be fired when a date is clicked . Regardless, whether multiSelection is enabled or not.
- BUGFIX: Given listeners to DateFieldPlus have been ignored (reported by Richie1985)

V0.9 Beta 5 [2008/04/07]
- Added method setDateLimits() to change minDate and maxDate at once at runtime
- BUGFIX: Range selection by using the SHIFT-Key for a range more than one month, did not select some remaining days at the end of the range (reported by Spirit)

V0.9 Beta 4 [2008/04/06]
- Added method setMinDate() to change the minDate at runtime and immediatly update the datepicker
- Added method setMaxDate() to change the maxDate at runtime and immediatly update the datepicker
- BUGFIX: hidden submitformat Field had same name as original field, thus confuses IE with duplicate id/name. if name has not been specified in the config or is same as id datefieldplus will add a suffix to the hiddenfield (default "-format"). this field holds the custom submitFormat value (reported by jerrybrown5)

V0.9 Beta 3 [2008/04/06]
- Added xtype "datefieldplus" (suggested by jerrybrown5)
- BUGFIX: DateFieldPlus accidently had renderTodayButton set to false by default...

V0.9 Beta 2 [2008/04/06]
- BUGFIX: Width on DateMenu and DateFieldPlus was broken in Firefox 3 (tested on latest Beta 5) (reported by ludoo)
- BUGFIX: Some old testpath in generating transparent GIF images was left in the code and has been deleted now (reported by sanjshah)
- Added new config options "disablePartialUnselect","renderOkUndoButtons" and "renderTodayButton" (suggested by jsakalos)

V0.9 Beta [2008/04/05]
Initial Release:
Joined the extensions together nicely and added even more features:
- fixed some bugs/improved the original extensions a bit
- works on Original DateMenu and DateField (Ext.ux.DateFieldPlus) also
- Definable Multimonths (rows,amount,fill..)
- Custom CSS for definable days
- Weeknumber Display
- Weekend CSS Styling
- National Holidays CSS Styling
- Quicktip support
- Function based custom displayed days
- Multiselection support by CTRL-Key to add single days (when clicked on a date)
- Multiselection support by CTRL-Key to add single weeks (when clicked on a weeknumber)
- Multiselection support by CTRL-Key to add single months (when clicked on the weeknumber header)
- Multiselection support by SHIFT-Key to add a range of days depending on the lastclicked day (when clicked on a single date)
- returned the prev/next monthbuttons to the monthlabelrow
- implemented mousewheel-event again for comfortable increasing/decreasing months
- implemented monthpicker again to comfortably select the starting month. the monthpicker is rendered on the very first monthname so with only 1 month given, it acts just like the original datepicker
- added quick dayselection routine without calling update() every time. MUCH faster selection, especially when using huge multimonth calendars!
- added "OK"- and "Undo"-Buttons when multiSelection is set to true
- unneccessary renderupdate trigger eliminated (performance-leak on huge multimonthcalendars!) (setvalue-function changed, much more faster now)
- prevented opening a new browsertab in IE7/IE8 when CTRL multiselecting (occured in original multimonth calendar extension and datepicker also if clicked on an empty area within the cell) (default behaviour for a-tags, prevented this by CSS)
- extend keynavigation (RETURN=ok-Button, CTRL as usual)
- added Tooltip functionality to DateFieldPlus just like Buttons (tooltip show on triggerbutton only, this way invalidtext tooltips stay intact)

Credits
Beside myself for merging, recoding, extending and bugfixing everything, the DatePickerPlus Extension is based on 4 contributed extensions from the ext-forum:

- Multimonth calendar extension (enhanced integration) (aungii) Link (http://extjs.com/forum/showthread.php?t=20597)
- Datepicker extension for multiple day/week/month selection (basic idea adopted) (cocorossello / stevenvegt) Link (http://extjs.com/forum/showthread.php?t=22473)
- Weeknumber display (enhanced integration) (eni.kao) Link (http://extjs.com/forum/showthread.php?t=15635)
- XDateField with configurable submitFormat (full integration) (jsakalos) Link (http://extjs.com/forum/showthread.php?t=25900)

Learning Page
http://extjs.com/learn/Extension:_DatePickerPlus (http://extjs.com/learn/Extension:DatePickerPlus)

Have fun with this...

mystix
5 Apr 2008, 6:40 AM
excellent job! =D> this will come in really handy.


I would like to create a Wiki-page here on the Learning Center, but i'm somehow unable to create a _new_ Page, instead of editing existing ones...

to create a new page, just type


http://extjs.com/learn/my_spanking_new_wiki_page

where my_spanking_new_wiki_page is the page you'd like to create, and you'll be presented with options to either edit or create a new page. have fun ;)

ludoo
5 Apr 2008, 7:14 AM
Hi,

Seems great but under firefox3, it seems there a little matter of width.
Probaby CSS config....

LudoO

DVSDevise
5 Apr 2008, 8:11 AM
Nice work and thanks for sharing this!

I noticed one problem in the MultiSelection example.

Select wk. in April to select the whole month of April. Then hold Ctrl and click on Wk18 in May. April 27 to 30 gets unselected.

sanjshah
5 Apr 2008, 8:50 AM
Not sure if this is problem or its me, I have used the code as:




var holidaydatetest = new Ext.ux.form.DateFieldPlus({
usePickerPlus: true, //this will fire the use of datepickerplus instead of datepicker
noOfMonth: 1,
multiSelection: false,
markNationalHolidays: true,
useQuickTips:false,
format : 'd/m/Y',
minDate: new Date(2008, 3, 1),
maxDate: new Date(2008, 4, 31),
applyTo: 'holidaydatetest',
handler : function(){
//var mydate=this.value;
alert("testing");
}
});


I've included the datepicker.css and datepickerplus.js files.

but when I click on any date I get an error (IE 7):

Object doesn't support this property or method

not sure why is it because I am using d/m/Y ?

Thanks

wm003
5 Apr 2008, 11:43 AM
I've included the datepicker.css
i guess you meant datepickerplus.css




but when I click on any date I get an error (IE 7):

Object doesn't support this property or method

not sure why is it because I am using d/m/Y ?

Thanks

It's definately not because of the format-config (tried it myself on the demo page).
Maybe you have some more js-files included that also override/extend the datefield/datepicker widget? If you don't mind please post your complete code incl. HTML Part, so we can better seek the problem. Just the code above does work in my setups

wm003
5 Apr 2008, 11:47 AM
Select wk. in April to select the whole month of April. Then hold Ctrl and click on Wk18 in May. April 27 to 30 gets unselected.

Of course it does! as a normal CTRL-Select behaviour it also UNselects when selecting the same days again while pressing CTRL. So days 27-30 have been selected with whole April.
Week 18 contains April AND May Days. As the April Days are already selected they got unselected here...

..i'm gonna create another config option to prevent this (disable CTRL-Unselection on week/month selection)... Thanks for the suggestion:)

wm003
5 Apr 2008, 1:03 PM
excellent job! where my_spanking_new_wiki_page is the page you'd like to create, and you'll be presented with options to either edit or create a new page. have fun ;)

Thanks for pointing me in the right direction :), i created a little Wiki-Page for this Widget here (http://extjs.com/learn/Extension:DatePickerPlus).

sanjshah
5 Apr 2008, 4:11 PM
Hi,

the images around the today button show as 'x' the properties are:


http://localhost/ext_exp/exttools/ext-2.0/resources/images/default/s.gif

I'm not sure where the ext_exp is from? its missing the actual site name the rest of the path is OK.

so its should be:


http://localhost/assetreg/exttools/ext-2.0/resources/images/default/s.gif

I will post the rest of the code tomorrow when I back at my PC.

strange?

DVSDevise
5 Apr 2008, 4:14 PM
Of course it does! as a normal CTRL-Select behaviour it also UNselects when selecting the same days again while pressing CTRL. So days 27-30 have been selected with whole April.
Week 18 contains April AND May Days. As the April Days are already selected they got unselected here...

..i'm gonna create another config option to prevent this (disable CTRL-Unselection on week/month selection)... Thanks for the suggestion:) That would be great for me! Personally I think that behavior should be turned on my default. I don't beleive there would be many cases where the user would ever want to invert their selection when clicking the week/month selection. I see the week/month selection functions always being a "select all" operation even when holding down ctrl. I'm pretty sure most users will see it that way too. However keep in mind, if the whole week/month is already selected, it should "deselect all". So the option should probably be called disable CTRL selection invert on week/month selection.

Thanks again, this is great work.

jsakalos
5 Apr 2008, 4:44 PM
Just perfect!

Is there a possibility to remove buttons? I'm thinking that this extension would be very handy for personal organizers, like korganizer in KDE, where these buttons would be undesirable.

=D>=D>=D>

wm003
6 Apr 2008, 12:22 AM
I'm not sure where the ext_exp is from? its missing the actual site name the rest of the path is OK.


aah...thanks for reporting this. a bug left in the code...:">
i'll fix this together with the suggestions from jsakalos and dvsdevise and post a new version in a few minutes...~o)

wm003
6 Apr 2008, 2:43 AM
I updated the Demopage and the first Post to the current Version. See Revision History for Details. All suggestions and bugreports have been inplemented and fixed:)
Thanks to DVSDevise, jsakalos,sanjshah and ludoo.

KampfCaspar
6 Apr 2008, 4:31 AM
Great extension! Thanks for sharing.

May I humbly suggest not forgetting about keyboard controls, like arrow navigation and Shift+Arrow selection?

On my FF3 *something* seems to change internally upon arrow key presses, but the display does only change by switching months.

HPO

wm003
6 Apr 2008, 4:48 AM
May I humbly suggest not forgetting about keyboard controls, like arrow navigation and Shift+Arrow selection?
well, the keyboard-controls are yet the same as the original datepicker. (i only added the RETURN key to act like pressing on the "OK"-Button) The problem is, whereas the currentpicker has browser focus and thus can react on keyboard navigation.
its the same issue than in original datepicker...i was worried about this myself, so i try to figure out how to get it working better. (currently you need to click at least on one button (e.g. next/prev month) to get the focus so the pageUp/pageDown/CTRL-left/right Keys/space/return work...well most of the times at least in my setups...and not in all browsers


I'll dig into it and try to implement full keyboard navigation in the next version;)

DVSDevise
6 Apr 2008, 4:57 AM
I updated the Demopage and the first Post to the current Version. See Revision History for Details. All suggestions and bugreports have been inplemented and fixed:)
Thanks to DVSDevise, jsakalos,sanjshah and ludoo. Beautiful, that's perfect. :D

jerrybrown5
6 Apr 2008, 5:14 AM
This is a very nice control; however, is there any reason why you are not registering Ext.ux.form.DateFieldPlus with Ext.reg?

wm003
6 Apr 2008, 5:17 AM
This is a very nice control; however, is there any reason why you are not registering Ext.ux.form.DateFieldPlus with Ext.reg?

yes..i simply forgot about that...;)

Updated Version to beta 3 and fixed a little bug..thanks for reporting.

jerrybrown5
6 Apr 2008, 6:35 AM
Here's a bug for you... the date will popup on the top part of the screen... It only happens in IE when you use the xtype creation when you have an id specified...it happens because the datemenu is creating a duplicate id of the datefield

Here is the code to reproduce it.. You can put this in the ext samples folder along with your library.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="ext.ux.datepickerplus.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="ext.ux.datepickerplus.js"></script>

<link rel="stylesheet" type="text/css" href="forms.css"/>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css"/>
</head>
<body>
<script>
Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();

/*
* ================ Simple form =======================
*/
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});


var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Date',
id:'datepickerplus',
name: 'datepickerplus',
xtype: 'datefieldplus'
//xtype: 'datepickerplus'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
})
],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

simple.render(document.body);
});
</script>

</body>
</html>

wm003
6 Apr 2008, 7:44 AM
Here's a bug for you... the date will popup on the top part of the screen... It only happens in IE when you use the xtype creation when you have an id specified...it happens because the datemenu is creating a duplicate id of the datefield


Yeah, you are right. This was left from jsakalos XDateField Extension which always takes the name-config option for the hidden submitFormat Field.

I fixed it the following way:

a) "id" and "name" are given and both are equal or both are not defined:
"id" stays for the datefield and "name" gets a suffix from the new config-option "submitFormatAddon" (default "-format")


//the hidden submitFormat Field will become "datepickerplus-format"
id:"datepickerplus",
name: "datepickerplus"
b) "id" and "name" are given and they are different:
Nothing changes, the Datefield gets the id and the hiddenfield gets the name

c) just "name" is given
The Datefield gets a generated Ext-Id and the hiddenfield gets the name

d) just "id" is given
The Datefield gets the given Id and the hiddenfield gets the id with the suffix from the new config-option "submitFormatAddon" (default "-format")


//the hidden submitFormat Field will become "datepickerplus-format"
id:"datepickerplus",

sanjshah
6 Apr 2008, 11:54 AM
Hi,

Here's the HTML code from my page that produces an error when the datefieldplus (holidaydatetest) is clicked.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tyu</title>
</head>
<head>
<link rel="stylesheet" type="text/css" href="exttools/ext-2.0/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="exttools/ext-2.0/resources/css/xtheme-gray.css" />
<script type="text/javascript" src="exttools/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="exttools/ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="exttools/ext-2.0/datepicker/ext.ux.datepickerplus-min.js"></script>
<link rel="stylesheet" type="text/css" href="stie.css" />
<link rel="stylesheet" type="text/css" href="exttools/ext-2.0/datepicker/datepickerplus.css" />
<script type="text/javascript">
Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = 'exttools/ext-2.0/resources/images/default/s.gif';

Ext.namespace('Ext.exampledata');

taginfotext = '<p>Blah Blah Blah<br>Blah Blah Blah</p>';

Ext.exampledata.equipment = [
['Equip1'],
['Equip2'],
['Equip3']
];

Ext.exampledata.names = [
['Name1'],
['Name2'],
['Name3']
];

Ext.exampledata.shopstores = [
['Shop1'],
['Shop2'],
['Shop3']
];

Ext.exampledata.tagstore = [
['AAA:','Tage for A'],
['BBB:','Tage for B'],
['CCC:','Tage for C']
];

var store = new Ext.data.SimpleStore({
fields: ['type'],
data : Ext.exampledata.equipment
});

var userstore = new Ext.data.SimpleStore({
fields: ['username'],
data : Ext.exampledata.names
});

var shopstore = new Ext.data.SimpleStore({
fields: ['storename'],
data : Ext.exampledata.shopstores
});

var tagstore = new Ext.data.SimpleStore({
fields: ['tagprefix','itemdescription'],
data : Ext.exampledata.tagstore
});

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

// Asset Type
var purchasedate = new Ext.form.DateField({
width: 230,
fieldLabel: 'Date Of Purchase',
readOnly: true,
format : 'd/m/Y',
applyTo: 'purchaseddate'
});

var createdby = new Ext.form.TextField({
width: 230,
readOnly: true,
applyTo: 'createdby'
});

var invoiceno = new Ext.form.TextField({
width: 230,
applyTo: 'invoiceno'
});

var cost = new Ext.form.NumberField({
width: 230,
applyTo: 'cost',
emptyText : '0.00'
});

var assettype = new Ext.form.ComboBox({
width: 230,
store: store,
displayField:'type',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select Equipment Type...',
applyTo: 'assettype'
});

var shopstores = new Ext.form.ComboBox({
width: 230,
store: shopstore,
displayField:'storename',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select store',
applyTo: 'purchasedfrom'
});


//Asset Location
var comboWithTooltip = new Ext.form.ComboBox({
width: 230,
store: userstore,
displayField:'username',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a User...',
selectOnFocus:true,
applyTo: 'allocation'
});

var dateissued = new Ext.form.DateField({
width: 230,
fieldLabel: 'Date Of Purchase',
readOnly: true,
format : 'd/m/Y',
applyTo: 'dateissued'
});


//Comments
var comments = new Ext.form.HtmlEditor({
width: 600,
applyTo: 'comments'
});

var holidaydatetest = new Ext.ux.form.DateFieldPlus({
usePickerPlus: true, //this will fire the use of datepickerplus instead of datepicker
noOfMonth: 1,
multiSelection: false,
markNationalHolidays: true,
useQuickTips:true,
format : 'd/m/Y',
tooltip:'do something',
disabledDays: [0, 6], //0 = Sundays 6 = Saturdays
disabledDaysText: 'Deliveries are not available on the weekends',
disabledDates:['10/04/2008', '11/04/2008'],
disabledDatesText :'this is not valid date',
applyTo: 'holidaydatetest',
listeners:{'onSelect':function(){var mydate = this.value; Ext.MessageBox.alert(mydate); }}
});

//Tag Info Area
var tagfield = new Ext.form.ComboBox({
tpl: '<tpl for="."><div ext:qtip="{tagprefix}. {itemdescription}" class="x-combo-list-item">{tagprefix}</div></tpl>',
width: 230,
fieldLabel: 'Create Tag for Asset',
store: tagstore,
displayField:'tagprefix',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select Tag...',
selectOnFocus:true,
applyTo: 'itemtag'
});

var p = new Ext.Panel({
title: 'Tag Details',
hideCollapseTool: true,
titleCollapse: true,
collapsible: true,
renderTo: 'taginfo',
width:600,
html: taginfotext
});

});
</script>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><form action="" method="post" name="form1" id="form1">
<fieldset class="x-fieldset">
<legend>Asset Type</legend>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300" height="25" class="x-btn">Created By:</td>
<td class="x-btn">Date of Purchase:</td>
</tr>
<tr>
<td height="25"><input name="createdby" type="text" id="createdby" value="" /></td>
<td><input type="text" name="purchaseddate" id="purchaseddate" /></td>
</tr>
<tr>
<td height="25" class="x-btn">Invoice No:</td>
<td class="x-btn">Purchased From:</td>
</tr>
<tr>
<td height="25"><input type="text" name="invoiceno" id="invoiceno" /></td>
<td><input type="text" name="purchasedfrom" id="purchasedfrom" /></td>
</tr>
<tr>
<td height="25" class="x-btn">Asset Type:</td>
<td class="x-btn">Cost:</td>
</tr>
<tr>
<td height="25"><input type="text" name="assettype" id="assettype" /></td>
<td><input type="text" name="cost" id="cost" /></td>
</tr>
</table>
<p>&nbsp;</p> </fieldset>
<fieldset class="x-fieldset">
<legend>Allocation Details</legend>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300" height="25" class="x-btn">Allocated Name:</td>
<td class="x-btn">Date Issued:</td>
</tr>
<tr>
<td height="25"><input type="text" name="allocation" id="allocation" /></td>
<td><input type="text" name="dateissued" id="dateissued" /></td>
</tr>
<tr>
<td height="25"><span class="x-btn">Condition:</span></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="25"><span class="x-btn"><input name="condition" type="radio" id="radio" value="New" checked="checked" />New
<input type="radio" name="condition" id="radio2" value="Second Hand" />Second Hand
<input type="radio" name="condition" id="radio3" value="N/A" />N/A</span></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="25"><span class="x-btn">Date Issued:</span></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="25"><input type="text" name="holidaydatetest" id="holidaydatetest" /></td>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp; </p>
</fieldset>
</p>
<fieldset class="x-fieldset">
<legend>Comments</legend>
<textarea name="comments" id="comments" cols="45" rows="5"></textarea>
</fieldset>
<fieldset class="x-fieldset">
<legend>Tags</legend>
<div id="taginfo"></div>
<br />
<br />
<input type="text" name="itemtag" id="itemtag" />
</fieldset>
</form>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>

<p>&nbsp;</p>
</body>
</html>

Any help is appreciated.

Regards,

Sanj

wm003
6 Apr 2008, 12:26 PM
Hi,

Here's the HTML code from my page that produces an error when the datefieldplus (holidaydatetest) is clicked.

...
Any help is appreciated.


:-? MMh, i guess you still use Ext 2.0 ("exttools/ext-2.0/resources/" seems very suspicious, because the 2.0.2 release should look like "exttools/ext-2.0.2/resources/" by default)? I've tested your code with Ext 2.0.2 and i get no error. Everything works fine. Please upgrade to 2.0.2 and it should work.

DatePickerPlus extends Datepicker, so there might be an old Bug in the original Code (that has been fixed in 2.0.2) that prevent it to be working with DatepickerPlus.

sanjshah
6 Apr 2008, 2:35 PM
Thanks Marco,

Updated to the latest Extjs and all working perfectly so thanks

Also I like they way to hide 'Today' button much cleaner!

Regards,

Sanj

Spirit
6 Apr 2008, 11:11 PM
Looks real nice!

I have tested your demo site and I found something which may not be workin as expected (IE & FF):

If you select 7th April, hold down shift key and select a date in the next month, not all days between the two selected days will be selected! (always the last few are missing)

Works well if selection is within one month.

Greetz
Spirit

jerrybrown5
6 Apr 2008, 11:50 PM
This is an open question to all. All of these great calendar features are built on top of the same premise from the original DatePicker. A render method creates the framework html tables and an update function goes through each cell to update the class and date.

I wonder if it was possible to improve this underlying logic. What if we were to render divs instead of tables and update them with pure css styling. You would need to have an image that contains the day numbers but that is not that much of a limitation. I imagine that if we could pull it off it most certainly would be quite a bit faster. --just an idea

Best regards,
Jerry Brown

wm003
7 Apr 2008, 1:08 AM
I have tested your demo site and I found something which may not be workin as expected (IE & FF):

If you select 7th April, hold down shift key and select a date in the next month, not all days between the two selected days will be selected! (always the last few are missing)
Works well if selection is within one month.

Oups...:"> Thanks for reporting. I fixed this and updated the demopage and first Post
I also added a new Method "setDateLimit()" to be able to set minDate and maxDate at once

wm003
7 Apr 2008, 1:17 AM
This is an open question to all. All of these great calendar features are built on top of the same premise from the original DatePicker. A render method creates the framework html tables and an update function goes through each cell to update the class and date.

I wonder if it was possible to improve this underlying logic. What if we were to render divs instead of tables and update them with pure css styling. You would need to have an image that contains the day numbers but that is not that much of a limitation. I imagine that if we could pull it off it most certainly would be quite a bit faster. --just an idea


Yes, i thought about this myself and i think it should run faster. It's on my Roadmap for a 1.x Version (or Ext Dev Team comes up with this on the original Datepicker that i can extend)
Building up each calendar as a div and floating them by CSS shoud only make it necessary to update one month instead of all of them by just repositioning the next month to be shown...
Personally i needed the datepicker in function like i did with datepickerplus now asap, so building it up by tables was faster (codingwise). But i agree there should be more potential in gaining more performance

Richie1985
7 Apr 2008, 11:28 PM
how can i use the 'afterdateclick' method?

not so:


listeners:{'afterdateclick':function(){ Ext.MessageBox.alert('test'); }} ,

how then????

thanks

wm003
8 Apr 2008, 12:21 AM
how can i use the 'afterdateclick' method?

not so:


listeners:{'afterdateclick':function(){ Ext.MessageBox.alert('test'); }} ,how then????

thanks
"afterdateclick" works only if "multiSelection" is set to true. otherwise use the "select"-event (that was the only event from the original datepicker, so to be backward compatible the afterdateclick works only on multiSelection.

i tested your code and it works as expected:)

Richie1985
8 Apr 2008, 1:19 AM
mhh but the select event dosnt work :(


var datum_supervisor = new Ext.ux.form.DateFieldPlus({
allowBlank:false,
readOnly:true,
showWeekNumber: true,
format: 'd.m.Y',
value: dt.format('d.m.Y'),
noOfMonth : 1,
noOfMonthPerRow : 1,
useQuickTips:false,
listeners:{'select':function(){ Ext.MessageBox.alert('test'); }}
});

i had to call a function, when the user select a date in the datepicker.

wehtam
8 Apr 2008, 2:06 AM
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
8 Apr 2008, 2:28 AM
- 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.
~o)~o)

wehtam
8 Apr 2008, 4:24 AM
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
8 Apr 2008, 5:39 AM
Wooooooooooooo

Thanks for share!!!

wm003
8 Apr 2008, 6:54 AM
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
8 Apr 2008, 7:02 AM
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
8 Apr 2008, 7:26 AM
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
8 Apr 2008, 7:42 AM
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
8 Apr 2008, 11:24 AM
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 68-|. Try current beta 7, please;)

wm003
8 Apr 2008, 11:39 AM
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'));
}
}

sanjshah
8 Apr 2008, 12:47 PM
Thanks all working now!

Regards,

Sanj

wehtam
9 Apr 2008, 12:33 AM
Hello, it's still me.
Everything works well except for the pre-selection dates.
If I have any pre-selected dates on the current month, they will not be displayed, but when I go to the following month and returns, it will be displayed.

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 : qsdf',

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=1'); }} ,

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=2' , params:{'dates':allStringDates

.join('|')},waitMsg:'Enregistrement des informations ...',

success:function(form, action,response){

page('listeOffresSpeciales.php?id_rub=1');

}



});

}



})

]

});



simple.render('div_form');

datepickerplusmenu.clearSelectedDates();

datepickerplusmenu.setSelectedDates([new Date(2008,3,26),new Date(2008,3,25),new Date(2008,0,10),new

Date(2008,3,10),new Date(2008,3,17),new Date(2008,3,16),new Date(2008,3,18),new Date(2008,3,11),new

Date(2008,0,17),new Date(2008,0,24),new Date(2008,0,25),new Date(2008,0,18),new Date(2008,0,11),new

Date(2008,0,12),new Date(2008,0,19),new Date(2008,0,20)]);

</script>

Thanks

wm003
9 Apr 2008, 1:11 AM
Hello, it's still me.
Everything works well except for the pre-selection dates.
If I have any pre-selected dates on the current month, they will not be displayed, but when I go to the following month and returns, it will be displayed.



i hate coding without any sleep..(:|(:|.a little damn bug was left...

Ok, i got it working now (tested with your code:D)
Please try the latest beta 8 and everything should now work to your entire satisfaction;)

~o)

wm003
9 Apr 2008, 1:21 AM
As the latest Beta 8 is now close to stable final (thanks to all testers!:D), i would like to ask if anybody in here is willing to translate the DatepickerPlus texts in their own language? If you can deliver me some information on your country holidays (wikipedia?), i'm willing to do the calculation function for them myself, but i cannot translate the sentences (ok, i can use google,babelfish,...but i hardly believe the result is perfect in all cases)

I would really like to see:

-Swedish
-Polish
-Finnish
-Dutch
-Norwegian
-Danish
-Spanish
-Italian
-French

...the more the better :) Thanks in advance

Of course you will be credited!

wehtam
9 Apr 2008, 1:33 AM
Thank you, it works perfectly. =D>=D>
A final request, finally hope. /:)
I would like to know if it is possible not to leave the choice of certain dates. For example, it gives a list of dates and thus all other dates are disabled. :-?
sorry for my very bad english

wm003
9 Apr 2008, 2:45 AM
Thank you, it works perfectly. =D>=D>
A final request, finally hope. /:)
I would like to know if it is possible not to leave the choice of certain dates. For example, it gives a list of dates and thus all other dates are disabled. :-?
sorry for my very bad english

That should be possible with the disabledDatesRE Function from the original Datepicker.
I think that would need a very complex regular Expression depending on what dates should be selectable...

I think its a good suggestion to create another config item for this...gimme some minutes...~o)

wm003
9 Apr 2008, 6:35 AM
For example, it gives a list of dates and thus all other dates are disabled. :-?

Try the latest beta 9. I added a new config item "allowedDates" (default false). Fill it with an Array of Dateobjects and these days will be selectable only, all others are disabled.
See Revision History for more info... On the demopage (http://www.lubber.de/extjs/datepickerplus) i used this feature on Datemenu 2

wm003
9 Apr 2008, 11:25 PM
I just fixed 2 small Bugs. DatepickerPlus is very stable now, so i moved to Revision 1.0 RC1.
Thanks again to all testers.

sigaref
10 Apr 2008, 6:58 AM
There is a typo in DateFieldPlus, just search for "showWeekNumer", with this fixed the window shows the week number as default.

Thx for this nice extension!

pcsernyik
10 Apr 2008, 7:15 AM
Hello,
First, the datepickerplus is a very excellent work!
But i have a little problem:

I put the datepickerplus in the second tab of a tabpanel.
When the first tab is active tab (config: activeTab: 0) the month selector doesn't work properly.
If activeTab:1 (this tab contains the datepicker), the month selector is perfect.

What may cause the problem?

Little example:


var form2 = new Ext.FormPanel({
labelAlign: 'right',
//title: 'Alap adatok',
bodyStyle: 'padding:5px',
width: 590,
height: 600,
items: [{
xtype: 'tabpanel',
labelAlign: 'right',
title: 'Alap adatok',
plain: true,
activeTab: 0,
width: 590,
height: 600,
deferredRender: false,
layoutOnTabChange: true,
bodyStyle: 'padding:5px',

items: [{
title: 'First',
html: 'blalbala'
}, {
title: 'Second',
items: [{
xtype: 'datepickerplus',
value: new Date(2008, 3, 30),
noOfMonth: 6,
noOfMonthPerRow: 2,
multiSelection: true,
showWeekNumber: true,
weekendText: 'This day is part of a Weekend',
eventDates: function(year){
var dates = [{
date: new Date(2008, 4, 14), //fixed date marked only on 2008/01/02
text: "My cat died 7 years ago",
cls: "x-datepickerplus-eventdates"
}, {
date: new Date(year, 4, 11), //will be marked every year on 05/11
text: "May 11th, Author's Birthday (Age:" + (year - 1973) + ")",
cls: "x-datepickerplus-eventdates"
}];
return dates;
}
}]
}]
}]
});



var dWin = new Ext.Window({
title :"Ext DatepickerPlus Demo",
closable: false,
draggable:false,
resizable:false,
width: 590,
height: 600,
x:40,
y:40,
constrain:true,
layout:'fit',
items: [form2]
});

wm003
10 Apr 2008, 9:31 AM
There is a typo in DateFieldPlus, just search for "showWeekNumer", with this fixed the window shows the week number as default.

Thx for this nice extension!

:">:">:">:"> Thanks for reporting this. I'll check out the issue from pcsernyik and will post a corrected version the next minutes.

Nohcs777
10 Apr 2008, 10:42 AM
I just picked up this extention and trying to integrate it into my code. Please excuse my ignorance if I have some how missed it, but it appears that




Ext.ux.form.DateFieldPlus does not support multiSelection. ie. taken from the Ext.ux.form.DateFieldPlus code:


Ext.apply(
this.menu.picker, {
minDate : this.minValue,
maxDate : this.maxValue,
...
multiSelectByCTRL: this.multiSelectByCTRL,
fillupRows: this.fillupRows,
multiSelection: false,
...
});Is this correct? I suppose this would make sense given the field value can only hold a single date?

wm003
10 Apr 2008, 11:06 AM
Hello,
First, the datepickerplus is a very excellent work!
But i have a little problem:

I put the datepickerplus in the second tab of a tabpanel.
When the first tab is active tab (config: activeTab: 0) the month selector doesn't work properly.
If activeTab:1 (this tab contains the datepicker), the month selector is perfect.

What may cause the problem?



Sorry, but i can't reproduce the problem with this code. The monthpicker works fine, no matter what value activeTab has....Do you use Ext 2.0.2?

wm003
10 Apr 2008, 11:28 AM
Please excuse my ignorance if I have some how missed it, but it appears that Ext.ux.form.DateFieldPlus does not support multiSelection. ie. taken from the Ext.ux.form.DateFieldPlus code:
[Is this correct? I suppose this would make sense given the field value can only hold a single date?
Yes, this is correct. DateFieldPlus can only hold a single date, thus the multiSelection config option is always set to false. I have a DateList Item on my roadmap for future development.
In the meantime use Datemenu which supports multiSelection.

Nohcs777
10 Apr 2008, 12:00 PM
Unfortunately my client prefers to see (and potentially manipulate the trigger Field) after multiselection so it seems I may need to extend the Ext.ux.form.DateFieldPlus. I am still looking over the code, but what I was thinking was to just augment this type to populate a comma (or configurable delimiter) list of the values found in Ext.ux.DatePickerPlus.menu.picker.selectedDates[] and potentially override Ext.ux.DatePickerPlus.setValue() & Ext.ux.DatePickerPlus.getValue(). I would also have to modify the behavior of the menuItem to not close on click as well. Would this not be (temporarily) sufficient?

Additionally, it might make sense to update your demo page. In the description for "DateFieldPlus 1" is accurately describes mutiselect:false however "DateFieldPlus 2" ommits from its comment about multiselect all together. It seems a bit misleading to me if multiselect is always set to false. Am I missing a more complete description of this somewhere in the release notes or something?

wm003
10 Apr 2008, 12:17 PM
Unfortunately my client prefers to see (and potentially manipulate the trigger Field) after multiselection so it seems I may need to extend the Ext.ux.form.DateFieldPlus. I am still looking over the code, but what I was thinking was to just augment this type to populate a comma (or configurable delimiter) list of the values found in Ext.ux.DatePickerPlus.menu.picker.selectedDates[] and potentially override Ext.ux.DatePickerPlus.setValue() & Ext.ux.DatePickerPlus.getValue(). I would also have to modify the behavior of the menuItem to not close on click as well. Would this not be (temporarily) sufficient?

The main problem i see is the Dateparsing, as you could manually enter anything in the datefield (if not set to readonly)...The idea with a delimiter sounds quite easy to realize, but the value(s) need to get passed by the hidden format field also. i'll take that into my roadmap for 1.1.



Additionally, it might make sense to update your demo page. In the description for "DateFieldPlus 1" is accurately describes mutiselect:false however "DateFieldPlus 2" ommits it a comment about multiselect all together. It seems a bit misleading to me if multiselect is always set to false. I am missing this fact say somewhere in the release notes or something?

i choosed to set multiSelection default to false, so it just act like the original datepicker (if anybody upgrades from original datepicker, their apps should act like always then)

I agree with the release_notes...i copied them from this forum now (more clear and its stated that multiSelection is false by default)

Nohcs777
10 Apr 2008, 12:30 PM
Yea. I think I am going to stay away from date parsing at this point and make the field readOnly to avoid this senario for the time being. My client also would like some TextMasking in that senario anyway and that could be relately difficult to accomplish as well.

After making the changes, would you like me to post the changes to this forum?

wm003
10 Apr 2008, 12:35 PM
After making the changes, would you like me to post the changes to this forum?
Yes,please! That would be very interesting in how you accomplished it:)

pcsernyik
11 Apr 2008, 12:36 AM
Sorry, but i can't reproduce the problem with this code. The monthpicker works fine, no matter what value activeTab has....Do you use Ext 2.0.2?

Yes, I do that.
Please, look at my example here: http://www.ats.hu/test/

wm003
11 Apr 2008, 1:35 AM
Yes, I do that.
Please, look at my example here: http://www.ats.hu/test/

Here is the problem:


deferredRender: false,

Delete this line and it works

pcsernyik
11 Apr 2008, 2:25 AM
Great!! Thank you!

nassaja-rus
14 Apr 2008, 4:08 AM
Can you add "submitFormat" property? For date formating on submit like in Ext.ux.form.XDateField plugin?

wm003
14 Apr 2008, 10:04 AM
Can you add "submitFormat" property? For date formating on submit like in Ext.ux.form.XDateField plugin?

It's already implemented for DateFieldPlus by default :)
I only missed it in the docs...updated now.

Nohcs777
14 Apr 2008, 10:26 AM
Yes,please! That would be very interesting in how you accomplished it:)

Sorry i haven't gotten back sooner. I finished this last week (or at least all I could justify).

I augmented the Ext.ux.form.DateFieldPlus type as I figured it would be easier for your integration than if I had just extended your type. Additionally, given the event model, I also had to slightly modify your Ext.ux.DatePickerPlus.setValue() to handle arrays.

At this point it populates the field w/ a (customizable) delimeter which will handle validation. Unfortunately I didn't have time to figure out how to get the DatePicker to reset the values selected based on if the user changes the values in the field as I didn't want to spend time understanding the difference between preselected[] vs selected[] and handling the management of that.

I hope this helps. Thx.



//augmented Ext.ux.form.DateFieldPlus to handle multiselection
Ext.ux.form.DateFieldPlus= Ext.extend(Ext.form.DateField, {
usePickerPlus: true,
showWeekNumer: true,
eventDates: [],
noOfMonth : 1,
noOfMonthPerRow : 3,
nationalHolidaysCls: 'x-datepickerplus-nationalholidays',
markNationalHolidays:true,
eventDates: function(year) {
return [];
},
eventDatesRE : false,
eventDatesRECls : '',
eventDatesREText : '',
multiSelectByCTRL: true,
fillupRows: true,
multiSelection: false,
multiSelectionDelimiter: ',',
markWeekends:true,
weekendText:'',
weekendCls: 'x-datepickerplus-weekends',
weekendDays: [6,0],
useQuickTips: true,
pageKeyWarp: 1,
maxSelectionDays: false,
resizable: false,
renderTodayButton: true,
renderOkUndoButtons: true,
tooltipType: 'qtip',
allowedDates : false,
allowedDatesText : '',
onAfterMonthClick : function(picker, month, wasSelected){
this.fireEvent("aftermonthclick", this, month, wasSelected, picker);
},
onAfterWeekClick : function(picker, startOfWeek, wasSelected){
this.fireEvent("afterweekclick", this, startOfWeek, wasSelected, picker);
},
onAfterDateClick : function(picker, date, wasSelected){
this.fireEvent("afterdateclick", this, date, wasSelected, picker);
},
onTriggerClick : function(){
if(this.disabled){
return;
}
if(!this.menu){
this.menu = new Ext.menu.DateMenu({
//is needed at initialisation
usePickerPlus:this.usePickerPlus,
noOfMonth:this.noOfMonth,
noOfMonthPerRow:this.noOfMonthPerRow,
listeners: {
'afterdateclick': {fn:this.onAfterDateClick,scope:this},
'aftermonthclick': {fn:this.onAfterMonthClick,scope:this},
'afterweekclick': {fn:this.onAfterWeekClick,scope:this}
}
});
}


Ext.apply(this.menu.picker, {
minDate : this.minValue,
maxDate : this.maxValue,
disabledDatesRE : this.ddMatch,
disabledDatesText : this.disabledDatesText,
disabledDays : this.disabledDays,
disabledDaysText : this.disabledDaysText,
format : this.format,
minText : String.format(this.minText, this.formatDate(this.minValue)),
maxText : String.format(this.maxText, this.formatDate(this.maxValue)),
showWeekNumber: this.showWeekNumber,
nationalHolidaysCls: this.nationalHolidaysCls,
markNationalHolidays:this.markNationalHolidays,
multiSelectByCTRL: this.multiSelectByCTRL,
fillupRows: this.fillupRows,
multiSelection: this.multiSelection,
markWeekends:this.markWeekends,
weekendText:this.weekendText,
weekendCls: this.weekendCls,
weekendDays: this.weekendDays,
useQuickTips: this.useQuickTips,
eventDates: this.eventDates,
eventDatesRE: this.eventDatesRE,
eventDatesRECls: this.eventDatesRECls,
eventDatesREText: this.eventDatesREText,
pageKeyWarp: this.pageKeyWarp,
maxSelectionDays: this.maxSelectionDays,
resizable: this.resizable,
renderTodayButton: this.renderTodayButton,
renderOkUndoButtons: this.renderOkUndoButtons,
allowedDates : this.allowedDates,
allowedDatesText : this.allowedDatesText
});
this.menu.on(Ext.apply({}, this.menuListeners, {
scope:this
}));
this.menu.picker.setValue(this.getValue() || new Date());
this.menu.show(this.el, "tl-bl?");
},

/**
* @param date || Array of dates
* @description override setValue() function to handle arrays.
* additionally, probably should change DatePickerPlus to throw a 'okclicked' event
* instead of select to differenciate it from 'select' since its really only applicable
* under the single select senario
*/
setValue : function(date){

var field = this;

if (Ext.isArray(date))
{
var formatted = [];
Ext.each(date, function(item, index, array) {
formatted.push(field.formatDate(item));
});

var value = formatted.join(this.multiSelectionDelimiter);

//bypass setValue validation on Ext.DateField
Ext.form.DateField.superclass.setValue.call(this, value);
}
else
{
Ext.ux.form.DateFieldPlus.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
}
},

/**
* @description override to handle delimited string values
*/
validateValue : function(value){

var field = this;

if (value.indexOf(this.multiSelectionDelimiter) > -1)
{
var values = value.split(this.multiSelectionDelimiter);
var isValid = true;
Ext.each(values, function(item, index, array) {
if (!Ext.ux.form.DateFieldPlus.superclass.validateValue.call(field, item))
isValid = false;
});

return isValid;
}
else
{
return Ext.ux.form.DateFieldPlus.superclass.validateValue.call(this, value);
}
},
/**
* @description override to handle delimited string values
*/
getValue : function() {
var value = Ext.form.DateField.superclass.getValue.call(this);
if (value.indexOf(this.multiSelectionDelimiter) > -1)
{
var field = this;

var values = value.split(this.multiSelectionDelimiter);
var dates = [];

Ext.each(values, function(item, index, array) {
dates.push(field.parseDate(item) || "");
});
return dates;
}
else
{
return Ext.ux.form.DateFieldPlus.superclass.getValue.call(this);
}
},
submitFormat:'Y-m-d',
submitFormatAddon: '-format',
onRender:function() {

Ext.ux.form.DateFieldPlus.superclass.onRender.apply(this, arguments);
//be sure not to have duplicate formfield names (at least IE moans about it and gets confused)
this.name = (typeof this.name=="undefined"?this.id+this.submitFormatAddon:(this.name==this.id?this.name+this.submitFormatAddon:this.name));
this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name:this.name});
this.hiddenName = this.name;
this.el.dom.removeAttribute('name');
this.el.on({
keyup:{scope:this, fn:this.updateHidden}
,blur:{scope:this, fn:this.updateHidden}
});

this.setValue = this.setValue.createSequence(this.updateHidden);

if(this.tooltip){
if(typeof this.tooltip == 'object'){
Ext.QuickTips.register(Ext.apply({
target: this.trigger
}, this.tooltip));
} else {
this.trigger.dom[this.tooltipType] = this.tooltip;
}
}


},

updateHidden:function() {
var value = this.getValue();
if(Ext.isDate(value)) {
this.hiddenField.dom.value = Ext.util.Format.date(value, this.submitFormat);
}
else {
this.hiddenField.dom.value = value;
}
}
});
Ext.reg('datefieldplus', Ext.ux.form.DateFieldPlus);
}
}



//slight change (snippet) to Ext.ux.DatePickerPlus

setValue : function(value){
// var old = this.value;


if (Ext.isArray(value))
{
//I expected this to work but apparently there is more going on here w/ selected vs preselected than I understand.
//leaving for future augmenting by the author.
this.setSelectedDates(value, true);
}
else
{
this.value = value.clearTime(true);
if(this.el && !this.multiSelection && this.noOfMonth==1){
this.update(this.value);
}
}


}

wm003
14 Apr 2008, 10:39 AM
Sorry i haven't gotten back sooner. I finished this last week (or at least all I could justify).

I augmented the Ext.ux.form.DateFieldPlus type as I figured it would be easier for your integration than if I had just extended your type. Additionally, given the event model, I also had to slightly modify your Ext.ux.DatePickerPlus.setValue() to handle arrays.

At this point it populates the field w/ a (customizable) delimeter which will handle validation. Unfortunately I didn't have time to figure out how to get the DatePicker to reset the values selected based on if the user changes the values in the field as I didn't want to spend time understanding the difference between preselected[] vs selected[] and handling the management of that.

I hope this helps. Thx.



Great! Thanks, i'm gonna test it more deeply (and integration with the selection and preselection you mentioned). There will still be missing some kind of parser for manual field entries.

Nohcs777
14 Apr 2008, 10:48 AM
Great! Thanks, i'm gonna test it more deeply (and integration with the selection and preselection you mentioned). There will still be missing some kind of parser for manual field entries.

The DateField already uses Date.Parse() which is what I am using for each item in the delimited list to provide validation (see validateValue()) and then subsequently for creating the array via getValue() to be passed to setSelectedValues(). Is there any reason to go beyond this if this is what the native DateField supports?

wm003
14 Apr 2008, 10:52 AM
The DateField already uses Date.Parse() which is what I am using for each item in the delimited list to provide validation (see validateValue()) and then subsequently for creating the array via getValue() to be passed to setSelectedValues(). Is there any reason to go beyond this if this is what the native DateField supports?

ahh, sorry, missed that(:|. Of course theres no more reason to go beyond this then ;)

catapl3xis
16 Apr 2008, 3:18 AM
Hi and thanks for the great extension! Is there a method or property to get the current months that are visible in calendar? I want to fetch data for only those months that the user can see (so I need to known which they are). And of course it would be nice if there was an event when the user moves to view a different month(s)...

wm003
16 Apr 2008, 4:02 AM
Hi and thanks for the great extension! Is there a method or property to get the current months that are visible in calendar? I want to fetch data for only those months that the user can see (so I need to known which they are).
Well, you can easily calculate these months:


var startmonth = datepickerplus.activeDate.getMonth();
var endmonth = startmonth+datepickerplus.noOfMonth-1;

var visibleMonths_Numbers = [];
var visibleMonths_Names = [];
for (;startmonth<=endmonth;startmonth++) {
visibleMonths_Numbers.push(startmonth);
visibleMonths_Names.push(Date.monthNames[startmonth]);
}

And of course it would be nice if there was an event when the user moves to view a different month(s)...


Sure, it's easy :) i'll put that in the upcoming final release

catapl3xis
16 Apr 2008, 4:33 AM
Well, you can easily calculate these months:


var startmonth = datepickerplus.activeDate.getMonth();

Mmm what's that mysterious 'activeDate' property? It's not on Ext API or on your docs.. you might want to add it :D


Sure, it's easy :) i'll put that in the upcoming final release

Great, I look forward to seeing that!

sigaref
16 Apr 2008, 7:53 AM
It would by nice to have an option "strictRangeSelect", when "true" you can select exact one date range limited by startdate/enddate, but you cannot interrupt this range with CTRL-Click or other select/deselect methods.

And the coolest thing would be, to use this range select by drap&drop "startdate onto enddate" or the other way around !! :)

wm003
16 Apr 2008, 12:04 PM
Mmm what's that mysterious 'activeDate' property? It's not on Ext API or on your docs.. you might want to add it

activeDate is used internally and already comes from the original datepicker.
It is used to determine the date of which the very first rendered month is generated.
it has no effect when changing it from outside the datepicker.

pcsernyik
18 Apr 2008, 12:59 AM
Hi wm003,

I'd like to load eventDates property from a jsonstore.

What is your opinion what is the best practice?

wm003
18 Apr 2008, 1:25 AM
Hi wm003,

I'd like to load eventDates property from a jsonstore.

What is your opinion what is the best practice?

Just submit a collection of the desired Jsonstore-dataindex with the collect-method of the Jsonstore-Class (http://extjs.com/deploy/dev/docs/output/Ext.data.JsonStore.html) (returns an Array) to the eventDates property. DatepickerPlus itself does not handle stores/readers.

pcsernyik
18 Apr 2008, 1:59 AM
Just submit a collection of the desired Jsonstore-dataindex with the collect-method of the Jsonstore-Class (http://extjs.com/deploy/dev/docs/output/Ext.data.JsonStore.html) (returns an Array) to the eventDates property. DatepickerPlus itself does not handle stores/readers.

Ok, I do it in this manner.
But sometimes I would need refresh the eventDates and the picker also, because the database is changed. How can i do this?

wm003
18 Apr 2008, 2:37 AM
Ok, I do it in this manner.
But sometimes I would need refresh the eventDates and the picker also, because the database is changed. How can i do this?

Easy:


mydatepickerplus.eventDates = store.collect('dataindex');
mydatepickerplus.update(mydatepickerplus.activeDate);
i might do a separate method for this in the upcoming final release

[UPDATE]

MMh, that wont work with RC2 because eventDates ist build up from a function...i'll add support for turning given arrays in working objects in upcoming release.stay tuned

joenilson
19 Apr 2008, 1:23 PM
i have a problem with the last RC2 DateFieldPlus, it is my code:



<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var exampleDate = new Ext.ux.form.DateFieldPlus({
applyTo: 'exampleDate',
allowedDates:[
new Date(2008,4,11),
new Date(2008,4,12),
new Date(2008,4,17),
new Date(2008,4,18),
new Date(2008,4,19),
new Date(2008,4,22),
new Date(2008,4,23),
new Date(2008,4,25),
new Date(2008,4,26),
new Date(2008,4,29)
],
format: 'Y-m-d',
});
});
</script>


and my div is:



<div class="x-form-element" style="padding: 0;">
<input type="text" name="exampleDate" value="2008-04-19" size="10" maxlength="10" id="exampleDate" />
</div>


When load the datefield, the dates allowed are showed in the May month, and is a bug or i'm doing something wrong.

I will see trying.

wm003
20 Apr 2008, 6:13 AM
i have a problem with the last RC2 DateFieldPlus, it is my code:

When load the datefield, the dates allowed are showed in the May month, and is a bug or i'm doing something wrong.

This is not a bug, its the way the javascript Date-Object works.

The month-Value in a Dateobject starts with 0, so January=0, February=1,...April=3...

You gave Month value 4, so its May. (new Date(2008,4,19) is May, but new Date(2008,3,19 is April)

joenilson
20 Apr 2008, 7:55 AM
thanks a lot, i was watching in the code and in the Ext Date documentation.

wm003
21 Apr 2008, 1:50 AM
I just added some more features from your requests..More are coming..;)

The Demopage (http://www.lubber.de/extjs/datepickerplus) has a new Example "Datemenu 4" which shows the new strictRangeSelect property

V1.0 RC3 [2008/04/21]
- checked to work with ExtJS 2.1
- added config strictRangeSelect (suggested by sigaref)
- added config displayMask and displayMaskText to support update masking (localization files also updated)
- added config defaultEventDatesText and defaultEventDatesCls. used if no text/cls-object is given in eventdates
- added Events "aftermonthchange" and "beforemonthchange" (fires everytime the first month changes (by monthpicker or prev/next-month buttons)
- added method setEventDates, to automatically transform given arrays/or objects to working functions, if not already specified
- BUGFIX: range selection over specific months was incorrect

wm003
21 Apr 2008, 12:37 PM
8-| somehow i attached the old RC2 Versions again...
...right now the correct current RC3 Version is attached to the first post...~o)~o)

lavitsky
21 Apr 2008, 7:02 PM
Is there a way to set the start of the week to a specific day (e.g. Monday)?

Thanks,
Eric

wm003
21 Apr 2008, 8:17 PM
Is there a way to set the start of the week to a specific day (e.g. Monday)?

Thanks,
Eric

Yes, this is already done in the Original Ext locale-files.(If this is wrong for your language, you should consider changing it and post it to the language thread.)

Anyway, you can override it anytime:


//Use this _BEFORE_ including DatepickerPlus (because DatepickerPLus extends Datepicker)
Ext.DatePicker.prototype.startDay = 1; //set to Monday
or give it to any DatepickerPLus as a config-property


var mydpp = new Ext.ux.DatePickerPlus({
...
startDay: 1,
...
});

pcsernyik
23 Apr 2008, 12:38 AM
Easy:


mydatepickerplus.eventDates = store.collect('dataindex');
mydatepickerplus.update(mydatepickerplus.activeDate);
i might do a separate method for this in the upcoming final release

[UPDATE]

MMh, that wont work with RC2 because eventDates ist build up from a function...i'll add support for turning given arrays in working objects in upcoming release.stay tuned

Thanks for all!
The setEventDates method is perfect solution for me.

markusreimers
29 Apr 2008, 5:08 AM
I have a little problem with the DatePickerPlus. Here my code. Maybe you can help me...


var myDatePicker = new Ext.menu.DateMenu({
id:'myDatePicker',
usePickerPlus: true,
noOfMonth: 2,
multiSelection: false,
markNationalHolidays: false,
showWeekNumber:false,
useQuickTips:false,
fieldLabel:'Revision',
listeners:{
'afterdateclick':function(date){
if(Ext.isDate(date.value)){
var myActiveDate = date.value.format('d.m.Y');
revisionPanel.init(myActiveDate);
}
}
}
});



var myRevisionStore = new Ext.data.JsonStore({
url: 'handle.php',
storeId: 'myRevisionStore',
baseParams:{module:'getRevisions'},
method:'POST',
root: 'myRevisions',
totalProperty: 'totalCount',
fields: ['revisionstring','datetime','date'],
autoLoad:true,
listeners: {
load: function(store, records, options){
try{
var myDate = new Array();
for(date in records){
if(typeof(records[date])=='object'){
var myTS = records[date].data.date;
myDate[date] = new Date(myTS);
}
}
Ext.getCmp('myDatePicker').component.setAllowedDates(myDate);
}catch(e){
alert('Error: "' + e.message + '" Line: ' + e.lineNumber);
}
}
}
});

In the Firefox everything is ok. I can only select the days who defined in myDate and all other dates are disabled.

But in the IE6/IE7 all days are disabled. I can

wm003
30 Apr 2008, 10:55 AM
:-?mmh, its a datemenu...the underlying picker component is only available when it got displayed the first time. .maybe the loader gets triggered before the picker is fully rendered on IE? (setalloweddates checks, if the the component is already rendered and decides to update the viewport or not. I guess your allowed dates will be shown correctly in IE when changing to the next/prev month (because the update-function is called again) is that true?

wm003
1 May 2008, 1:07 AM
..beside that it seems the setalloweddates method is called correctly as in IE ALL dates are disabled. In this case the only reason should be "mydate" does not contain valid date-objects for IE :-/ you should try to output the content oy "mydate" in IE to see, if it contains valid dates.

mystix
1 May 2008, 7:50 AM
there's a bug in the Date object available with the 2.1 download (thanks to yours truly :">) that might be causing this.

a fix has been supplied which may resolve your problem:
33112

aacraig
3 May 2008, 2:04 AM
I see that setEventDates() was implemented in RC3, but I can't see the results of the method call. It seems as if everything is running as expected, but I don't see the update on the calendar after running the method.

Here's my code:


var jsn = new Ext.data.JsonStore
({
url: sURL,
root: 'envelope',
id: 'id',
totalProperty: 'count',
fields: ['id', 'client_name', {name: 'date', type: 'date', dateFormat: 'Y-m-d H:i:s'}]
});
jsn.on({load: function()
{
var aDates = [];
jsn.each
(
function(rec)
{
var dat = rec.get('date');

aDates.push
({
date: new Date
(
dat.getFullYear(),
dat.getMonth(),
dat.getDate()
),
cls: "x-datepickerplus-eventdates",
txt: "some text"
});
}
);

datepickerplus.setEventDates(aDates);
}});
jsn.load();


Of course, setting eventDates in the config object works fine, but doesn't work unless the json store has finished loading before the date picker has rendered, which in my case doesn't happen.

wm003
6 May 2008, 11:16 PM
Of course, setting eventDates in the config object works fine, but doesn't work unless the json store has finished loading before the date picker has rendered, which in my case doesn't happen.

:-? it seems, datepickerplus has not been rendered when seteventdates is called. (thus the update-method is not called internally) or the submitted aDates do not contain valid Dateobjects...:-/

You my try to explicity render the datepicker before calling the jsonstore at all and/or post your response-jsonstring here, so i can test the general setEventDates function more deeply.

aacraig
7 May 2008, 12:37 AM
:-? it seems, datepickerplus has not been rendered when seteventdates is called. (thus the update-method is not called internally) or the submitted aDates do not contain valid Dateobjects...:-/

You my try to explicity render the datepicker before calling the jsonstore at all and/or post your response-jsonstring here, so i can test the general setEventDates function more deeply.

I've put together a little test scenario to illustrate the problem. As you can see, I've taken out the eventDates object in the config altogether, and am simply calling setEventDates when a button is clicked on the form.

You can uncomment the eventDates entry in the config to see that passing the same aDates array to the config object works just fine. However, passing them to setEventDates does not seem to work.



<div id="form-container"></div>

<script>
Ext.QuickTips.init();
var aDates =
[{
date: new Date(2008, 4, 5),
text: "date 1",
cls: "x-datepickerplus-eventdates"
},
{
date: new Date(2008, 4, 6),
text: "date 2",
cls: "x-datepickerplus-eventdates"
},
{
date: new Date(2008, 4, 7),
text: "date 3",
cls: "x-datepickerplus-eventdates"
}];


var dpk = new Ext.ux.DatePickerPlus
({
value: new Date(),
noOfMonth: 1,
noOfMonthPerRow: 1/*,
eventDates: function(nYear)
{
return aDates;
}*/
});

var frm = new Ext.form.FormPanel
({
title: 'My Form',
autoHeight: true,
items:
[dpk],
buttons:
[{
text: 'set dates',
handler: function()
{
dpk.setEventDates(aDates);
}
}]
});

frm.render("form-container");
</script>

jo2008
7 May 2008, 2:46 AM
Is it possible to select a time period stretching over several months using the Shift key in the Datemenu?

I found it was not working on the demo page (e.g. select April 2nd --> May 5th)

If it's not a bug because it's not a feature, do you intend on extending the functionality in order to allow selections stretching over several months with a single-month calendar like in the DateMenu?


Thanks for the great work,

lpfLoveExt
7 May 2008, 5:45 AM
Well,at the end of the method "onRender",there is the code:

"this.preSelectedDates = this.selectedDates;"
since Array is Object,after running of the code above,this.preSelectedDates points to the same Array of this.selectedDates,you bet it!:)
Then turn to the method "setSelectedDates",in the circle below:

for (var i=0,il=dates.length;i<il;i++) {
d = dates[i];
dt = d.clearTime().getTime();
if (this.preSelectedDates.indexOf(dt)==-1) {
this.preSelectedDates.push(dt);
this.selectedDates.push(d);
}
}
once runned,the two expressions in purple will push two different values to the same Array!
I think it's a bug.Appreciate your reply!~o)

wm003
7 May 2008, 11:54 AM
I think it's a bug.Appreciate your reply!~o)

:"> Yep, you are so right....i need to do a correct cloning of the selectedDates array in onRender.

I'll update the code asap. Thanks for reporting!

wm003
7 May 2008, 12:01 PM
Is it possible to select a time period stretching over several months using the Shift key in the Datemenu?

I found it was not working on the demo page (e.g. select April 2nd --> May 5th)

If it's not a bug because it's not a feature, do you intend on extending the functionality in order to allow selections stretching over several months with a single-month calendar like in the DateMenu?


Currently this is only possible for months that are also displayed at once (so your example works on the fixedbig picker on the right of the demopage), but i think your suggestion is a useful feature and i'll try to add it in the next update. Thanks for suggestion.:)

wm003
7 May 2008, 12:50 PM
I've put together a little test scenario to illustrate the problem. As you can see, I've taken out the eventDates object in the config altogether, and am simply calling setEventDates when a button is clicked on the form.

You can uncomment the eventDates entry in the config to see that passing the same aDates array to the config object works just fine. However, passing them to setEventDates does not seem to work.


Ok, I found the bug and fixed it.:D Thanks for the bugreport. I will upload a new version tomorrow (well, thats in a few hours (not counting sleep...(what is sleep?)) anyway.~o)

aacraig
11 May 2008, 8:41 AM
Ok, I found the bug and fixed it.:D Thanks for the bugreport. I will upload a new version tomorrow (well, thats in a few hours (not counting sleep...(what is sleep?)) anyway.~o)

:)

Did the new code get uploaded? I downloaded the zip from the first post, but I still get the same error as before :(

WhiteRussian
12 May 2008, 5:16 AM
Hi wm003!

cool component, thanx!
I found something like a bug or feature :) Could you consult me?

I use DatePickerPlus with following code


var dpp = new Ext.ux.DatePickerPlus({
usePickerPlus: true,
noOfMonth: 1,
multiSelection: true,
startDay: 1
});

All OK, the calendar renders with Monday as first date of week, weeks selection works. When I select one week (for example 20, in month May), it selects all days in range from 12 to 18 May (its right!), BUT when I click next month and back to May the selection changed to the from 18 to 24 May. Its wrong for startDay =1 (but right for stratDay=0).

what can I do?

wm003
12 May 2008, 6:05 AM
:)

Did the new code get uploaded? I downloaded the zip from the first post, but I still get the same error as before :(

yo, i haven't uploaded yet, because i'm implementing a few new requested features and need to test them a bit more...please stay tuned, i try to upload the code asap~o):)

wm003
12 May 2008, 6:25 AM
All OK, the calendar renders with Monday as first date of week, weeks selection works. When I select one week (for example 20, in month May), it selects all days in range from 12 to 18 May (its right!), BUT when I click next month and back to May the selection changed to the from 18 to 24 May. Its wrong for startDay =1 (but right for stratDay=0).

Thanks for reporting this.:) It's in fact a doublebug. the getFirstDateOfWeek and some calls to it was incorrect. I will upload a corrected version together with several other reported fixes and requested feature hopefully until tomorrow.

WhiteRussian
12 May 2008, 10:59 PM
I will upload a corrected version together with several other reported fixes and requested feature hopefully until tomorrow.
thanks, very fast! I will wait for new release :)

WhiteRussian
13 May 2008, 12:44 AM
I create language-file for Russian locale and with Russian holidays, try it

wm003
13 May 2008, 12:56 AM
I create language-file for Russian locale and with Russian holidays, try it

Thank you very much!:D i'll add it to the upcoming release.

WhiteRussian
13 May 2008, 1:24 AM
Thanks for reporting this.:) It's in fact a doublebug. the getFirstDateOfWeek and some calls to it was incorrect. I will upload a corrected version together with several other reported fixes and requested feature hopefully until tomorrow.

Hmm. When I connect an locale file for ExtJS ( ext-lang-ru.js ) the bug is gone away...

wm003
13 May 2008, 1:32 AM
Hmm. When I connect an locale file for ExtJS ( ext-lang-ru.js ) the bug is gone away...

yes, because the old routine took the startDay Parameter from the local Files if nothing is delivered to the getStartOfWeek function (which was the case) and ignored any given startday to the widget itself. That was the reason i didn't realized the bug before (because i was shamely testing in only one language....:">)

methodz
17 May 2008, 4:14 PM
I am having some issues with getting either the confnig or the setEventDates functions. i get no errors but i still see no results, are there default properties I have to set? I am using the calendar with one month, very basic setup.

wm003
18 May 2008, 10:43 AM
I am having some issues with getting either the confnig or the setEventDates functions. i get no errors but i still see no results, are there default properties I have to set? I am using the calendar with one month, very basic setup.
This is fixed by the upcoming update.

i still need to fully test the new range select routine which support hidden months, but everything else works so i expect the update to release soon (yes, i already said that a few days ago, but i really had issues which i dont want you to get mad with:)..)

wm003
20 May 2008, 3:34 AM
ok, here's the promised update. I hope you all will get satisfied..:D

Enhancements in short:
(see first post (http://extjs.com/forum/showthread.php?p=148587#post148587)for full release notes, download and updated demopage (http://www.lubber.de/extjs/datepickerplus)):

- DateFieldPlus now also supports multiselection (thanks to Nohcs777)
- Range selection is now also possible for a wider period than only the visible months (suggested by jo2008)
- New Previous/Next Year Buttons and ability to disable the monthpicker
- Added KeyNavigation and selection of dates
- Ability to show a Letter instead of the current date if a date has been disabled
- Added russian locale (thanks to WhiteRussian)
- BUGFIX: setEventDates did not update the viewport (reported by aacraig)
- BUGFIX: Array-Cloning was done in a wrong way (reported by lpfLoveExt)
- BUGFIX: weekselection was wrong when a different startDay was given (reported by WhiteRussian)

Try DateField #3 on the Demopage for all new features

Have fun..

mask_hot
2 Jun 2008, 1:28 PM
Hello,

great Extension!!

should it be possible to use setEventDate as this :

setEventDate(arDate, arText, arCls)

?

arDate and arText would be extract from a store like this :
var arDate = this.store.collect('date_event');
var arText = this.store.collect('text_event');

and arCls would be fixed or extract from the store too (if there are different kind of events)...

Thanks in advance

wm003
2 Jun 2008, 9:17 PM
Hello,

great Extension!!

should it be possible to use setEventDate as this :

setEventDate(arDate, arText, arCls)



this can already be achieved as follows:



//adjust this to the id of the Datepickerplus-Component
var dpp = Ext.getCmp('myDatepickerplus');

/*
init the eventDates Function to return an internal fixed Array called "edArray", that can be changed outside
*/
dpp.setEventDates([]);

//Add a Date as desired
dpp.edArray.push({
date: arDate,
text: arText,
cls: arCls
});

//update the viewport if rendered
if (dpp.rendered) {
dpp.update(dpp.activeDate);
}

aacraig
8 Jun 2008, 5:41 AM
ok, here's the promised update. I hope you all will get satisfied..:D


Thanks wm003, this is really a fabulous extension. I have incorporated it into a day planner extension which I will post here as soon as I clean it up a bit :)

I now see the setEventDates() function works perfectly!

Thanks again for the great work!

aacraig
11 Jun 2008, 6:52 AM
I have discovered a problem in the CSS class handling when calling setDates().

If I create an array of dates and then send them to setDates() as follows



var aDates =
[
{date: new Date(2008, 1, 1), text: "date 1", cls: "hilight-1"},
{date: new Date(2008, 1, 2), text: "date 2", cls: "hilight-2"}
];

cal.setDates(aDates);


when the calendar is re-drawn, the <td> element for both cells now contain a reference for both classes:



<td class="x-date-active hilight-1 hilight-2" id="ext-gen121" title="">
<a tabindex="1" class="x-date-date" hidefocus="on" href="#">
<em>
<span id="ext-gen61">12</span>
</em>
</a>
</td>


I've tried to step through to see where the problem lies, and I believe it's on or around line 1183/1184:



if(cal.eventDatesNumbered[2][foundday]!==""){
eCell.addClass(cal.eventDatesNumbered[2]);


In Firebug it looks like after the class is added, the cell now has both classes associated.

wm003
11 Jun 2008, 10:46 PM
1.1 Final released:

Demopage (http://www.lubber.de/extjs/datepickerplus) and first Post for Downloads (http://extjs.com/forum/showthread.php?p=148587#post148587) have been updated

- added config "allowMouseWheel" to generally turn on/off Mousewheelsupport (suggested by boraldo)
- added event "beforemousewheel" to be able to temporary disable the mousewheel if desired
- added event "beforemaxdays" to be able to cancel the default MessageBox but do something on your own instead
- Implemented fix for xdatefield code to support applyTo Config (thanks to mystix)
- updated russian local (thanks to WhiteRussian)
- BUGFIX: updating eventclasses (and others) could result in wrong class-definition per cell (reported by aacraig)

aacraig
12 Jun 2008, 12:31 AM
[B]1.1 Final released:

- BUGFIX: updating eventclasses (and others) could result in wrong class-definition per cell (reported by aacraig)

Sorry to report that the error doesn't seem to be fixed yet.

I've put together a test page to demonstrate the problem. I hope you find it useful.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DatePickerPlus test page</title>
<link rel="author" title="Aaron Craig" href="mailto: software@aaroncraig.com (Aaron Craig) ">
<link rel="stylesheet" type="text/css" href="javascript/ext-2.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="javascript/ext-2.1/resources/css/xtheme-gray.css" />
<link rel="stylesheet" type="text/css" href="javascript/ext-2.1/ux/ext.ux.datepickerplus/cc.css" />
<script src="javascript/ext-2.1/adapter/ext/ext-base.js"></script>
<script src="javascript/ext-2.1/ext-all-debug.js"></script>
<script src="javascript/ext-2.1/patches.js"></script>
<script src="javascript/ext-2.1/ux/ext.ux.datepickerplus/ext.ux.datepickerplus-min.js"></script>
<style>
.class_1
{
background-color: blue;
}

.class_2
{
background-color: red;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
<script>
var cal = null;

Ext.onReady(function()
{
Ext.QuickTips.init();
cal = new Ext.ux.DatePickerPlus
({
value: new Date(),
minDate: new Date(),
noOfMonth: 2,
noOfMonthPerRow: 2,
showWeekNumber: true,
showActiveDate: true,
listeners:
{
render: function(){ set_dates() }
}
});
cal.render('calendar');
});

function set_dates()
{
var aDates =
[{
text: 'date 1',
cls: 'class_1',
date: new Date(2008, 6, 20)
},
{
text: 'date 2',
cls: 'class_2',
date: new Date(2008, 6, 21)
}]
cal.setEventDates(aDates);
}
</script>
</html>


As you can see, the expected result is that the first square on 20 June has a blue background, and the second cell on 21 June has a red one. Instead, they are both red and if you examine both elements in Firebug, you can see that both <td> element contains both class names in its class attribute.

wm003
12 Jun 2008, 2:34 AM
Sorry to report that the error doesn't seem to be fixed yet.


I updated the first post, please try again. I could swear i already patched it...somehow i didn't save the code before ...:">

aacraig
12 Jun 2008, 6:11 AM
I updated the first post, please try again. I could swear i already patched it...somehow i didn't save the code before ...:">


It works!

Thanks very much for your quick response.

wm003
13 Jun 2008, 3:17 AM
Please re-Download the zip from the first post. There was still some little Bug left. As its very minor, it hasn't got a new Version Number so still says 1.1 Final.

andreabat
24 Jun 2008, 5:43 AM
Hi,
here's the italian locale if anyone needs it..
Ciao

wm003
24 Jun 2008, 11:13 AM
Hi,
here's the italian locale if anyone needs it..
Ciao
B) Thank you very much!

descheret
25 Jun 2008, 11:21 PM
Hello. Actally I do my first project including the DatePickerPlus. The most works fine but I've two questions and can't find anything in the froum:


I know how to use minDate and Max date and it works (only the allowed range is clickable) but is it also possible to lock the month and year select buttons to the allowes months only? so that it isn't possible to select or scroll into the "forbidden area"? It's not possible to click them anyway and thats good. But why should the user see the days and months? (in my case it's a range from 1st july till 31th dec 08)
this question is about the EventDates, I know how to use them and it works. But also - is there a way to remove the link from this special days. so that's possible to see them (different style) but not to click them?Thank you very much
Ronald

wm003
26 Jun 2008, 12:36 AM
I know how to use minDate and Max date and it works (only the allowed range is clickable) but is it also possible to lock the month and year select buttons to the allowes months only? so that it isn't possible to select or scroll into the "forbidden area"? It's not possible to click them anyway and thats good. But why should the user see the days and months? (in my case it's a range from 1st july till 31th dec 08)

Good suggestion! I'll implement this into the upcoming minor upgrade

this question is about the EventDates, I know how to use them and it works. But also - is there a way to remove the link from this special days. so that's possible to see them (different style) but not to click them?
i also will add this as an optional config item within the next minor version. Thanks for the suggestion.

descheret
28 Jun 2008, 2:53 AM
thanks that sounds good for me. Is there a chance for me - in-between - to find a hardcoded solution? I looked to the scripts already but can't find the right lines. I think it's part of the original Ext JS code, isn't it? At the moment I'm not 100% fit and start with this framework with the first projects. So maybe you have an idea where I can have a look for help my self a bit.

also do you know when there is the next verion of the DatePickerPlus?

Thanks a lot
ronald

descheret
2 Jul 2008, 9:55 PM
Hello,

I've managed my issue with the deactivating the EventDates, just in case anyone needs it too:

first define the config variable


/**
* @cfg {Boolean} eventDatesSelectable
* Whether the Event should be selectable or not
*/
eventDatesSelectable : true,
add the "eventDatesSelectable: true" to the rest of config vars where you define your DatePickerPlus

add new event disabled css classes (similar to disable class but different background color)



.x-date-inner .x-datepickerplus-eventdates-disabled a:hover {
background: #EB5F01;
color: #fff;
... /* more css code */
}

.x-date-inner .x-datepickerplus-eventdates-disabled a {
background: #EB5F01;
color: #ffffff;
cursor:default;
... /* more css code */
}
change this part and add the if/else to the ext.ux.datepickerplus.js



//mark dates with specific css (still selectable) (higher priority than weekends)
if (cal.eventDatesNumbered[0].length>0) {
foundday = cal.eventDatesNumbered[0].indexOf(t);
if (foundday!=-1) {
if(cal.eventDatesNumbered[1][foundday]!==""){
if(cal.eventDatesSelectable) {
var eventClass = cal.eventDatesNumbered[2][foundday];
} else {
var eventClass = cal.eventDatesNumbered[2][foundday] + '-disabled';
}
eCell.addClass(eventClass);
tiptext = (cal.eventDatesNumbered[1][foundday]!=="" ? cal.eventDatesNumbered[1][foundday] : false);
}
}
}
and finaly add the following to ext.ux.datepickerplus.js to the date click handler



if(t.dateValue && !Ext.fly(t.parentNode).hasClass("x-date-disabled") && !Ext.fly(t.parentNode).hasClass("x-datepickerplus-eventdates-disabled") ){
maybe there are better solutions - but it works :)

no I have to look to the next issue: allow only selecting and scrolling trough the allowed months and disable the prev/next month/year buttons for months before minDate and also for months later than maxDate. :-?

chemist458
13 Jul 2008, 9:14 PM
Dear wm003,
Great extension, just wondering...
Is there anyway of forcing users to select weeks only, so if u clicked on a row in the datepicker, it would select the whole week, and not the day you clicked on only?
Thanks in advance,

George

wm003
13 Jul 2008, 10:06 PM
Dear wm003,
Great extension, just wondering...
Is there anyway of forcing users to select weeks only, so if u clicked on a row in the datepicker, it would select the whole week, and not the day you clicked on only?
Thanks in advance,

George

mmh, not on the roadmap. That's why i implemented the "click on the weeknumber to select weeks"-feature. To achive this you currently need to use the "afterdateclick" event to manually create the weekselection out of the selected day.
The more easier way to "force" users to select weeks only would be to disable the single date selection at all. I will implement an option for this in the upcoming release.

chemist458
13 Jul 2008, 10:30 PM
Thanks for the answer,
I am using it to select weeks to show weekly stats in a main window containing a grid, so its best that way for me.
I thought that could be your answer, so I'm having a go right now at it, I'll post back with what I get to work, if thats helpful.
Thanks again
George

sasho
14 Jul 2008, 9:36 AM
Hi:
Your extension is exactly what I need for a project. Thanks for your work!!

I am running into some troubles when using the following listeners:

"beforeyearchange"
"afteryearchange"
"beforemonthchange"
"aftermonthchange"

Basically, the event is executed. However, the event get fired again and again, rather than just once.

For example: when I define the following listener:


listeners:{'afteryearchange':function(){ alert('changed year'); }}

I would get a popup over and over again, and the year changes more than once too.
I tried with Firefox on Windows and linux, as well as IE6, and I get the same behavior with all of those.


Thanks in advance for your help :) My goal is to update/change the allowedDates array with the result from an Ajax call, when a month or a year gets changed.

chemist458
14 Jul 2008, 5:55 PM
Dear wm003,
I thought I would post this as it maybe helpful, I have added to the afterdateclick event as you advised.
It works, see what you think.


listeners: {
afterdateclick: function(dp, date){
var startdate = new Date(dp.lastSelectedDate);//use this to check whats been clicked
var firstday = new Date(date).getFirstDateOfWeek(dp.startDay);//get the first day of week date
var lsdCell = dp.lastSelectedDateCell.split("#");//needed for the daycell value
var tmpMonthCell = parseInt(lsdCell[0],10);
var tmpDayCell = parseInt(lsdCell[1],10);
if(tmpDayCell < 7){//set the start cell to select
var s = 0;
}else if(tmpDayCell > 6 && tmpDayCell < 14){
var s = 7;
}else if(tmpDayCell > 13 && tmpDayCell < 21){
var s = 14;
}else if(tmpDayCell > 20 && tmpDayCell < 28){
var s = 21;
}else{
var s = 28;
}
for (var i = 0; i < 7; i++) {//loop through and select them all
var nextday = firstday.clearTime().add(Date.DAY, i);
if(nextday.getElapsed(startdate) !== 0){//check for sameday value
dp.markDateAsSelected(nextday,true,0,s+i,true);
}
}
}
}


Thanks for the pointer before

George

wm003
14 Jul 2008, 9:03 PM
Hi:
However, the event get fired again and again, rather than just once.


That might be the issue because of the KeyListener and/or clickrepeater.
As you need to click away the alert-box, try something similar by using the firefox console instead of an alert box. I guess, it won't get fired that often anymore then.



listeners:{
'afteryearchange':function(){
console.log('changed year');//that basically only works in Firefox
}
}

sasho
15 Jul 2008, 6:21 AM
As you need to click away the alert-box, try something similar by using the firefox console instead of an alert box. I guess, it won't get fired that often anymore then.



listeners:{
'afteryearchange':function(){
console.log('changed year');//that basically only works in Firefox
}
}


Will do, thanks for the tip :)

sasho
18 Jul 2008, 2:12 PM
Will do, thanks for the tip :)

It worked indeed, thanks :)

Now, is there a way to get the new value(s) for the month and year, as a result of the occurence of a year or a month-associated event? (for example, afteryearchange or beforeyearchange )

wm003
20 Jul 2008, 5:58 AM
Now, is there a way to get the new value(s) for the month and year, as a result of the occurence of a year or a month-associated event? (for example, afteryearchange or beforeyearchange )


When the month AND Year have changed 2 both events will be fired (monthchange and yearchange) and they deliver the old and new selected values.

according to the docs of post#1:"beforemonthchange"
Called with pickerobject, oldStartMonth, newStartMonth

"aftermonthchange"
Called with pickerobject, oldStartMonth, newStartMonth

"beforeyearchange"
Called with pickerobject, oldStartYear, newStartYear

"afteryearchange"
Called with pickerobject, oldStartYear, newStartYear

sasho
20 Jul 2008, 8:48 PM
When the month AND Year have changed 2 both events will be fired (monthchange and yearchange) and they deliver the old and new selected values.

according to the docs of post#1:"beforemonthchange"
Called with pickerobject, oldStartMonth, newStartMonth

"aftermonthchange"
Called with pickerobject, oldStartMonth, newStartMonth

"beforeyearchange"
Called with pickerobject, oldStartYear, newStartYear

"afteryearchange"
Called with pickerobject, oldStartYear, newStartYear
Thanks again for your help, the following allows me to retrieve the changed year (or month) value:

...
listeners:{
'afteryearchange': function(datePickerPlusObj,oldYear,changedYear){
colsole.log(changedYear);}
},
...

If there's a better way, please let me know :)

hirenb
21 Jul 2008, 10:52 PM
Hi I am using datepickerplus,

I am using allowedDates as following:
allowedDates: [new Date(2008,7,1)] but i want to use for loop inside allowedDates to create multiple dates.

is there any way to do this thing.

evant
21 Jul 2008, 10:57 PM
You just need to pass it an array.



var d = [];
for (;;)
d.push(new Date());

allowedDates: d

sasho
28 Jul 2008, 8:33 PM
How can I update the minDate and maxDate attributes for a DateFieldPlus component, based on an event in a ComboBox, for example?

To illustrate, I have the following in a FieldSet:

items = [new Ext.form.ComboBox({
name: 'datatype',
fieldLabel: 'Product',
store: dataInfo,
valueField: 'value',
displayField:'formText',
emptyText:'Select a state...',
width:190,
mode: 'local',
triggerAction: 'all',
editable: 'false',
lazyRender: true,
value:dataInfo.getAt(0).get('formText'),
listeners:{'select': function(thisSelect,curentRecord{
Ext.getCmp('dateField').setMinDate(curentRecord.get('minDate'));
Ext.getCmp('dateField').setMaxDate(curentRecord.get('maxDate'));
}}
})
, new Ext.ux.form.DateFieldPlus({
fieldLabel: 'Date',
name: 'datestamp',
id: 'dateField',
minValue: new Date('2001/01/01'),
maxValue: new Date('2009/01/01'),
width:190
});]It seems that I cannot access the setMinDate and setMaxDate functions in DatePickerPlus, since I keep getting
Ext.getCmp("dateField").setMinDate is not a function. I realise that 'dateField' is a DateFieldPlus instance, but at the moment I cannot see a way to access its' DatePickerPlus. Any ideas?

wm003
29 Jul 2008, 12:16 AM
It seems that I cannot access the setMinDate and setMaxDate functions in DatePickerPlus, since I keep getting
Ext.getCmp("dateField").setMinDate is not a function. I realise that 'dateField' is a DateFieldPlus instance, but at the moment I cannot see a way to access its' DatePickerPlus. Any ideas?

The methods apply to the underlying pickerobject, not the datefield itself. i agree its a bit annoying. Writing a wrapper for all methods will be a bit oversized.

Anyway, try this to gain access to the methods:


Ext.getCmp("dateField").menu.picker.setMinDate()

sasho
29 Jul 2008, 8:31 AM
try this to gain acces to the methods:


Ext.getCmp("dateField").menu.picker.setMinDate()

This works only if the datepicker has been shown first (ie, the icon next to the date field has been clicked by the user). Even in this case, however, dates prior to the new minDate value are still visible and selectable by the user (ie not grayed out).

To illustrate, here is the code with which I am testing, using firebug:

Ext.onReady(function(){

Ext.QuickTips.init();
var exDate = new Ext.ux.form.DateFieldPlus({
fieldLabel: 'blah',
id: 'myDateField',
usePickerPlus : true,
renderPrevNextYearButtons: true,
xtype: 'datefieldplus',
disableMonthPicker:true,
value: new Date(2008, 3, 30),
noOfMonth: 1,
minDate: new Date(2001,1,1),
maxDate: new Date(2009,1,1),
multiSelection: false,
showWeekNumber: false,
weekendText: 'This day is part of a Weekend',
listeners: {'select':function(dp,newDate){Ext.Msg.alert('Status', newDate);}}
});
var fs = new Ext.FormPanel({
frame: true,
title:'XML Form',
labelAlign: 'right',
labelWidth: 85,
width:340,
waitMsgTarget: true,
collapsible: true,
resizeable: true,
items: [
new Ext.form.FieldSet({
title: 'Contact Information',
autoHeight: true,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
width:190,
listeners:{'change':function(){console.log('value cnaged');
console.info(exDate);
exDate.menu.picker.setMinDate(new Date(2005,1,6));}}
}, {
fieldLabel: 'Last Name',
name: 'last',
width:190
},exDate ]})
]
});
fs.render('form-ct');
});

wm003
30 Jul 2008, 5:33 AM
This works only if the datepicker has been shown first (ie, the icon next to the date field has been clicked by the user).

ok, then also set the min/maxdate to the datefieldplus config, so it will use the values on first render of the pickerobject:


Ext.getCmp("dateField").maxValue = date;
Ext.getCmp("dateField").minValue = date;

however, dates prior to the new minDate value are still visible and selectable by the user (ie not grayed out).


This is indeed a bug. :"> Thanks for reporting. I will upload the next revision of DatePickerPlus later this week. The reported issue will be fixed then.

sasho
30 Jul 2008, 6:32 AM
This is indeed a bug. :"> Thanks for reporting. I will upload the next revision of DatePickerPlus later this week. The reported issue will be fixed then.

I hope it's easily reproduceable. I really like this extension, since i believe it is exactly what I need for the applcation that I am currently working on--it will really simplify the user experience in my opinion, since users will have to go through less steps for picking a date, using an intuitive compoment.

wm003
4 Aug 2008, 8:06 AM
New Version 1.2 released

As always grab the latest download packages from the first post (http://extjs.com/forum/showthread.php?p=148587#post148587) of this thread (remember to download with firefox).

Enjoy;)

Changelog:
- support "allowOtherMenus" Config for DateFieldPlus
- datefieldplus can be hidden by clicking the triggerbutton again in cases hiding by clicking outside isn't possible
- added config "styleDisabledDates" to be able to set custom style dates (eventdates/weekends..) on disabled dates also (suggested by descheret)
- added config "eventDatesSelectable" to disble event-dates selection if desired (even if the dates are not disabled at all) (thanks to descheret)
- added config "disableSingleDateSelection" to force user to use week- or monthselection only (suggested by chemist458)
- added config "stayInAllowedRange" when setting minDate/maxDate, this will prevent to change months outside the allowed daterange (suggested by descheret)
- added config "summarizeHeader" to add an optional global header when using multimonth display containing the month range (e.g. january 2008-october 2008)
- added italian locale (thanks to andreabat)
- FIX: setMinDate/MaxDate/DateLimits did not update the viewport properly (reported by sasho)

wm003
5 Aug 2008, 1:36 AM
New Version 1.3 supports ExtJS 2.2

(1.2 and below are not fully compatible to Ext 2.2)

updated first post (http://extjs.com/forum/showthread.php?p=148587#post148587) and demopage (http://www.lubber.de/extjs/datepickerplus) as always

stumpy_uk
5 Aug 2008, 2:12 AM
Firstly thanks for an Awesome UX, it really is very impressive.

I have a question and I feel the answer is obvious but I have had many goes and looked at the code and cannot find a way to plug in a JSON Store into the application. I can add items as an array but would like to store them in a DB and manage them in there if it is possible.

Cheers

Stumpy

wm003
5 Aug 2008, 2:24 AM
This will need a DateConverter for the JSON String, as simply Ext.decode won't create valid DateObjects out of a JSON encoded Date.

I will support JSON Encoded Dates (e.g. 2008-08-05T12:22:00) for eventDates or disabledDates in the upcoming version. It already was on the roadmap ;)
And this way you will be able to use an Ext.data.JSONStore for the mentioned datearrays in the future.~o)

gtomalesky
7 Aug 2008, 5:41 AM
First of all this is a great extension to the ExtJS product. For me it would be even better if I could get the calendar titles to show with the nice blue background. I am using 2.0 because switching to 2.2 breaks some things I don't have time to chase down. I did copy ext-base.js from 2.2 to get rid of that annoying "Ext.isArray is not a function" message, however. I attempted to use ext-all.css from that same distro but that did not make the calendars pretty. Any thoughts on this???

wm003
7 Aug 2008, 7:32 AM
For me it would be even better if I could get the calendar titles to show with the nice blue background.

This should do (customize it for your needs)


.x-date-middle,.x-date-left,.x-date-right {
background: url(../path/to/your/pickerheaderbackground.gif) repeat-x 0 0 !important;
color:#FFF !important;/* change the textcolor aswell*/
}to use the same lightblue as the daynames try this


.x-date-middle,.x-date-left,.x-date-right {
background: #dfecfb url(../images/default/shared/glass-bg.gif) repeat-x left top !important;
color:#233d6d !important;
}

gtomalesky
8 Aug 2008, 5:36 AM
Thanks wm003! I have also tried to use the defaultEventDatesCls to put a black background on event dates but it does not seem to work. What am I doing wrong?

wm003
8 Aug 2008, 6:18 AM
Thanks wm003! I have also tried to use the defaultEventDatesCls to put a black background on event dates but it does not seem to work. What am I doing wrong?

could you please provide the js code of your DatepickerPlus config and the Css Class definition?
maybe its an "!important" option needed on css or some typo in the classname? i cannot see any bug (yet) without some example code /:)~o)

gtomalesky
8 Aug 2008, 7:16 AM
Thanks for your quick reply. Here are the code snippets:

Here is the code for an editor in an EditorGridPanel:

editor: new Ext.ux.form.DateFieldPlus({
allowBlank:false,
readOnly:true,
showWeekNumber: false,
disableMonthPicker:false,
summarizeHeader:true,
noOfMonth : 3,
noOfMonthPerRow : 3,
renderPrevNextYearButtons:true,
showActiveDate:true,
format:'M-d-Y',
disabledLetter: "-",
minDate: new Date(2008, 0, 1),
//maxDate: new Date(2008, 4, 26),
width:120,
eventDatesSelectable: false,
styleDisabledDates:'blocked-dates',
defaultEventDatesCls:'blocked-dates',
eventDates : function(year) {
var dates = [
{
date: new Date(year,5,26), //will be marked every year on June 26
text: "June 26th, Greg's Birthday (Age:"+(year-1951)+")"
}

];
return dates;
}
})


and the CSS class: (shamelessly lifted from datepickerplus.css)

<style>
<!--
.blocked-dates a
{
background-color:#000000;
border:1px solid #000088;
padding:1px 4px;
}
-->
</style>

gtomalesky
12 Aug 2008, 6:10 AM
I need to be able to place a calendar for the current month in between the previous month and the next month. I have been able to do this by subtracting one month off the current month and setting that as the "value". The problem is the incoming day( from a TriggerField) is not highlighted. Is there another way to set the start month in a row of months? Thanks in advance for you help and for a great extension.

skbach
12 Aug 2008, 8:30 AM
This pertains to a multi-month picker and I am not sure whether it has been reportred or not but here goes...

When there are more than 1 row and you set the showWeekNumber to false, the succeeding rows doesn't render properly. It will have a blank column on the far right.



xtype: 'datepickerplus',
value: new Date(),
minDate: new Date(),
noOfMonth: 8,
noOfMonthPerRow: 4,
displayMask: 8,
displayMaskText: 'Please wait...',
multiSelection: true,

showWeekNumber: false,
weekendText: 'This day is part of a Weekend',

renderPrevNextYearButtons: false,
renderOkUndoButtons: false,
renderTodayButton: false,

showActiveDate: true,
summarizeHeader: true


Cheers!

P.S. Great extension!!!


Edit:

I also noticed that when setting eventDates you have to subtract one month to set the correct date. For instance, if I want to set August 5th as an event, you have to have date: new Date(2008,7,5) in order to mark August 5th as an event. If you set date: new Date(2008,8,5), it will be September 5th that will be marked as an event.

wm003
12 Aug 2008, 11:34 AM
I also noticed that when setting eventDates you have to subtract one month to set the correct date. For instance, if I want to set August 5th as an event, you have to have date: new Date(2008,7,5) in order to mark August 5th as an event. If you set date: new Date(2008,8,5), it will be September 5th that will be marked as an event.

This is pure Javascript behaviour. The date object accepts months values starting with 0.
It has nothing to do with the datepicker nor ext at all.

I dig into the other reported issue now...

EzBulka
18 Aug 2008, 2:35 PM
This is, indeed, an awesome plugin.
It would be great if you could add click-and-drag functionality to select the date range. Is that possible?

wm003
21 Aug 2008, 3:25 AM
It would be great if you could add click-and-drag functionality to select the date range. Is that possible?

I already had this on my "todo" list;)

moegal
22 Aug 2008, 4:14 AM
Can I do a select Start Date and Select End Date that will only allow 1 selection for each of the 2 calendars? I should not be able to select an end date before the start date. The calendars should probably be independent of each other in regards to scrolling.

I read thru the entire thread and saw one mention of this type of functionality but not an answer.

Great extension.

Marty

wm003
22 Aug 2008, 7:51 AM
Can I do a select Start Date and Select End Date that will only allow 1 selection for each of the 2 calendars? I should not be able to select an end date before the start date. The calendars should probably be independent of each other in regards to scrolling.

Sounds like the example from here (http://extjs.com/deploy/dev/examples/form/adv-vtypes.html)

moegal
22 Aug 2008, 10:53 AM
thanks wm003.

I was kinda looking for a start and end date in a single field, not 2 separate fields. I an use this for now though.

thanks again.
Marty

wm003
22 Aug 2008, 1:53 PM
thanks wm003.

I was kinda looking for a start and end date in a single field, not 2 separate fields.

:-? mmh,
then you could limit the selections to 2 (maxSelectionDays:2)

and check the selectDates-array after the select-event has been fired to have control of the start and enddate.
another way would be to use strictRangeSelect: true and also react on the select-event afterwards to get the first and last selected dates out of the selectedDates propertyTo limit the selectable area just use minDate and maxDate

moegal
23 Aug 2008, 7:11 AM
I did not realize I could do that. Thanks!
Marty

skbach
28 Aug 2008, 11:48 AM
xtype: 'datepickerplus',
value: new Date(),
minDate: new Date(),
noOfMonth: 8,
noOfMonthPerRow: 4,
displayMask: 8,
displayMaskText: 'Please wait...',
multiSelection: true,

showWeekNumber: false,
weekendText: 'This day is part of a Weekend',

renderPrevNextYearButtons: false,
renderOkUndoButtons: false,
renderTodayButton: false,

showActiveDate: true,
summarizeHeader: true


I can't seem to prevent the rendering of the Today button. Has anybody else noticed or experienced this behaviour?

Thanks!

wm003
28 Aug 2008, 12:50 PM
I can't seem to prevent the rendering of the Today button. Has anybody else noticed or experienced this behaviour?

Thanks!

This happens since Ext 2.2 as Ext 2.2 has its own config item "showToday" (and its true by default) for this option

use


showToday: false,

in addition to the mentioned config and it works.

skbach
28 Aug 2008, 1:21 PM
Thanks a lot wm003!!!

tagsum
28 Aug 2008, 4:16 PM
wm003. I love your script. It was exactly what I was looking for, for a date range selector. One thing I did have a question about: Is there any way to have a 3 column calendar view start on a different month other than the current month? In this case, have the 3 column calendar start in June, instead of August.

Since this date range selector won't let you choose a date in the future, there's no need to show September and October.

Any help?

skbach
28 Aug 2008, 5:40 PM
Hi there again!

I dunno if it's just me but I'm getting this error when I'm setting the max & min Date...

d_start.setMaxDate is not a function



var d_start = new Ext.ux.form.DateFieldPlus({
usePickerPlus: true,
fieldLabel: 'Start Date',
msgTarget: 'qtip',
name: 'dtStartDate'
});

d_start.setMaxDate(new Date());


Thanks again for the help!

wm003
29 Aug 2008, 6:49 AM
Hi there again!

I dunno if it's just me but I'm getting this error when I'm setting the max & min Date...

d_start.setMaxDate is not a function


This has already been asked. See post 137 (http://extjs.com/forum/showthread.php?p=201073#post201073) of this thread for the answer

skbach
29 Aug 2008, 6:59 AM
My eyes are probably tired and I missed that post. Thanks again!

wm003
29 Aug 2008, 7:56 AM
Is there any way to have a 3 column calendar view start on a different month other than the current month? In this case, have the 3 column calendar start in June, instead of August.

Altering the activeDate Object can be used for this:


var dpp = Ext.getCmp('myDatepickerplus');

if (dpp.rendered) {
dpp.update(new Date(2008,6,1));
}

tagsum
29 Aug 2008, 9:40 AM
No suck luck wm003. I am instantiating the DatePickerPlus in a Toolbar by using usePickerPlus: true. Using:


listeners: {
render: function()
{
var dpp = Ext.getCmp('analyticsDateRange');

if (dpp.rendered)
{
dpp.update(new Date(2008,6,1));
}
}
},


In the config options for the toolbar button, I get:


dpp.update is not a function

tagsum
1 Sep 2008, 12:59 PM
Okay. I figured it out by checking firebug for what the object actually looks like on render.

Here's what I've done:



},'->',{
id: 'DateRangeMenu',
menu: new Ext.menu.DateMenu({
id: 'DateRange',
fillupRows: false,
listeners: {
render: function(obj)
{
if (obj.component)
{
obj.component.update(new Date("July 1, 2008"));
}
}
},
maxDate: new Date("September 1, 2008"),
maxSelectionDays: 90,
multiSelection: true,
noOfMonth: 3,
selectedDates: SelectedDates,
strictRangeSelect: true,
usePickerPlus: true
}),
text: 'Date Range: <span class="startDate"><b>Aug 02, 2008</b></span> - <span class="endDate"><b>Sep 01, 2008</b></span>'

wm003
1 Sep 2008, 11:04 PM
Ah, sure, DateMenu and DateField have the DatepickerPLus as a subcomponent. I thought you were talking about "pure" Dtepickerplus only:)

sirtimbly
2 Sep 2008, 1:04 PM
Is there some way to modify the calendar rendering to not show duplicate date selection. I have an 8 month calendar set up, and when people select dates at the beginning or the end of a month those dates show up as selected in the preceding or following months also. It seems that the calendars are each a seperate "view" into the same big data table, I'd rather just have the calendar only show the specific dates for that month and show nothing at all (selected or otherwise) for the days that are adjacent to that month.

Is there a setting for this, or do I need to dig into the component code, or the DatePicker code?

wm003
2 Sep 2008, 1:07 PM
Is there some way to modify the calendar rendering to not show duplicate date selection. I have an 8 month calendar set up, and when people select dates at the beginning or the end of a month those dates show up as selected in the preceding or following months also. It seems that the calendars are each a seperate "view" into the same big data table, I'd rather just have the calendar only show the specific dates for that month and show nothing at all (selected or otherwise) for the days that are adjacent to that month.

Is there a setting for this, or do I need to dig into the component code, or the DatePicker code?
There currently is no option for that, but it's a very good suggestion so i take that on the roadmap for the next version.

sirtimbly
2 Sep 2008, 1:20 PM
Perhaps I spoke too soon, this css rule seems to do what I need. The days are completely invisible as well as unselectable, but this works for me.

.x-date-pickerplus .x-date-nextday, .x-date-pickerplus .x-date-prevday {
visibility:hidden;
}

Thanks anyways, but the default behavior still seems very odd to me and my client as well, might still be a good property to code for.

wm003
3 Sep 2008, 1:53 AM
Perhaps I spoke too soon, this css rule seems to do what I need. The days are completely invisible as well as unselectable, but this works for me.

.x-date-pickerplus .x-date-nextday, .x-date-pickerplus .x-date-prevday {
visibility:hidden;
}



:-? Even if this will visually work, i'm going to create an option for disabling this codeside (less JS-Code need to be done when selecting dates or rendering new months. It should run a bit faster then.

wm003
3 Sep 2008, 1:54 AM
Thanks to user walldorff :D there is a Dutch locale available. See first Post for updated language-file.

CR_RedFox
3 Sep 2008, 4:10 PM
Hi,
This calendar control is great, but I'm wondering if it could be tweaked to allow entry and display of just month/year (localised). Optionally it might store the 1st day (but not show it) so that it can still pass a valid date back to a database.

The context for this is actually quite common, when you are asking people for example to remember dates of travel, or training courses that they attended - you can often get "June 2006" but people are hard pressed to remember the exact day.

The other thing I thought the calendar could do is display durations and elapsed or relative times (eg 10 mins, 2hours ago).

Regards,
Fox

mask_hot
5 Sep 2008, 3:33 AM
This will need a DateConverter for the JSON String, as simply Ext.decode won't create valid DateObjects out of a JSON encoded Date.

I will support JSON Encoded Dates (e.g. 2008-08-05T12:22:00) for eventDates or disabledDates in the upcoming version. It already was on the roadmap ;)
And this way you will be able to use an Ext.data.JSONStore for the mentioned datearrays in the future.~o)


Hi, do you have an estimated release date for these enhancements? :D

thanks a lot

thoreking
19 Sep 2008, 6:32 AM
Hi,

really nice extension!
I use it for a diary and all is fine as long as the datepicker is used to perform action.

But I would like to find a method that select a day or a week or a whole month by passing a date.
I can not find a way to replace the click to select a particular week or a month by a call knowing the week or the month.
The same for a day : the update(date) method just update the month but don't highlight the day mentionned in it.

Any advise would be great.

Thanks

T.

wm003
19 Sep 2008, 7:30 AM
Hi, do you have an estimated release date for these enhancements?


"When it's done";) I'm very busy coding my upcoming widget.




But I would like to find a method that select a day or a week or a whole month by passing a date.
I can not find a way to replace the click to select a particular week or a month by a call knowing the week or the month.

you might use setSelectedDates() for this purpose:

some quick untested code...


function getAllDatesOfAMonth(date) {
var monthdates = [];
for (var i=date.getFirstDateOfMonth().getTime(),il=date.getLastDateOfMonth().getTime();i<il;i=i+86400000) {
monthdates.push(new Date(i));
}
return monthdates;
}
function getAllDatesOfAWeek(date) {
var weekdates = [];
for (var i=date.getFirstDateOfWeek().getTime();i<7;i=i+86400000) {
weekdates.push(new Date(i));
}
return weekdates;
}

var mdpp = Ext.getCmp("mydatepickerplus");
//select all dates of september 2008
mdpp.setSelectedDates(getAllDatesOfAMonth(new Date(2008,8,1)));

//select all dates within the week containing September 22nd, 2008
mdpp.setSelectedDates(getAllDatesOfAWeek(new Date(2008,8,22)));Maybe it's worth to implement this little code as additional methods to datepickerplus :-?



The same for a day : the update(date) method just update the month but don't highlight the day mentionned in it.


Right, that's because the parameter given to the update-function is only needed to declare the month from which the picker starts rendering and to define a date for keynavigation, but not to select it.Again, use setSelectedDates(new Date(2008,8,1))in this case

thoreking
19 Sep 2008, 7:44 AM
woow

you rule mate ! just the top-banana answer I was looking for.

Thanks a lot.

thoreking
19 Sep 2008, 8:18 AM
the correct code :


function getAllDatesOfAMonth(date) {
var monthdates = [];
for (var i=date.getFirstDateOfMonth().getTime(),il=date.getLastDateOfMonth().getTime();i<=il;i=i+86400000) {
monthdates.push(new Date(i));
}
return monthdates;
}
function getAllDatesOfAWeek(date) {
var weekdates = [];
for (var i=date.getFirstDateOfWeek().getTime()+86400000,il=i+6*86400000;i<=il;i=i+86400000) {
weekdates.push(new Date(i));
}
return weekdates;
}

I add 86400000 in the getFirstDateOfWeek because my week start a monday..
please replace by the right value from startDay...

Thanks again for this superb addon..

T.

wm003
19 Sep 2008, 9:25 AM
I add 86400000 in the getFirstDateOfWeek because my week start a monday..
please replace by the right value from startDay...


You don't need to correct the weekdate (in fact it will be wrong calculated if you include an ext-locale with a startday set to !=0 ), because the method getFirstDateOfWeek is not part of the ext-library (yet) but is declared in my datepickerplus and it already takes care of the defined startday of the localized datepicker-object.

But, to be sure, you can pass the startday of your choice


//this will definately calculate monday as the first date of the week, no matter what ext-local is loaded
var myd = date.getFirstDateOfWeek(1);

aaronchiang
16 Oct 2008, 7:29 PM
as title, thanks

wm003
16 Oct 2008, 9:24 PM
how to disable weekends?


disabledDays: [0,6]

joshuabco
7 Nov 2008, 2:35 PM
Hi, congratulation for a excelent extension... I have a question, how can I load event dates to calendar from server (jsp, php ....) if I use JSON, by ajax request It cant be done because is async... so how can load into eventDates an array from server of dates when the page is loading? or loaded?... thanks in advance...

netnoise
24 Nov 2008, 4:37 AM
Hi,

is it possible to use Ext.ux.form.DateFieldPlus as a grid editor? Hadn't much success trying it (picker appeared but selection didn't work).

stumpy_uk
25 Nov 2008, 3:02 PM
Top Extension....

I am struggling with Multiple selections on the UX, do you have any code examples as all attempts by me to use selectedDates but it just returns blank each time even though I have selected a lot of entries ?

Many Thanks

Stumpy

wm003
26 Nov 2008, 2:03 AM
I am struggling with Multiple selections on the UX, do you have any code examples as all attempts by me to use selectedDates but it just returns blank each time even though I have selected a lot of entries ?


have you tried/examined the Datemenu 1 examples on the demopage (http://www.lubber.de/extjs/datepickerplus)? It should do what you expect.

Hunyi
28 Nov 2008, 4:42 AM
The updateHidden function in case of multiselect worked not properly, because it returned the getValue function array, which couldn't be handled properly by the formatHiddenDate, and several times the hiddenField did not deliver the proper value format of submitFormat.





I made a patch, you can use it, if you'd like to:


updateHidden:function(date) {
var field = this;
if (Ext.isArray(date)) {
var formatted = [];
Ext.each(date, function(item, index, array) {
formatted.push(field.formatHiddenDate(item));
});

var value = formatted.join(this.multiSelectionDelimiter);
this.hiddenField.dom.value = value;
} else {
//before:this.hiddenField.dom.value = this.formatHiddenDate(this.getValue());
//patched by Hunyi 2008.11.28
var value = this.getValue();
if (Ext.isArray(value)) {
var formatted = [];
Ext.each(value, function(item, index, array) {
formatted.push(field.formatHiddenDate(item));
});

var value = formatted.join(this.multiSelectionDelimiter);
this.hiddenField.dom.value = value;
} else {
this.hiddenField.dom.value = this.formatHiddenDate(value);
}
}
}

wm003
28 Nov 2008, 9:48 AM
I made a patch, you can use it, if you'd like to:


Thanks, i updated the code. With some more features and bugfixes a new version will be out in a couple of days ...hopefully;)

mask_hot
15 Dec 2008, 4:50 AM
Thanks, i updated the code. With some more features and bugfixes a new version will be out in a couple of days ...hopefully;)

can't wait... :)

wm003
19 Dec 2008, 2:39 AM
how can I load event dates to calendar from server (jsp, php ....) if I use JSON, by ajax request It cant be done because is async... so how can load into eventDates an array from server of dates when the page is loading? or loaded?...

Use the method "setEventDates" right after the Ajax.Request returns on the given datepickerplus.



is it possible to use Ext.ux.form.DateFieldPlus as a grid editor? Hadn't much success trying it (picker appeared but selection didn't work).


never tried that before... i'll take a look at it.

nromanel
13 Jan 2009, 11:53 AM
When displaying standalone, what's the easiest way to have today's date selected on load?

Thanks!

dubdub
19 Jan 2009, 4:12 AM
Hi,

My little contribution for datepickerplus : a french locale file (with french holidays) :)
I didn't find it, so i translate it.
I wish there is no mistake.

A little question to finish :
I would like to select one day, one week or one month, but I don't want the user to be able to select multiple days or multiple weeks ... is it possible, by configuration options ?

thank you for your answer and for this awesome datepicker extension ! ;)

wm003
20 Jan 2009, 11:50 PM
My little contribution for datepickerplus : a french locale file (with french holidays)

Thank you very much for this contribution to DatepickerPlus :)



A little question to finish :
I would like to select one day, one week or one month, but I don't want the user to be able to select multiple days or multiple weeks ... is it possible, by configuration options ?


well, you could only limit the amount of selectable Days by


maxSelectionDays: 7 //for week selection

you could use that in combination with the afterdateclick,afterweekclick and aftermonthclick events to dynamically change the maxSelectionDays-property.

some quick untested code:


listeners: {
afterdateclick: function(dpp,date,wasselected) {
if (wasselected) {
dpp.maxSelectionDays=1;
}
else {
//prepare for a upcoming possible monthselection
dpp.maxSelectionDays=31;
}
},
afterweekclick: function(dpp,date,wasselected) {
if (wasselected) {
dpp.maxSelectionDays=7;
}
else {
//prepare for a upcoming possible monthselection
dpp.maxSelectionDays=31;
}
},
aftermonthclick: function(dpp,date,wasselected) {
dpp.maxSelectionDays=31;
}
}

wm003
21 Jan 2009, 12:05 AM
When displaying standalone, what's the easiest way to have today's date selected on load?


When the value is given as an array, multiselection is assumed and thus, the values are automatically selected, so you could try this config:


value: [new Date()]

dubdub
21 Jan 2009, 1:00 AM
well, you could only limit the amount of selectable Days by


maxSelectionDays: 7 //for week selectionyou could use that in combination with the afterdateclick,afterweekclick and aftermonthclick events to dynamically change the maxSelectionDays-property.

some quick untested code (...)


Thank you for your answer. I'm trying the code you wrote, but I have still an issue.
No problem when I select a month, then a week, then the a day ... But in the other order : I select a day, then I want to select a week, ddp alerts me that I can only select 1 day, and if I click a second time, it selects the week ... (same issue for week or day then month)

(For information, the third parameter "wasselected" was always "true", i don't know if it could help)

Thanks again for your answer !

(please, excuse me for my english, I'm french ;) )

nromanel
29 Jan 2009, 6:51 AM
When the value is given as an array, multiselection is assumed and thus, the values are automatically selected, so you could try this config:


value: [new Date()]

Thanks!

nromanel
29 Jan 2009, 7:15 AM
Hi All,

I don't understand what I'm doing wrong. I have multiSelection set to true, and I am able to select multiple dates. However when I click ok, I only see the last selected date. When I press ok, I'd expect to see all the values of the array. Why is it only retaining the last selected Date?

Any help is appreciated!


datepicker plus config:


xtype: 'datepickerplus',
id: 'datePick',
showWeekNumber: false,
markNationalHolidays: false,
noOfMonth : 1,
multiSelection: true,
showActiveDate:true,

listeners: {
select: function(date){
alert(date.getValue());
}
}

wm003
30 Jan 2009, 3:15 AM
In case of multiselection "date" will return an Array instead of a single date-object


select : function(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('M j, Y'));
}
else {
Ext.each(date,function(c){
allStringDates.push(c.format('M j, Y'));
},this);
}
Ext.MessageBox.alert('Date(s) Selected', 'You have chosen the following day(s):<br>'+allStringDates.join('<br>'));
}

nromanel
30 Jan 2009, 6:30 AM
Hmm, When I use your code, I get:

c.format is not a function
allStringDates.push(c.format('M j, Y'));

How can I access the array outside of the datepicker. How can I grab the array from another function on my page?

ext.getCmp('datePicker').getvalue();

That again, only gives me the last selected date, and not an array

Thanks for the help!

nromanel
30 Jan 2009, 6:40 AM
Hmm, When I use your code, I get:

c.format is not a function
allStringDates.push(c.format('M j, Y'));

How can I access the array outside of the datepicker. How can I grab the array from another function on my page?

ext.getCmp('datePicker').getvalue();

That again, only gives me the last selected date, and not an array

Thanks for the help!

By placing your code in a handler as opposed to a listener... it worked!!! Thanks,

But how do i access the values outside of the object? From another function.

Cheers!

mask_hot
31 Jan 2009, 2:29 PM
Hello,

do you have any release date for the 1.4 with the store functionnality? :">

thx a lot.

wm003
1 Feb 2009, 8:40 AM
Hello,

do you have any release date for the 1.4 with the store functionnality? :">

thx a lot.

1.4 is nearly finished, but lacks store functionality yet....just too many values i need to support and test.

wm003
1 Feb 2009, 8:41 AM
By placing your code in a handler as opposed to a listener... it worked!!! Thanks,

But how do i access the values outside of the object? From another function.

Cheers!

Try


Ext.getCmp("mydatepickerplus").selectedDates

That should return an Array of the selected Dates

vizcano
4 Feb 2009, 3:14 AM
Hi

I'm using this extension but i cant hide 'Today' button. My code is below, anyone can help me?



var calendario = new Ext.ux.DatePickerPlus({

usePickerPlus: true, //this will fire the use of datepickerplus instead of datepicker
value: new Date(anio, 0, 01),
showActiveDate:false,
readOnly:true,
showWeekNumber: true,
allowMouseWheel:false,
noOfMonth : 12,
noOfMonthPerRow : 4,
multiSelection: false,
markNationalHolidays: true,
useQuickTips:false,
format : 'd/m/Y',
minDate: new Date(anio, 0, 1),
maxDate: new Date(anio, 11, 31),
renderTodayButton: false,
renderOkUndoButtons :false,
renderPrevNextButtons:false,
disableMonthPicker: true
});


I've also saw that in Datepickerplus demopage Datemenu1 has "renderTodayButton: false," and Today button is not hidden, is it a bug?

wm003
4 Feb 2009, 11:37 AM
Hi

I'm using this extension but i cant hide 'Today' button. My code is below, anyone can help me?
I've also saw that in Datepickerplus demopage Datemenu1 has "renderTodayButton: false," and Today button is not hidden, is it a bug?

Thanks for reporting this. This only happens since ext 2.2. Ext 2.2 has an own function to hide the today button. see post 161 (http://extjs.com/forum/showthread.php?p=215857#post215857) of this thread. Use "showToday:false;" in addition to make it work.
I will update the demopage as v1.4 will be out soon.

gtomalesky
4 Feb 2009, 12:59 PM
Hi All:

I have a 1 row three month DatePickerPlus app which works just fine until the minDate and maxDate span a year (ie. minDate=10-Dec-2008 maxDate=20-Jan-2009). When this combination is in use ALL dates are grayed-out. Has anyone else seen this problem?:(

Thanks in advance

brenda
6 Feb 2009, 1:49 AM
Hi guys,
Not sure if anyone asked this before. I was wondering if DatePickerPlus allow me to display more then 1 event if there is more then 1 event on a particular day.

If this can be done, how can I go about doing it?

:)

PS: I've tried setting 2 events with the same date, but then only the first one was displayed :(


border:false,
bodyStyle: 'padding:5px 0 0 11px;',
contentEl:'east_calendar',
items:[{
xtype: 'datepickerplus',
showWeekNumber: true,
markNationalHolidays: true,
noOfMonth: 2,
noOfMonthPerRow: 1,
fillupRows: false,
//listeners:{'afterdateclick':function(){ Ext.MessageBox.alert('test'); }} ,
eventDates: function(year) {
var dates = [{
date: new Date(2009,4,14), //fixed date marked only on 2008/01/02
text: "My cat died 7 years ago",
cls: "x-datepickerplus-eventdates"
},{
date: new Date(year,4,14), //will be marked every year on 05/11
text: "May 11th, Author's Birthday (Age:"+(year-1973)+")",
cls: "x-datepickerplus-eventdates"
}];
return dates;
}
},{
xtype: 'panel',
border: false,
height: 300,
onLoad: function(){
ListEventCalendars('east_calendar_panel');
}
}]

wm003
6 Feb 2009, 2:42 AM
Hi guys,
Not sure if anyone asked this before. I was wondering if DatePickerPlus allow me to display more then 1 event if there is more then 1 event on a particular day.

If this can be done, how can I go about doing it?

:)


The only way to make this possible would be to merge both event-texts into one:


{
date: new Date(2009,4,14),
text: "The first event<br>The second event",
cls: "x-datepickerplus-eventdates"
}
...
But i think its worth to get this implemented...it's on my ToDo List now, stay tuned! :)



Hi All:

I have a 1 row three month DatePickerPlus app which works just fine until the minDate and maxDate span a year (ie. minDate=10-Dec-2008 maxDate=20-Jan-2009). When this combination is in use ALL dates are grayed-out. Has anyone else seen this problem?:(

Thanks in advance

I'll check this out...

brenda
8 Feb 2009, 5:41 PM
thanks wm003 :)

Hope to see a new version soon

RuiDC
20 Feb 2009, 5:19 PM
It works!

Thanks very much for your quick response.

Firstly - great control! keep up the great work - hopefully i'll be able to contribute in due course.

I've read the posts with aacraig's problems (thanks for the detail, it's been incredibly helpful in helping me understand the control and ExtJS in general), and am running DPPv1.3 and ExtJS 2.2.1 on FF3, but am not seeing the freshly added date render:


<html>
<head>
<title>Introduction to DatePickerPlus</title>
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="Ext/2.2.1/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="Ext/2.2.1/resources/css/xtheme-gray.css" />
<link rel="stylesheet" type="text/css" href="Ext/2.2.1/ux/ext.ux.datepickerplus/datepickerplus.css" />
<!-- Include Ext and app-specific scripts: -->
<script src="Ext/2.2.1/adapter/ext/ext-base.js"></script>
<script src="Ext/2.2.1/ext-all-debug.js"></script>
<script src="Ext/2.2.1/ux/ext.ux.datepickerplus/ext.ux.datepickerplus.js"></script>

<script type="text/javascript">
Ext.onReady(
function()
{
Ext.QuickTips.init();
cal = new Ext.ux.DatePickerPlus
({
id: "dppTest",
value: new Date(2009, 1, 19),
noOfMonth: 1,
noOfMonthPerRow: 1,
showWeekNumber: true,
markNationalHolidays: false,
format: "Y m d",
listeners:
{
select: function(){Ext.MessageBox.alert("you selected: " + this.value); }
}
});
cal.render('myDiv');
}
);

function addEvent()
{
var dpp = Ext.getCmp('dppTest');
dpp.setEventDates([]);
dpp.edArray.push({
date: new Date(2009, 1, 25),
text: "the event",
cls: "x-datepickerplus-eventdates"
});
if (dpp.rendered) {
dpp.update(dpp.activeDate);
console.log("# of events: " + dpp.edArray.length);//or dpp.eventDates.length
}
}
</script>
</head>
<body>
<div id="myDiv"></div>
<input type="button" id="btnEvent" value="addEvent" onclick="addEvent();"/>
</body>
</html>

Thanks in advance - as i'm sure someone can point me at where i'm going wrong!

Regards,
RuiDC

wm003
21 Feb 2009, 2:57 AM
Thanks in advance - as i'm sure someone can point me at where i'm going wrong!

You need to use setEventDates with the complete Set of eventdates right now. I'm working on a better solution like using stores or at least push/pop functions for the upcoming update(s). Meanwhile simply try this:


function addEvent()
{
var dpp = Ext.getCmp('dppTest');
if(!dpp.edArray) {dpp.edArray=[];}
dpp.setEventDates(
dpp.edArray.push({
date: new Date(2009, 1, 25),
text: "the event",
cls: "x-datepickerplus-eventdates"
})
);
}

RuiDC
22 Feb 2009, 5:03 AM
Thanks for the speedy reply, but it still does not work for me; first log wites 0, second one writes 1, no errors but event date does not render:


function addEvent()
{
var dpp = Ext.getCmp('dppTest');
if(!dpp.edArray) {dpp.edArray=[];}
/*
dpp.edArray=[{date: new Date(2009, 1, 25),
text: "the event",
cls: "x-datepickerplus-eventdates" }];
*/
dpp.setEventDates(
dpp.edArray.push({
date: new Date(2009, 1, 25),
text: "the event",
cls: "x-datepickerplus-eventdates"
})
);
//console.log("event 0 in array before render: " + dpp.edArray[0].text);
if (dpp.rendered) {
dpp.update(dpp.activeDate);
console.log("# of events in array: " + dpp.edArray.length);
console.log("# of events in property: " + dpp.eventDates.length);
}
}also, tried with direct assignment ie. uncommenting the two comment blocks, this would show the array had the event, but would still not render.

does this work for you? ie. is there something wrong with my setup?

wm003
23 Feb 2009, 1:38 AM
Thanks for the speedy reply, but it still does not work for me.


Some small changes and it works:


function addEvent()
{
var dpp = Ext.getCmp('dppTest');
if(!dpp.edArray) {dpp.edArray=[];}
dpp.edArray.push({
date: new Date(2009, 1, 25),
text: "the event",
cls: "x-datepickerplus-eventdates"
});
dpp.setEventDates(dpp.edArray);
}

RuiDC
23 Feb 2009, 6:01 AM
Bingo! that was the missing piece - i see what i did wrong from that.

Many thanks!
RuiDC

dubdub
23 Feb 2009, 6:16 AM
Thank you for your answer. I'm trying the code you wrote, but I have still an issue.
No problem when I select a month, then a week, then the a day ... But in the other order : I select a day, then I want to select a week, ddp alerts me that I can only select 1 day, and if I click a second time, it selects the week ... (same issue for week or day then month)

(For information, the third parameter "wasselected" was always "true", i don't know if it could help)



I asnwer to myself: P

I finally added two events 'beforeweekclick' and 'beforemonthclick' in the datepickerplus source, and it seems to do what I want ... so ... i'm happy :D

RuiDC
3 Mar 2009, 5:19 AM
Hi,
I'm interacting with the event dates and am stuck on 2 questions:
1. if i have an event date on the same date as today, the tooltip saying "Today" takes precedence. Is there any way to change this and have my event tooltip come up instead? I've had a go with firebug here, but am lost in mountains of code.
2. Is there a better way to not display the nextdays (ie. the days visible from other months) other than overriding the styling of x-date-nextday ?

One additional question, has anyone submitted a Portuguese localiization file? If not i would like to have a go.

Regards,
RuiDC

wm003
3 Mar 2009, 5:55 AM
1. if i have an event date on the same date as today, the tooltip saying "Today" takes precedence. Is there any way to change this and have my event tooltip come up instead? I've had a go with firebug here, but am lost in mountains of code.

currently, you will need to modify the code. i will take care of that in the next version.



2. Is there a better way to not display the nextdays (ie. the days visible from other months) other than overriding the styling of x-date-nextday ?

not yet.there already was a request of being able to do this, so i'll take care of it for the upcoming version ('when it's done')




One additional question, has anyone submitted a Portuguese localiization file? If not i would like to have a go.

no, i haven't got a portuguese translation yet. I will be glad, if you are going to do this (including portuguese holidays?) ;)

laluigino
6 Mar 2009, 10:03 AM
Hi wm003!

First of all: congratulations for this wonderful extension!
I hope that you'll manage to release the new store function soon!
In fact, one of my needs is to load events dinamically for each month.

By now, following your suggestion about the addEvent function, I've written a very simple code that solve this issue, so here's what I've done:



Ext.onReady(function(){
Ext.QuickTips.init();
var datepicker = new Ext.ux.DatePickerPlus({
id: "dppTest",
renderTo: 'test',
startDay: 1,
disableMonthPicker: true,
showWeekNumber: false,
format: 'd/m/y',
listeners: {
select: function() {
// some actions here
},
aftermonthchange: function(dppObj) {
loadEvents(dppObj.activeDate.getFullYear(), dppObj.activeDate.getMonth());
},
render: function(dppObj) {
loadEvents(dppObj.activeDate.getFullYear(), dppObj.activeDate.getMonth());
}
}
});
function addEvent(obj) {
var dpp = Ext.getCmp('dppTest');
if (!dpp.edArray) {dpp.edArray=[];}
dpp.edArray.push(obj);
dpp.setEventDates(dpp.edArray);
}
function loadEvents(year, month) {
var dpp = Ext.getCmp('dppTest');
dpp.edArray=[];
Ext.Ajax.request({
url: 'test.php',
success: function(r, o) {
a = eval(r.responseText);
for (var i = 0, n = a.length; i < n; i++) {
addEvent(a[i]);
}
},
params: {
y: year,
m: month
}
});
}
});


Basically, the 'test.php' page returns an array of event objects:



[ { date: new Date(2009, 2, 29), text: "Event of 29/03/2009", cls: "x-datepickerplus-eventdates" }
, { date: new Date(2009, 2, 3), text: "Event of 03/03/2009", cls: "x-datepickerplus-eventdates" } ]


that is then evaluated.
I know that it's not the best way to achieve this, but I thought that it could be a quick solution useful for someone else.

Thanks again for this extension!

hattia
7 Apr 2009, 6:09 AM
Great extension :-)

thanks wm003,

i have one question how to simulate shift clic, what i want is to click on one start date and clic then on end date to select the range (like shift behavior, the differnce just is not to deselect the previous selection) , i explore now the function "handleDateClick" ... if you have idea it will be geat, thanks for advance (sorry of my english if it have same mistakes :-)

wm003
9 Apr 2009, 12:18 AM
...
(like shift behavior, the differnce just is not to deselect the previous selection)...

that's a bit difficult, basically there is a need not to call "this.removeAllPreselectedClasses()".

I'll give it a try for the (still delayed, sorry...) upcoming version.

hattia
9 Apr 2009, 1:16 AM
yes i have comment the call of removeAll...() to not deslect previous selected Dates .... there are also the idea to drag to achieve the purpose of range select rather than the use of shift key ... i think it is interssant..

So, Thanks still waiting for upcoming version.
last question, in the nationalHolidays function, can we imagine the case to pass not single date per object but range date (start date and end date) this is the case of school holidays for example

wm003
9 Apr 2009, 1:50 AM
last question, in the nationalHolidays function, can we imagine the case to pass not single date per object but range date (start date and end date) this is the case of school holidays for example

Good suggestion! It's on my Todo List ;)

hattia
9 Apr 2009, 3:07 AM
Good suggestion! It's on my Todo List ;)

you have a long Todo List :)

i have to manage combo witch contain a list of holidays, it will refresh the calendar switch of the selected option (show holidays A, show Holidays B, not show holidays ) i make it like this


refreshCalendar : function(holidays){
this.frHolidaysZoneA = holidays;
this.update(this.activeDate);

},

whats you think, and many thanks

stevebla
9 Apr 2009, 7:45 AM
I cant get datepickerplus to work .. no doubt due to some stupid javascript mistake of mine.
.. (DatePickerPlus looks like a very good widget btw .. exactly fills the bill for my requirement .. congrats to the developer)

I keep getting the following from firebug
"b is undefined".

If I comment out the items block where it refers to the datepickerplus xtype it displays the bare window as expected.

Using ExtJS 2.2
Any help would be much appreciated.
Thanks

Here is the code:



<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<link rel="stylesheet" type="text/css" href="datepickerplus.css">


</head>
<body>
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="ext-lang-en.js"></script>
<script type="text/javascript" src="ext.ux.datepickerplus-min.js"></script>
<script type="text/javascript" src="ext.ux.datepickerplus-lang-en.js"></script>
<script type="text/javascript">
var jslang = "EN";
Ext.QuickTips.init();
Ext.reg('datepickerplus', Ext.ux.DatePickerPlus);

task_clone_win = new Ext.Window({
modal: false,
title:'Task Cloning for date :',
id:'task_clone_window',
height:300,
width: 500,
minWidth: 300,
minHeight: 200,
draggable: true,
layout: 'fit',
plain:true,
x:75,
y:95,
border: false,
bodyBorder: false,
autoDestroy: true,
closable: true,
autoScroll: true,
bodyStyle:'padding:5px;',
layout: 'column', // Specifies that the items will now be arranged in columns
items:
[ {
xtype: 'datepickerplus',
id: 'dp',
showWeekNumber: false,
markNationalHolidays: false,
noOfMonth : 1,
multiSelection: true,
showActiveDate:true,

listeners: {
select: function(date){
alert(date.getValue());
}
}

}]

});

task_clone_win.show();

</script>

</body>
</html>

wm003
10 Apr 2009, 1:49 PM
Why do you register datepickerplus again as a xtype? It does it by itself already. Maybe Ext.reg gets a bit confused?...

anyway, have you tried not to use xtype but "new Ext.ux.DatePickerPlus" ?
Are you using the current version 1.3 of DatePickerPlus?

apimio
13 Apr 2009, 1:09 PM
The first thing ..this is an amazing extension .. congratulations....=D>

Now ..my problem maybe is very simple to you ... I Have the follow definition of a Date :



var dtSemanaPlan = new Ext.ux.form.DateFieldPlus({
id:'IDSEMANA',
fieldLabel:'SEMANA',
format:'W-Y', // <<<<- this is the formato that want to show to the user
width:200,
multiSelectByCTRL:false,
maxSelectionDays:1

});
As you see, is a very simple ..the problem is ..

1) When the user select a date it is passed to the field correctly, but when de datefield loose the focus, a new date is assigned (the current date actually) .

I'll very appreciate your help guys! :((

wm003
14 Apr 2009, 5:14 AM
When the user select a date it is passed to the field correctly, but when de datefield loose the focus, a new date is assigned (the current date actually) .

:-? Sounds like some event is fired. Please check if you have any kind of eventlisteners later added to the DateField. Maybe studying the code on the Demopage helps.

apimio
14 Apr 2009, 5:26 AM
No, is not a event problem. I did create a event "change" but it is to save the Date Year and Week to another hidden field.

Now, looking into the forum and some another threads I' found that maybe the problem is that DateField Component, change the date if the value assigned is not a "valid" date format ...p.e.: 'd-m-Y', 'd/m/Y', etc...

is like validation or something.

My solution (for now) y change the format property to : 'd-m-Y \\Wee\\k W'
this way, the component accept the new date selected by the user and I can show the year week ...but, this is not a "nice to have" example isnt?

Thank's a lot anyway! ;)

apimio
16 Apr 2009, 6:46 AM
Hi, I'm here again ...

I have another "problem" with datepickerplus and this time is with IE6, IE7 and (obviously) IE8. The problem is that, when the user click on the calendar icon to open the calendar and select a date, the calendar is not rendered correctly, this is render on the corner of the page and not into the Ext window.

I'm opening a windows and into this I'd create a datepickerplus component. In FF3.x is ok, probably to Opera too, but with IE ......:s/:):-/ nothing.

Additionally, if I select a date on the calendar this value is not displayed into the datepickerplus box object.

Maybe is a programmer problem?.

Thank's a Lot!

wm003
16 Apr 2009, 11:04 PM
I have another "problem" with datepickerplus and this time is with IE6, IE7 and (obviously) IE8. The problem is that, when the user click on the calendar icon to open the calendar and select a date, the calendar is not rendered correctly, this is render on the corner of the page and not into the Ext window.

I'm opening a windows and into this I'd create a datepickerplus component. In FF3.x is ok, probably to Opera too, but with IE ......:s/:):-/ nothing.

Additionally, if I select a date on the calendar this value is not displayed into the datepickerplus box object.

Maybe is a programmer problem?.


Please provide a livedemo with this issue. i cannot reproduce it with Ext 2.2.1/2.2/2.1. in all browsers (ie6/7/8,FF2/3,chrome,opera,safari3/4)

apimio
17 Apr 2009, 7:46 AM
Please provide a livedemo with this issue. i cannot reproduce it with Ext 2.2.1/2.2/2.1. in all browsers (ie6/7/8,FF2/3,chrome,opera,safari3/4)

Thank's to reply ..but I found the problem and fix it ..maybe changing some definition. I use the follow link to document my solution ..

Thank's a Lot!

take a look to

http://extjs.com/forum/showthread.php?p=148787#post148787

http://extjs.com/forum/showthread.php?p=148798#post148798

byte!:D

Naokai
21 Apr 2009, 6:20 AM
Is there a listener to trigger the "OK" Button and get the marked Days or Month as an Array?
Can someone of u tell me if there is an Page where i can see avali. listeners?

Naokai

wm003
22 Apr 2009, 1:36 AM
Is there a listener to trigger the "OK" Button and get the marked Days or Month as an Array?
Can someone of u tell me if there is an Page where i can see avali. listeners?

Naokai

Look at the first post of this thread. It contains all available events in addition to the already existing events of the original Datepicker (found in the ext-docs).

The "select"-event is triggered after the OK-Button has been clicked and returns two elements: The datepickerplus-object and an array of the selected days.

however the "select"-event is also triggered when selecting a date.

Naokai
22 Apr 2009, 6:17 AM
Thx for the Answer! the trigger works nice, but i found a other solution and use getCmp. to access the value.

btw. n1 Extension

brenda
27 Apr 2009, 12:09 AM
Hi wm003,
Thnx again for this great extension :)

I am now trying to get datepickerplus to auto update any new events or updated events from the database. However, the datepickerplus did not highlight the new events/ updated events after the auto refresh.

How can I go about solving this problem?

Chods
5 May 2009, 5:03 AM
Hi all, i'm struggling to get event dates to highlight in the datePickerPlus. Can anyone see if i am doing somthing obviously wrong.


Ext.onReady(function() {
var simple = new Ext.FormPanel({
labelWidth: 75,
title: 'Simple Form',
bodyStyle: 'padding:5px 5px 0',
width: 350,
defaults: { width: 230 },
items: [new Ext.form.DateField({
id: 'dateFieldPlus',
fieldLabel: 'Time',
multiSelection: true,
name: 'time',
usePickerPlus: true,
styleDisabledDates: true,
eventDatesSelectable: true,
eventDates : function(year) {
var dates = [
{
date: new Date(2009,5,28),
text: "28/May",
cls: "x-datepickerplus-eventdates"
},
{
date: new Date(2009,6,28), //fixed date marked only on 2008/01/02
text: "28/JUNE",
cls: "x-datepickerplus-eventdates"
},
{
date: new Date(year,4,11), //will be marked every year on 05/11
text: "May 11th, Author's Birthday (Age:"+(year-1973)+")",
cls: "x-datepickerplus-eventdates"
}

];
return dates;
}
})],

buttons: [{
text: 'Save'
}, {
text: 'Cancel'
}]
});





simple.render(document.body);




});


Thanks!!!!

wm003
6 May 2009, 12:46 AM
Hi all, i'm struggling to get event dates to highlight in the datePickerPlus. Can anyone see if i am doing somthing obviously wrong.


Seems like the datepickerplus.css is missing (?)

wm003
6 May 2009, 12:48 AM
I am now trying to get datepickerplus to auto update any new events or updated events from the database. However, the datepickerplus did not highlight the new events/ updated events after the auto refresh.

How can I go about solving this problem?

mmh, how do you update the eventdates? Currently you need to call setEventDates with the full set of possible eventdates.In my current 1.4 beta version i have separate methods to add/delete single events.

Chods
7 May 2009, 12:18 AM
I have reference to datepickerplus. I have however found the solution. I should have been using Ext.ux.form.DateFieldPlus rather than the standard dateField.

radtad
7 May 2009, 1:22 PM
I don't know if this is a bug or not, but a suggestion of code. When I click on a date and it fires off an ajax request, I disable the DatePicker using dp.setDisabled(true). When the ajax is done I set the DatePicker back to dp.setDisabled(false). This all works great, the only problem is I can still select dates, months, etc. I would think if you disable the DatePicker you shouldn't be allowed to select anything (agree?). Here's the suggested fix:



handleDateClick : function(e, t){
if (this.disabled == true) {
return;
}
e.stopEvent();
var tp = Ext.fly(t.parentNode);

if(t.dateValue && !tp.hasClass("x-date-disabled") && !tp.hasClass("x-datepickerplus-eventdates-disabled")){

wm003
10 May 2009, 10:02 PM
I don't know if this is a bug or not, but a suggestion of code. When I click on a date and it fires off an ajax request, I disable the DatePicker using dp.setDisabled(true). When the ajax is done I set the DatePicker back to dp.setDisabled(false). This all works great, the only problem is I can still select dates, months, etc. I would think if you disable the DatePicker you shouldn't be allowed to select anything (agree?).


:-?This also happens when using the original Datepicker. Thanks for the fix.
When disabling the picker just because of an ajax request maybe its more confortable to use masking of the element instead of disabling it (even if if works, but you have the same "ajax-loading-user-experience" with the "loading" info within the container)

dkarlsso
18 May 2009, 11:41 AM
I have successfully been able to dynamically show eventdates using DatePickerPlus after getting inspiration from especially laluigino (http://extjs.com/forum/member.php?u=2859). I am now trying to do the same using datefieldplus instead, but I am having trouble accessing my year and month data.
In the aftermonthchange function, I am able to get the month and year in this fashion: Ext.getCmp("datepickerplus").menu.picker.activeDate.getFullYear().

But putting the same code in the render function does not yield the current year.
Any suggestions as to what my options are?

Ps.
This is how my render function looks like when using DatePickerPlus


render: function(obj) {
alert(obj.activeDate.getFullYear());
}

Ds.




Ext.onReady(function(){
Ext.QuickTips.init();
var datefield = new Ext.FormPanel({
id: 'formpanel',
labelWidth: 50,
frame:true,
renderTo: 'datefield',
title: 'Datepicker',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},

items: [{
fieldLabel: 'Date',
id:'datepickerplus',
name: 'datepickerplus',
xtype: 'datefieldplus',
readOnly:true,
listeners: {
aftermonthchange: function() {
//alert('Year: '+Ext.getCmp("datepickerplus").menu.picker.activeDate.getFullYear()+ 'Month: '+Ext.getCmp("datepickerplus").menu.picker.activeDate.getMonth());

},
render: function() {
//alert('Year: '+Ext.getCmp("datepickerplus").menu.picker.activeDate.getFullYear()+ 'Month: '+Ext.getCmp("datepickerplus").menu.picker.activeDate.getMonth());
}
}
}
]
});
});

wm003
18 May 2009, 11:21 PM
But putting the same code in the render function does not yield the current year.
Any suggestions as to what my options are?

Ps.
This is how my render function looks like when using DatePickerPlus
render: function(obj) {
alert(obj.activeDate.getFullYear());
}
Ds.


Datefieldplus does not have the picker rendered when the datefield render event is triggered (because the picker will be rendered first time when you click the triggerbutton)
At the time the render event for datefieldplus is triggered the picker hasnt got its activedate property yet until the picker is called the first time. thus it cannot return any part of a dateobject

S1-Gezi
19 May 2009, 5:37 AM
Hi lubber, hi all,

I have two enhancement requests and like to hear your opinions on that.
1.) Select date range:
User should be able to click on start or end date with the mouse and move the mouse over the dates with pressed mouse button to select the date range

2.) Help text:
User sometimes wonder how to select a date range and do not know that they have to press the shift/ctrl key. Maybe a small help text in the pickers header would help.

Thanks
Frank

radtad
21 May 2009, 5:48 PM
Just an FYI, this is broken in Ext 3.0 rc 1....and I'd really like to use it in 3.0.



sp is undefined
F()
DatePickerPlus.js()
var F=function(){},sbp,spp=sp.prototype;...pp.constructor==oc){spp.constructor=sp;


This causes the constructor to break.

I'm going to look into trying to fix it, but if you can find the fix faster feel free :).

wm003
21 May 2009, 11:09 PM
Just an FYI, this is broken in Ext 3.0 rc 1....and I'd really like to use it in 3.0.

Me too;).

I've already fixed some parts of it to make it basically work with ext 3.0, but some more eventbased part need more fixing. I'm trying to release an Ext 3.0 working copy until June and before Ext 3.0 Final will be released

EDIT:
Try this first fix:


if (parseInt(Ext.version.substr(0,1),10)>2) {
//ext 3.0
Ext.menu.DateItem = Ext.ux.DatePickerPlus;
Ext.override(Ext.menu.DateMenu,{
initComponent: function(){
this.on('beforeshow', this.onBeforeShow, this);
if(this.strict = (Ext.isIE7 && Ext.isStrict)){
this.on('show', this.onShow, this, {single: true, delay: 20});
}
var PickerWidget = (this.initialConfig.usePickerPlus ? Ext.ux.DatePickerPlus : Ext.DatePicker);
Ext.apply(this, {
plain: true,
showSeparator: false,
items: this.picker = new PickerWidget(Ext.apply({
internalRender: this.strict || !Ext.isIE,
ctCls: 'x-menu-date-item'
}, this.initialConfig))
});
Ext.menu.DateMenu.superclass.initComponent.call(this);
this.relayEvents(this.picker, ["select"]);
}
});

}
else {
//ext 2.x
Ext.menu.DateItem = function(config){
if (config && config.usePickerPlus) {
Ext.menu.DateItem.superclass.constructor.call(this, new Ext.ux.DatePickerPlus(config), config); //NEW LINE
}
else {
Ext.menu.DateItem.superclass.constructor.call(this, new Ext.DatePicker(config), config);
}
this.picker = this.component;
this.addEvents('select');

this.picker.on("render", function(picker){
picker.getEl().swallowEvent("click");
picker.container.addClass("x-menu-date-item");
});

this.picker.on("select", this.onSelect, this);
};
//this breaks in ext 3.0 (Ext.menu.Adapter does not exist in ext 3.0 anymore)
Ext.extend(Ext.menu.DateItem, Ext.menu.Adapter,{
// private
onSelect : function(picker, date){
this.fireEvent("select", this, date, picker);
Ext.menu.DateItem.superclass.handleClick.call(this);
}
});
}

wm003
22 May 2009, 12:01 AM
1.) Select date range:
User should be able to click on start or end date with the mouse and move the mouse over the dates with pressed mouse button to select the date range

Already on my toDo list, but not high priority.



2.) Help text:
User sometimes wonder how to select a date range and do not know that they have to press the shift/ctrl key. Maybe a small help text in the pickers header would help.

added to my todo list. But as the shift/ctrl key usage is usual (windows) behaviour, i don't think many people really need this. Although this little tooltip is fast done anyway :)

radtad
26 May 2009, 12:11 PM
It worked! Cool! Nice job!


Me too;).

I've already fixed some parts of it to make it basically work with ext 3.0, but some more eventbased part need more fixing. I'm trying to release an Ext 3.0 working copy until June and before Ext 3.0 Final will be released

EDIT:
Try this first fix: