From b495992c046e310425a1a14ffbed78d61ce596d2 Mon Sep 17 00:00:00 2001 From: Luca Lauretta Date: Tue, 14 Jan 2025 13:27:12 +0100 Subject: [PATCH] Move demo code into the repo Easier to maintain the demo code and dependencies. --- demos/alt-field.html | 8 + demos/custom-date-format.html | 7 + demos/days-range.html | 7 + demos/disable-calendar.html | 12 + demos/disable-dates.html | 8 + demos/full-year.html | 20 + demos/index.html | 64 ++ demos/input.html | 4 + demos/max-picks.html | 4 + demos/min-max-date.html | 7 + demos/pickable-range.html | 9 + demos/preselect-dates.html | 8 + demos/simple.html | 4 + demos/ui-calendar-methods.html | 12 + index.html | 1015 +++++++++++++++++++------------- 15 files changed, 783 insertions(+), 406 deletions(-) create mode 100644 demos/alt-field.html create mode 100644 demos/custom-date-format.html create mode 100644 demos/days-range.html create mode 100644 demos/disable-calendar.html create mode 100644 demos/disable-dates.html create mode 100644 demos/full-year.html create mode 100644 demos/index.html create mode 100644 demos/input.html create mode 100644 demos/max-picks.html create mode 100644 demos/min-max-date.html create mode 100644 demos/pickable-range.html create mode 100644 demos/preselect-dates.html create mode 100644 demos/simple.html create mode 100644 demos/ui-calendar-methods.html diff --git a/demos/alt-field.html b/demos/alt-field.html new file mode 100644 index 0000000..904da5d --- /dev/null +++ b/demos/alt-field.html @@ -0,0 +1,8 @@ +
+ + + diff --git a/demos/custom-date-format.html b/demos/custom-date-format.html new file mode 100644 index 0000000..78e9c15 --- /dev/null +++ b/demos/custom-date-format.html @@ -0,0 +1,7 @@ +
+ diff --git a/demos/days-range.html b/demos/days-range.html new file mode 100644 index 0000000..45c332b --- /dev/null +++ b/demos/days-range.html @@ -0,0 +1,7 @@ +
+ diff --git a/demos/disable-calendar.html b/demos/disable-calendar.html new file mode 100644 index 0000000..1567859 --- /dev/null +++ b/demos/disable-calendar.html @@ -0,0 +1,12 @@ +
+ diff --git a/demos/disable-dates.html b/demos/disable-dates.html new file mode 100644 index 0000000..b2b9dbf --- /dev/null +++ b/demos/disable-dates.html @@ -0,0 +1,8 @@ +
+ diff --git a/demos/full-year.html b/demos/full-year.html new file mode 100644 index 0000000..29ad9e3 --- /dev/null +++ b/demos/full-year.html @@ -0,0 +1,20 @@ + +
+ diff --git a/demos/index.html b/demos/index.html new file mode 100644 index 0000000..64efa13 --- /dev/null +++ b/demos/index.html @@ -0,0 +1,64 @@ + + + + MDP demo page + + + + + + + + + +
+ Code used + + + diff --git a/demos/input.html b/demos/input.html new file mode 100644 index 0000000..145809d --- /dev/null +++ b/demos/input.html @@ -0,0 +1,4 @@ + + diff --git a/demos/max-picks.html b/demos/max-picks.html new file mode 100644 index 0000000..c32147a --- /dev/null +++ b/demos/max-picks.html @@ -0,0 +1,4 @@ +
+ diff --git a/demos/min-max-date.html b/demos/min-max-date.html new file mode 100644 index 0000000..36f2186 --- /dev/null +++ b/demos/min-max-date.html @@ -0,0 +1,7 @@ +
+ diff --git a/demos/pickable-range.html b/demos/pickable-range.html new file mode 100644 index 0000000..14af0ca --- /dev/null +++ b/demos/pickable-range.html @@ -0,0 +1,9 @@ +
+ diff --git a/demos/preselect-dates.html b/demos/preselect-dates.html new file mode 100644 index 0000000..7b30b5c --- /dev/null +++ b/demos/preselect-dates.html @@ -0,0 +1,8 @@ +
+ diff --git a/demos/simple.html b/demos/simple.html new file mode 100644 index 0000000..8e070d1 --- /dev/null +++ b/demos/simple.html @@ -0,0 +1,4 @@ +
+ diff --git a/demos/ui-calendar-methods.html b/demos/ui-calendar-methods.html new file mode 100644 index 0000000..85e67a8 --- /dev/null +++ b/demos/ui-calendar-methods.html @@ -0,0 +1,12 @@ +
+ diff --git a/index.html b/index.html index 6e1c87b..b322304 100644 --- a/index.html +++ b/index.html @@ -1,426 +1,629 @@ - + - - - - - MultiDatesPicker for jQuery UI - - - + + + + MultiDatesPicker for jQuery UI + + + - - - - - - - + + + + + + + + + +
+
+

MultiDatesPicker for jQuery UI

+

+ MDP is a little plugin that enables jQuery UI calendar to manage + multiple dates with the following features: +

+
    +
  • Select date ranges.
    • +
  • Pick multiple dates not in sequence.
    • +
  • Define a maximum number of pickable dates.
    • +
  • + Define a range X days from where it is possible to + select Y dates. +
    • +
  • Define unavailable dates.
    • +
- - -
-
-

MultiDatesPicker for jQuery UI

-

- MDP is a little plugin that enables jQuery UI calendar to manage multiple dates with the following features: -

-
    -
  • Select date ranges.
    • -
  • Pick multiple dates not in sequence.
    • -
  • Define a maximum number of pickable dates.
    • -
  • Define a range X days from where it is possible to select Y dates.
    • -
  • Define unavailable dates.
    • -
+
+ Star -
- Star + + +
+
- - -
-
+
+
+

Install

+

+ Use bower, npm, yarn or + download the + zip. Refer to the + README + for the installation details. +

+
-
-
-

Install

-

- Use bower, npm, yarn or download the zip. - Refer to the README for the installation details. -

-
+
+

Bugs or features request?

+

+ Please use the issue tracker on + GitHub Issues +

+
+
-
-

Bugs or features request?

-

Please use the issue tracker on GitHub Issues

-
-
+
+

How to use it

+

+ Being an extension to jQuery UI DatePicker you need to include both + jQuery and jQuery UI (with datepicker module included!) javascript + files to your HTML page, and right after that, include + MultiDatesPicker. +

+

+ To apply it to an element, do it the same way as you would do with + jQuery UI datepicker, but write multiDatesPicker instead of + datepicker: +
+ $(selector).multiDatesPicker(options_for_datepicker_and_mdp); +

-
-

How to use it

-

- Being an extension to jQuery UI DatePicker you need to include both jQuery and jQuery UI (with datepicker module included!) javascript files to your HTML page, and right after that, include MultiDatesPicker. -

-

- To apply it to an element, do it the same way as you would do with jQuery UI datepicker, but write multiDatesPicker instead of datepicker: -
- $(selector).multiDatesPicker(options_for_datepicker_and_mdp); -

- -

MultiDatesPicker specific options

-
    -
  • -

    addDates

    -

    - Adds an array of dates specified in a string, milliseconds or javascript date object format. -
    - NOTE: the string format you should pass to multiDatePicker depends on the localization of datepicker, see this page for more infos on how to configure it. -

    -
    • -
  • -

    addDisabledDates

    -

    - Disables an array of dates specified in a string, milliseconds or javascript date object format. -
    - NOTE: the string format you should pass to multiDatePicker depends on the localization of datepicker, see this page for more infos on how to configure it. -

    -
    • -
  • -

    separator

    -

    - Allows to specify a custom separator for the string representation of the dates selected (defaults ", "). -

    -
    • -
  • -

    mode

    -

    - Allows to enable a different MDP modes: 'normal' (default) or 'daysRange'. -

    -

    normal mode options

    -
      -
    • -

      maxPicks

      -

      - Number of dates allowed to be selected - (see demo). -

      -
      • -
    • -

      pickableRange

      -

      - Limits the range of dates available for selection to a certain - number of days from the first selection - (see demo). -

      -
      • -
    • -

      adjustRangeToDisabled

      -

      - A boolean that allows to maintain the number of pickable days - even in case there are disabled days within the range - specified in 'pickableRange'.
      - See the corresponding demo - and try toggling this flag to see the results. -

      -
      • -
    -

    daysRange mode options

    -
      -
    • -

      autoselectRange

      -

      - Array of two integers: the first sets the beginning of the range relative to the date clicked on; - the last sets the end of the range. Both numbers may be negative - (see demo). -

      -
      • -
    -
    • -
- -

Available methods:

-
    -
  • -

    compareDates( date1, date2 )

    -

    - Compares two dates returning 1, 0 or -1 if date2 is greater, equal or smaller than date1 respectively. -

    -
    • -
  • -

    gotDate( date, type )

    -

    - Returns the index of the date in the dates array, or false in case that date is not found. -
    - The parameter dates can be a string or a date object. -

    -

    Example: $('#simpliest-usage').multiDatesPicker('gotDate', new Date());

    -
    • -
  • -

    addDates( dates, type )

    -

    - Adds one or more dates to the calendar. -
    - The parameter dates can be a string, a date object or an array (of strings or javascript date objects). -

    -

    Example adding today: $('#simpliest-usage').multiDatesPicker('addDates', new Date());

    -
    • -
  • -

    removeIndexes( indexes, type )

    -

    - Removes one or more dates from the dates array using their indexes. -
    - The parameter indexes can be an integer or an array of integers. -

    -

    Example removing first date: $('#simpliest-usage').multiDatesPicker('removeIndexes', 0);

    -
    • -
  • -

    removeDates( dates, type )

    -

    - Removes one or more dates from the dates array using their dates. -
    - The parameter dates can be a single value or an array of milliseconds, strings or date object. -

    -

    Example removing today date: $('#simpliest-usage').multiDatesPicker('removeDates', new Date());

    -
    • -
  • -

    resetDates( type )

    -

    - Removes all dates. -
    - The array of dates to reset can be of type 'picked' (default) or 'disabled'. -

    -

    Example resetting disabled dates: $('#simpliest-usage').multiDatesPicker('resetDates', 'disabled');

    -
    • -
  • -

    toggleDate( date, type )

    -

    - Adds/removes a single date from the calendar. -
    - The date can be passed as string or as javascript date object. -

    -

    Example toggling today: $('#simpliest-usage').multiDatesPicker('toggleDate', new Date());

    -
    • -
  • -

    getDates( format, type )

    -

    - Retrives the array of dates associated with the multiDatesPicker in the specified format: "string" (default) for localized string format, or "object" for javascript date object format. -

    -

    Example: var dates = $('#simpliest-usage').multiDatesPicker('getDates');

    -
    • -
  • -

    value( string )

    -

    - If no parameter is passed, returns the string value that would be used in input elements. Otherwise parses the string for dates to add. -

    -

    Get Example: var dates = $('#simpliest-usage').multiDatesPicker('value');

    -

    Set Example: $('#simpliest-usage').multiDatesPicker('value', '2/19/1985, 11/14/2009');

    -
    • -
  • -

    destroy()

    -

    - Destroys the MDP and Datepicker instances on the element. -

    -

    Example: $('#simpliest-usage').multiDatesPicker('destroy');

    -
    • -
-
- -
-

Use cases

-

- You can find MDP implemented in the following sites: -

- -

- If you're using MDP in your site and would like to share it, simply contact me. You'd get free ad from here and we get more examples of implementation from you :) -

-
- -
-

Demos

-

- Here are some demos for you to understand how it works and what you can obtain with it.
- To see how it is implemented simply check the source code of this page: I've tried to keep the code simple and clear :) -

-
    -
  • -

    Simplest usage

    - -

    - Just apply the plugin to an HTML element and you're ready to select multiple dates :) -

    -
    • +

    MultiDatesPicker specific options

    +
      +
    • +

      addDates

      +

      + Adds an array of dates specified in a string, milliseconds or + javascript date object format. +
      + NOTE: the string format you should pass to multiDatePicker + depends on the localization of datepicker, see this page for + more infos on how to configure it. +

      +
      • +
    • +

      addDisabledDates

      +

      + Disables an array of dates specified in a string, milliseconds or + javascript date object format. +
      + NOTE: the string format you should pass to multiDatePicker + depends on the localization of datepicker, see this page for + more infos on how to configure it. +

      +
      • +
    • +

      separator

      +

      + Allows to specify a custom separator for the string representation + of the dates selected (defaults ", "). +

      +
      • +
    • +

      mode

      +

      + Allows to enable a different MDP modes: 'normal' (default) or + 'daysRange'. +

      +

      normal mode options

      +
        +
      • +

        maxPicks

        +

        + Number of dates allowed to be selected (see demo). +

        +
        • +
      • +

        pickableRange

        +

        + Limits the range of dates available for selection to a certain + number of days from the first selection (see demo). +

        +
        • +
      • +

        adjustRangeToDisabled

        +

        + A boolean that allows to maintain the number of pickable days + even in case there are disabled days within the range + specified in 'pickableRange'.
        + See the corresponding demo + and try toggling this flag to see the results. +

        +
        • +
      +

      daysRange mode options

      +
        +
      • +

        autoselectRange

        +

        + Array of two integers: the first sets the beginning of the + range relative to the date clicked on; the last sets the end + of the range. Both numbers may be negative (see demo). +

        +
        • +
      +
      • +
    -
  • -

    Custom date format

    - -

    - Same as previous example, but using custom date formats and custom default day. -

    -
    • +

    Available methods:

    +
      +
    • +

      compareDates( date1, date2 )

      +

      + Compares two dates returning 1, 0 or -1 if date2 is greater, equal + or smaller than date1 respectively. +

      +
      • +
    • +

      gotDate( date, type )

      +

      + Returns the index of the date in the dates array, or false in case + that date is not found. +
      + The parameter dates can be a string or a date object. +

      +

      + Example: + $('#simpliest-usage').multiDatesPicker('gotDate', new + Date()); +

      +
      • +
    • +

      addDates( dates, type )

      +

      + Adds one or more dates to the calendar. +
      + The parameter dates can be a string, a date object or an array (of + strings or javascript date objects). +

      +

      + Example adding today: + $('#simpliest-usage').multiDatesPicker('addDates', new + Date()); +

      +
      • +
    • +

      removeIndexes( indexes, type )

      +

      + Removes one or more dates from the dates array using their + indexes. +
      + The parameter indexes can be an integer or an array of integers. +

      +

      + Example removing first date: + $('#simpliest-usage').multiDatesPicker('removeIndexes', + 0); +

      +
      • +
    • +

      removeDates( dates, type )

      +

      + Removes one or more dates from the dates array using their dates. +
      + The parameter dates can be a single value or an array of + milliseconds, strings or date object. +

      +

      + Example removing today date: + $('#simpliest-usage').multiDatesPicker('removeDates', new + Date()); +

      +
      • +
    • +

      resetDates( type )

      +

      + Removes all dates. +
      + The array of dates to reset can be of type 'picked' + (default) or 'disabled'. +

      +

      + Example resetting disabled dates: + $('#simpliest-usage').multiDatesPicker('resetDates', + 'disabled'); +

      +
      • +
    • +

      toggleDate( date, type )

      +

      + Adds/removes a single date from the calendar. +
      + The date can be passed as string or as javascript date object. +

      +

      + Example toggling today: + $('#simpliest-usage').multiDatesPicker('toggleDate', new + Date()); +

      +
      • +
    • +

      getDates( format, type )

      +

      + Retrives the array of dates associated with the multiDatesPicker + in the specified format: "string" (default) for localized string + format, or "object" for javascript date object format. +

      +

      + Example: + var dates = + $('#simpliest-usage').multiDatesPicker('getDates'); +

      +
      • +
    • +

      value( string )

      +

      + If no parameter is passed, returns the string value that would be + used in input elements. Otherwise parses the string for dates to + add. +

      +

      + Get Example: + var dates = + $('#simpliest-usage').multiDatesPicker('value'); +

      +

      + Set Example: + $('#simpliest-usage').multiDatesPicker('value', '2/19/1985, + 11/14/2009'); +

      +
      • +
    • +

      destroy()

      +

      Destroys the MDP and Datepicker instances on the element.

      +

      + Example: + $('#simpliest-usage').multiDatesPicker('destroy'); +

      +
      • +
    +
-
  • -

    Pre-select dates

    - -

    - The name says it all: you can preselect some dates specifying them in an array.
    - Dates in the array can be a mix of object date and string dates. -

    -
    • +
    +

    Use cases

    +

    You can find MDP implemented in the following sites:

    + +

    + If you're using MDP in your site and would like to share it, simply + contact me. You'd get free ad from here and + we get more examples of implementation from you :) +

    +
    -
  • -

    Disable dates

    - -

    - Again, the name says it all: you can specify some dates to disable.
    - Dates in the array can be a mix of object date and string dates. -

    -
    • +
    +

    Demos

    +

    + Here are some demos for you to understand how it works and what you + can obtain with it.
    + To see how it is implemented simply check the source code of this + page: I've tried to keep the code simple and clear :) +

    +
      +
    • +

      Simplest usage

      + +

      + Just apply the plugin to an HTML element and you're ready to + select multiple dates :) +

      +
      • -
    • -

      Disable calendar

      - -

      - Disable a calendar picking functionality. -

      -
      • +
    • +

      Custom date format

      + +

      + Same as previous example, but using custom date formats and custom + default day. +

      +
      • -
    • -

      Using altField

      - -

      - A way to have a calendar always displayed and a field that fills with - selected dates. -

      -
      • +
    • +

      Pre-select dates

      + +

      + The name says it all: you can preselect some dates specifying them + in an array.
      + Dates in the array can be a mix of object date and string dates. +

      +
      • -
    • -

      Set maximum picks

      - -

      - Set the maximum number of dates that can be picked. -

      -
      • +
    • +

      Disable dates

      + +

      + Again, the name says it all: you can specify some dates to + disable.
      + Dates in the array can be a mix of object date and string dates. +

      +
      • -
    • -

      Use pickableRange and adjustRangeToDisabled

      - -

      - Define a range of dates to be allowed after the first date have been picked.
      - Some dates have been disabled to show up how adjustRangeToDisabled works. -

      -
      • +
    • +

      Disable calendar

      + +

      Disable a calendar picking functionality.

      +
      • -
    • -

      Days range

      - -

      - This way you can automatically select a range of days with respect to the day clicked. -

      -

      - In this example the day range is set to [0, 5], which means from the day clicked to 5 days in advance.
      - You can also specify other combinations like: -

      -
        -
      • [-1,2] from a day before to two days after the clicked day
        • -
      • [1,3] from the day after to three days after the clicked day
        • -
      • ...
        • -
      -
      • +
    • +

      Using altField

      + +

      + A way to have a calendar always displayed and a field that fills + with selected dates. +

      +
      • -
    • -

      Min and Max date

      - -

      - As with the jQuery Datespicker, you can define a minimum and maximum date from where to pick dates.
      - The values are relative to the current date. -

      -
      • +
    • +

      Set maximum picks

      + +

      + Set the maximum number of dates that can be picked. +

      +
      • -
    • -

      From input

      - -

      - Just an example of how it would work with an input text field. -

      -
      • +
    • +

      Use pickableRange and adjustRangeToDisabled

      + +

      + Define a range of dates to be allowed after the first date have + been picked.
      + Some dates have been disabled to show up how + adjustRangeToDisabled + works. +

      +
      • -
    • -

      UI Calendar methods

      - -

      - Define beforeShow, beforeShowDay*, - onSelect and onClose to apply custom behaviours. -

      -

      - * Being that MDP needs beforeShowDay to change - the way jQuery datepicker behaves, there may be cases in which your custom definition in MDP - won't produce the same effects as if you were using it with datepicker alone. -

      -
      • - -
    • -

      Full year

      - -

      - Just an example of how it would look to show the full year. -

      -
      • - -
    -
    - -
    -

    Tips

    -

    - MDP comes with a small CSS file that applies the following styles: -

    - -

    - To even further customize the way the calendar looks, just modify the jQuery UI's theme you're using.
    - Multiple Dates Picker is about adding functionality not style :) -

    -
    - -
    -

    Things pending

    -

    Apart from some features and bug fixes, there is need for a better documentation and a unit-test to guarantee that any improvements won't break the existent functionalities.

    -

    I'll try to maintain this project in my spare time (it is not my primary business), and I welcome anyone who wants to help (just contact me :)

    -
    - -
    -

    Contact me

    -

    You're welcome to get in touch with me to collaborate to this project:

    - -
    -
    - +
  • +

    Days range

    + +

    + This way you can automatically select a range of days with respect + to the day clicked. +

    +

    + In this example the day range is set to [0, 5], which means from + the day clicked to 5 days in advance.
    + You can also specify other combinations like: +

    +
      +
    • + [-1,2] from a day before to two days after the clicked day +
      • +
    • + [1,3] from the day after to three days after the clicked day +
      • +
    • ...
      • +
    +
    • + +
  • +

    Min and Max date

    + +

    + As with the jQuery Datespicker, you can define a minimum and + maximum date from where to pick dates.
    + The values are relative to the current date. +

    +
    • + +
  • +

    From input

    + +

    + Just an example of how it would work with an input text field. +

    +
    • + +
  • +

    UI Calendar methods

    + +

    + Define beforeShow, beforeShowDay*, + onSelect and onClose to apply custom + behaviours. +

    +

    + * Being that MDP needs + beforeShowDay to change the way jQuery datepicker + behaves, there may be cases in which your custom definition in MDP + won't produce the same effects as if you were using it with + datepicker alone. +

    +
    • + +
  • +

    Full year

    + +

    + Just an example of how it would look to show the full year. +

    +
    • + +
    + +
    +

    Tips

    +

    + MDP comes with a small CSS file that applies the following styles: +

    + +

    + To even further customize the way the calendar looks, just modify the + jQuery UI's theme you're using.
    + Multiple Dates Picker is about adding functionality not style :) +

    +
    + +
    +

    Things pending

    +

    + Apart from some features and bug fixes, there is need for a better + documentation and a unit-test to guarantee that any improvements won't + break the existent functionalities. +

    +

    + I'll try to maintain this project in my spare time (it is not my + primary business), and I welcome anyone who wants to help (just + contact me :) +

    +
    + +
    +

    Contact me

    +

    + You're welcome to get in touch with me to collaborate to this project: +

    + +
    +
    +