<p><a href="https://i.sstatic.net/KnvRQ.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/KnvRQ.png" alt="enter image description here" /></a></p>
<p>I got this working fairly easily* by:</p>
<ol>
<li>Creating a custom module and custom field type based on the default Plain Text Field (similar to <a href="https://nystudio107.com/blog/creating-a-custom-field-in-craft-cms" rel="nofollow noreferrer">https://nystudio107.com/blog/creating-a-custom-field-in-craft-cms</a>)</li>
<li>Adding the <a href="https://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI" rel="nofollow noreferrer">https://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI</a> JS and CSS to an asset bundle as part of the same module</li>
<li>Within the new custom field, after the field has been set up, instantiating a Multiple Dates Picker instance at the end of the field html, and being sure to set the separator to just a comma (rather than the default comma followed by a space)</li>
</ol>
<pre><code>{% js %}
    $('#{{ id|namespaceInputId|e('js') }}').multiDatesPicker({
    separator: &quot;,&quot;
  });
{% endjs %}
</code></pre>
<p>* Partly because the Multiple Dates Picker piggybacks the jQuery UI stuff that Craft already include in the control panel :)</p>

CC BY-SA 4.0
2020-12-02T12:09:57.220Z
2020-12-02T12:09:57.220Z
James Greig
<p>Instead of creating a custom field could you do it with a Matrix with each date going into a matrix row?</p>
<p>I've done something similar in the past for scheduling delivery dates for a Commerce order. Each order has a matrix field for delivery dates and each date (along with some other data) is added as a separate row.</p>

CC BY-SA 4.0
2020-12-01T11:44:41.623Z
That would work yes - only problem is for events that span 10-15 days it's quite a lot of work!
James Greig
CC BY-SA 4.0
2020-12-01T12:53:23.127Z
If it's specifically for events then have you considered using Verbb Events plugin instead? Although not sure how you'd get import the dates into it tbh.
foamcow
CC BY-SA 4.0
2020-12-01T13:44:08.237Z
Love a Verbb plugin! Most of the events have tickets on Eventbrite or other platforms already, the venue is basically aggregating a bunch of events that various organisations have already set up on these platforms
James Greig
CC BY-SA 4.0
2020-12-01T11:39:39.333Z
2020-12-01T11:39:39.333Z
foamcow
<p>We're migrating* a website that uses <a href="http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/" rel="nofollow noreferrer">http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/</a> to store any combination of dates for an entry... (eg not just a single date or date range, can be lots of individual dates which aren't sequential)</p>
<p>What would be the best kind of field/setup to import these into?</p>
<p>I guess we could create a custom field type that implements the same multipicker as above as it's also based on the jQuery datepicker widget... but have never created a custom field type from scratch though... what is the best approach to this?</p>
<p>(*7000 entries to import via FeedMe, looks like every single date is added to an event table as an individual row and looked up via an id :zany_face:)</p>
<p><a href="https://i.sstatic.net/KKmkW.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/KKmkW.png" alt="enter image description here" /></a></p>

CC BY-SA 4.0
2020-11-30T17:00:12.397Z
Wondering if I can use an approach similar to https://nystudio107.com/blog/creating-a-custom-field-in-craft-cms, eg extend the existing date field and replace the vanilla datapicker UI with the multiselect one above....
James Greig
<custom-fieldtype><custom-field><jquery>
Creating a custom, "multiple dates picker" field
# Creating a custom, "multiple dates picker" field

(Asked by: username_0 on 2020-11-30)

We're migrating\* a website that uses <http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/> to store any combination of dates for an entry... (eg not just a single date or date range, can be lots of individual dates which aren't sequential)

What would be the best kind of field/setup to import these into?

I guess we could create a custom field type that implements the same multipicker as above as it's also based on the jQuery datepicker widget... but have never created a custom field type from scratch though... what is the best approach to this?

(\*7000 entries to import via FeedMe, looks like every single date is added to an event table as an individual row and looked up via an id :zany\_face:)

[![enter image description here](https://i.sstatic.net/KKmkW.png)](https://i.sstatic.net/KKmkW.png)

**Tags:** custom-fieldtype, custom-field, jquery

> **Comments:**
> **username_0**: Wondering if I can use an approach similar to https://nystudio107.com/blog/creating-a-custom-field-in-craft-cms, eg extend the existing date field and replace the vanilla datapicker UI with the multiselect one above....  

---

## 2 answers

### Answer by username_0 on 2020-12-02. Score: 1 | Accepted answer

I got this working fairly easily* by:

Creating a custom module and custom field type based on the default Plain Text Field (similar to https://nystudio107.com/blog/creating-a-custom-field-in-craft-cms)
Adding the https://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI JS and CSS to an asset bundle as part of the same module
Within the new custom field, after the field has been set up, instantiating a Multiple Dates Picker instance at the end of the field html, and being sure to set the separator to just a comma (rather than the default comma followed by a space)

{% js %}
    $('#{{ id|namespaceInputId|e('js') }}').multiDatesPicker({
    separator: ","
  });
{% endjs %}

* Partly because the Multiple Dates Picker piggybacks the jQuery UI stuff that Craft already include in the control panel :)


---

### Answer by username_1 on 2020-12-01. Score: 1

Instead of creating a custom field could you do it with a Matrix with each date going into a matrix row?

I've done something similar in the past for scheduling delivery dates for a Commerce order. Each order has a matrix field for delivery dates and each date (along with some other data) is added as a separate row.

> **Comments:**
> **username_0**: That would work yes - only problem is for events that span 10-15 days it's quite a lot of work!  
> **username_1**: If it's specifically for events then have you considered using Verbb Events plugin instead? Although not sure how you'd get import the dates into it tbh.  
> **username_0**: Love a Verbb plugin! Most of the events have tickets on Eventbrite or other platforms already, the venue is basically aggregating a bunch of events that various organisations have already set up on these platforms  

---

