{"id":17919183,"url":"https://github.com/lubber-de/ext.ux.datepickerplus","last_synced_at":"2025-04-03T08:25:19.510Z","repository":{"id":114252866,"uuid":"120336872","full_name":"lubber-de/Ext.ux.DatePickerPlus","owner":"lubber-de","description":"Enhanced DatePicker Component for ExtJS 3.x / 2.x - Official Repository","archived":false,"fork":false,"pushed_at":"2018-02-05T17:18:23.000Z","size":92,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-08T21:48:40.882Z","etag":null,"topics":["datepicker","extension","extjs","extjs3","javascript","sencha","sencha-extjs"],"latest_commit_sha":null,"homepage":"http://lubber.de/extjs/datepickerplus","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lubber-de.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-05T17:18:09.000Z","updated_at":"2024-02-25T16:47:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"f6f5f551-f329-4386-8413-cfa35675f0a3","html_url":"https://github.com/lubber-de/Ext.ux.DatePickerPlus","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lubber-de%2FExt.ux.DatePickerPlus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lubber-de%2FExt.ux.DatePickerPlus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lubber-de%2FExt.ux.DatePickerPlus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lubber-de%2FExt.ux.DatePickerPlus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lubber-de","download_url":"https://codeload.github.com/lubber-de/Ext.ux.DatePickerPlus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246963361,"owners_count":20861459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datepicker","extension","extjs","extjs3","javascript","sencha","sencha-extjs"],"created_at":"2024-10-28T20:15:01.832Z","updated_at":"2025-04-03T08:25:19.500Z","avatar_url":"https://github.com/lubber-de.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ext.ux.DatePickerPlus - Enhanced DatePicker Component for ExtJS 3.x / 2.x\n## Official Repository\n###### Marco \"[Lubber]\" Wienkoop\n![version](https://img.shields.io/github/tag/lubber-de/Ext.ux.DatePickerPlus.svg)  \n![size_gzip](https://badges.herokuapp.com/size/github/lubber-de/Ext.ux.DatePickerPlus/master/ext.ux.datepickerplus.min.js?gzip=true)\n![size](https://badges.herokuapp.com/size/github/lubber-de/Ext.ux.DatePickerPlus/master/ext.ux.datepickerplus.min.js)  \n![browsers](https://badges.herokuapp.com/browsers?\u0026microsoftedge=12,13,14%2b\u0026googlechrome=All\u0026versionDivider=true)\n![browsers](https://badges.herokuapp.com/browsers?firefox=All\u0026iexplore=8,9,10,11\u0026versionDivider=true)\n![mobile](https://badges.herokuapp.com/browsers?safari=5%2b\u0026opera=10.5%2b\u0026versionDivider=true)  \n![license](https://img.shields.io/github/license/lubber-de/Ext.ux.DatePickerPlus.svg)  \n\n## Features\nExt.ux.DatePickerPlus works in all forms: Standalone, as a DateMenu and as a DateField (in this case its the new Ext.ux.form.DateFieldPlus Widget)\nMain Features:\n- MultiMonth\n- Multiselection with CTRL and SHIFT-Key as usual behaviour\n- Weekend, Holidays and custom CSS days\n- Weeknumber display\n- Localization Support (example Files included)\n- Quicktip support\n- Undo Function of date selection\n\nThis small library is especially useful if you want to provide something in one single js file without copying all dependency libraries into it, but still rely on external resources/CDNs, so your single js file stays small and the user does not need to implement or even know what other dependencies are needed to be embedded  \nSo this library is tiny enough to be embedded into your own single-js file library\n\n## Install\n\nImplement one script tag after including ExtJs.\n```html\n\u003cscript type=\"text/javascript\" src=\"ext.ux.datepickerplus-min.js\"\u003e\u003c/script\u003e\n```\nIf needed, implement appropriate language file afterwards\n```html\n\u003cscript type=\"text/javascript\" src=\"ext.ux.datepickerplus-lang-de.js\"\u003e\u003c/script\u003e\n```\n\n## API Documentation\n\n### Config Items\n**clickRepeaterConfig**: (usable when showPrevNextTrigger is true)  \nProvide some clickRepeaterConfig to the trigger buttons\n\n**showPrevNextTrigger**: (DateFieldPlus only and not with multiselection)  \nTo display 2 buttons next to the DateFieldPlus to select next/previous day(s)\n\n**prevNextTriggerType**: (DateFieldPlus only not with multiselection)  \nvalues:\n\"m\": means +/- month (valid End of month will be considered)\nany numeric value: means amount of +/- days\n\n**defaultValue** (DateFieldPlus only)  \nA String in Dateformat or a DateObject that will be used as initial value when open the picker on an empty datefieldplus\n\n**prevNextDaysView**: `String/Boolean` (default \"mark\")  \nvalues:\n\"mark\" : selected days will be marked in prev/next months also\n\"nomark\" will not be marked and are not selectable\nfalse: will hide them, thus are not selectable too\nNote: When using anything other than \"mark\", week or monthclick will not select days outside the current month!\n\n**styleDisabledDates**: `Boolean` (default false)  \nTo be able to set custom style dates (eventdates/weekends..) on disabled dates also\n\n**eventDatesSelectable**: `Boolean` (default false)  \nTo disable event-dates selection if desired (even if the dates are not disabled at all)\n\n**disableSingleDateSelection**: `Boolean` (default false)  \nTo force user to use week- or monthselection only\n\n**stayInAllowedRange** `Boolean` (default true)  \nWhen setting minDate/maxDate, this will prevent to change months outside the allowed daterange  (suggested by descheret)\n\n**summarizeHeader**: `Boolean` (default false)  \nTo add an optional global header when using multimonth display containing the month range (e.g. january 2008-october 2008)\n\n**allowMouseWheel**: `Boolean` (default true)  \nSelf explaining...\n\n**multiSelectionDelimiter**: `String` (default ',')  \nFor Datefieldplus and Multiselection only\n\n**renderPrevNextButtons**: `Boolean` (default true)  \nIf you want the user not to be able to change the month or force him to use the monthpicker, set this to false\n\n**renderPrevNextYearButtons**: `Boolean` (default false)  \nDisplay 2 small double-arrow buttons for changing next/previous year \n\n**nextYearText**: `String` (default \"Next Year (Control+Up)\")  \nWill be displayed as tooltip on NextYear Button (updated locale!)\n\n**prevYearText**: `String` (default \"Previous Year (Control+Down)\")  \nWill be displayed as tooltip on PrevYear Button (updated locale!)\n\n**showActiveDate**: `Boolean` (default false)  \nWill display the active Date to use keynavigation\n\n**shiftSpaceSelect**: `Boolean` (default true)  \nif 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)\nif this is set to false , this behaviour reverses (shift+space selects today, space alone select the date under the shown activedate from keynavigation)\nRemembery Keynavigation works only when the datepicker has got focus which isnt always the case in some browsers\n\n**disableMonthPicker**: `Boolean` (default false)  \nSelf explaining...\n\n**disabledLetter**: `String/Boolean` (default false)  \nDisplay e.g. a \"X\" instead of the daynumber if a date is disabled.\n\n**strictRangeSelect**: `Boolean` (default false)  \nSet this to true does only allow multiselection in a range without the possibility to create gaps. Selection by CTRL is still possible, but DatepickerPLus checked, if the selected Day(s) append the existing selection of would produce a gap\n\n**displayMask**: Number (default 3)  \nAs 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.\nSet to false to never display the mask\n\n**displayMaskText**: String (default \"Please wait...\")  \nThe Message to be displayed when a mask is shown\n\n**defaultEventDatesText**: `String` (default '')  \nUsed if no text-object is given in eventdates\n\n**defaultEventDatesCls**: `String` (default 'x-datepickerplus-eventdates')  \nUsed if no cls-object is given in eventdates\n\n**allowedDates**: `Array{Dateobjects}/false` (default false)  \nIf this is set with an Array of Dates, only these Dates are available for Selection in the DatepickerPlus, all other dates are automatically disabled\n\n**allowedDatesText**: `String` (default '')  \nText to display on the disabled Days as quicktip\n\n**minDate**: `Date`  \nAlias for minValue\n\n**maxDate**: `Date`  \nAlias for maxValue\n\n**disablePartialUnselect** : `Boolean/String` (default true)  \nWhen 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.\nNote: When the _whole set_ of the month/week are already selected, they get _all_ unselected anyway.\n\n**renderOkUndoButtons** : `Boolean` (default true)  \nIf set to false, the OK- and Undo-Buttons will not be rendered on Multiselection Calendars\nThis 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...)\nWorks only if multiSelection is set to true\n\n**renderTodayButton** : `Boolean` (default true)  \nWhether the Today-Button should be rendered\n\n**noOfMonth** : `Number` (default 1)  \nhow many months should be displayed\n\n**noOfMonthPerRow**: `Number` (default 3)\n\n**fillupRows**: `Boolean` (default true)  \nto automatically increase month-amount to fit display-matrix of rows/columns\n\n**showWeekNumber** : `Boolean` (default true)  \nto support display of weekNumbers\n\n**selectWeekText** : `String` (default \"Click to select all days of this week\")  \nWill be displayed when hovering over Weeknumber\n\n**selectMonthText** : `String` (default \"Click to select all weeks of this month\")  \nWill be displayed when hovering over WeeknumberHeader\n\n**weekName** : `String` (default \"Wk.\")  \nText, that appears on the Weeknumber Header\n\n**multiSelection** : `Boolean` (default false to act like original datepicker)  \nWhether Multiselection should be possible or not\n\n**multiSelectByCTRL**:  `Boolean` (default true)  \nIf set to false, its possible to multiselect the \"easy\" way (without CTRL) also\n\n**selectedDates** : `Array`  \nHolds an array of dateobjects which have been selected (after clicking the OK-Button, or immediatly, if renderOkUndoButtons is set to false)\n\n**preSelectedDates** : `Array`  \nHolds an array of date-times (getTime()) which have been selected at runtime (before clicking the OK-Button)\n\n**nationalHolidays** : function(year) (default US Holidays)  \nCalled every year-change to generate holidays with custom CSS\n\n**nationalHolidaysCls** : `String` (default to 'x-datepickerplus-nationalholidays')  \nCSS Class to be applied to holidays\n\n**markNationalHolidays** : `Boolean` (default true)  \nWhether national Holidays should be marked with different CSS\n\n**markWeekends** : `Boolean` (default true)  \nWhether weekends should be marked with different CSS\nCustom CSS Days can also be used for cycling weekevents like \"every friday\"\n\n**weekendDays** : `Array` (default [6,0] for Saturday and Sunday)  \nArray of weekdays which are supposed to be weekends\n\n**weekendText** : `String` (default '')  \nText to be display as Quicktips when hovering over weekends\n\n**useQuickTips** : `Boolean` (default true)  \nTo be able to show cellinfos in nice quicktips instead of cell-titles\nOccurs for disabled/eventdates/weekends/holidays days\n\n**pageKeyWarp** : Number(default 1)  \nExtend pageup/pagedown keynav for custom amount of months forward/backward\n\n**maxSelectionDays** : Boolean (default false for unlimited selection)  \nTo limit the selection of single days to a specific amount\n\n**maxSelectionDaysTitle** : `String` (default 'Datepicker')  \nWindow-title of the alert-msg which is disdplayed when trying to select more than the allowed amount of days\n\n**maxSelectionDaysText** : `String` (default 'You can only select a maximum amount of %0 days')  \nWindow-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)\n\n**undoText** : `String` (default 'Undo')  \nButtontext for the Undo-option\n\n**eventdates** : function(year)  \nReturns days which are marked by a specific css class and not as selected\n\n**eventDatesRE** : `RegExp` (default null)  \nRegular Expression to select custom CSS Days (works just like disabledDaysRE)\n\n**eventDatesRECls** : `String` (default '')  \nCSS Class to be used if days are found by eventDatesRE\n\n**eventDatesREText** : `String` (default '')  \nQuicktip Text to be displayed if days are found by eventDatesRE\n\n**lastSelectedDate** : `Number`  \nContains the last selected Date.. (getTime() value)\n\n**tooltip** : `String/Object` (for DateFieldPlus only)  \nWorks exactly like in Buttons-Widget (works on Trigger Button, not field itself to keep invalidText tooltips intact!)\n\n**tooltipType** : `String` (for DateFieldPlus only)\nWorks exactly like in Buttons-Widget\n\n**usePickerPlus** : `Boolean` (for datemenus only)\n\n\n### Events\n**onPrevTriggerRelease** (DateFieldPlus only not with multiselection)  \nFires when the PrevTrigger MouseUp Event occurs (if omitted the usual select-handler will be triggered)\n\n**onNextTriggerRelease** (DateFieldPlus only not with multiselection)  \nFires when the PrevTrigger MouseUp Event occurs (if omitted the usual select-handler will be triggered)\n\n**beforemonthclick**  \nCalled with pickerobject, monthnumber (0=january,1=february...) and selectedState (if true, the whole month was selected, if false, it was unselected)\nFires only when multiSelection=true and showWeekNumbers=true. Return false to cancel selection.\n\n**beforeweekclick**  \nCalled with pickerobject, date (firstdate of clicked week) and selectedState (if true, the whole week was selected, if false, it was unselected)\nFires only when multiSelection=true and showWeekNumbers=true. Return false to cancel selection.\n\n**beforedateclick**  \nCalled with pickerobject and current clicked date\nFires before a date is clicked. Return false to cancel selection.\n\n**beforemousewheel**  \nFires before the month will change on mousewheel trigger\n\n**beforemaxdays**  \nFires before the default ext alertbox will appear when the amount of maxSelectionDays has been reached (return false to cancel the msgbox appearance)\n\n**beforeyearchange**  \nFires everytime before the year of the first month changes (by monthpicker or prev/next(year)-month buttons\n\n**afteryearchange**  \nFires everytime after the year of the first month changes (by monthpicker or prev/next(year)-month buttons\n\n**beforemonthchange**  \nFires everytime before the first month changes (by monthpicker or prev/next-month buttons\n\n**aftermonthchange**  \nFires everytime after the first month changes (by monthpicker or prev/next-month buttons\n\n**aftermonthclick**  \nCalled with pickerobject, monthnumber (0=january,1=february...) and selectedState (if true, the whole month was selected, if false, it was unselected)\nFires only when multiSelection=true and showWeekNumbers=true\n\n**afterweekclick**  \nCalled with pickerobject, date (firstdate of clicked week) and selectedState (if true, the whole week was selected, if false, it was unselected)\nFires only when multiSelection=true and showWeekNumbers=true\n\n**afterdateclick**  \nCalled with pickerobject, current clicked date and selectedState (if true, the day was selected, if false, it was unselected)\nFires everytime a date is clicked\n\n**undo**  \nFires on undo-button-click on multiSelection\n\n\n### Methods\n**setEventDates(Array{DateObjects}/Object{eventDatesObject(date,text,cls)})**  \nTo automatically transform given arrays/or objects to working functions, if not already specified\n\n**setAllowedDates(Array{DateObject},update(default true)])**  \nTo 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.\n\n**clearSelectedDates([update(default true)])**  \nTo delete all selected dates and update the picker visually. If update is set to false, the visual update will not happen.\n\n**setSelectedDates(Array/DateObject,update(default true)])**  \nTo set one or more Dates and update the picker visually. If update is set to false, the visual update will not happen.\n\n**setDateLimit(minDate{DateObject},maxDate{DateObject})**  \nTo change both minDate and maxDate at one at runtime\n\n**setMinDate({DateObject})**  \nTo change the minDate at runtime and immediatly update the rendered DatepickerPlus. You need to specify a valid DateObject\n\n**setMaxDate({DateObject})**  \nSame with the maxDate\n\n\n\n## License\n [GPLv3](/LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flubber-de%2Fext.ux.datepickerplus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flubber-de%2Fext.ux.datepickerplus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flubber-de%2Fext.ux.datepickerplus/lists"}