diff --git a/bookwyrm/templates/book/edit_book.html b/bookwyrm/templates/book/edit_book.html
index 095439d1..644e90c6 100644
--- a/bookwyrm/templates/book/edit_book.html
+++ b/bookwyrm/templates/book/edit_book.html
@@ -133,7 +133,11 @@
 
                 <p class="mb-2">
                     <label class="label" for="id_first_published_date">{% trans "First published date:" %}</label>
-                    <duet-date-picker identifier="id_first_published_date" name="first_published_date"{% if form.first_published_date.value %} value="{{ form.first_published_date.value|date:'Y-m-d' }}"{% endif %}></duet-date-picker>
+                    <duet-date-picker
+                        identifier="id_first_published_date"
+                        name="first_published_date"
+                        {% if form.first_published_date.value %}value="{{ form.first_published_date.value|date:'Y-m-d' }}"{% endif %}
+                    ></duet-date-picker>
                 </p>
                 {% for error in form.first_published_date.errors %}
                 <p class="help is-danger">{{ error | escape }}</p>
@@ -141,7 +145,11 @@
 
                 <p class="mb-2">
                     <label class="label" for="id_published_date">{% trans "Published date:" %}</label>
-                    <duet-date-picker identifier="id_published_date" name="published_date"{% if form.published_date.value %} value="{{ form.published_date.value|date:'Y-m-d' }}"{% endif %}></duet-date-picker>
+                    <duet-date-picker
+                        identifier="id_published_date"
+                        name="published_date"
+                        {% if form.published_date.value %}value="{{ form.published_date.value|date:'Y-m-d' }}"{% endif %}
+                    ></duet-date-picker>
                 </p>
                 {% for error in form.published_date.errors %}
                 <p class="help is-danger">{{ error | escape }}</p>
diff --git a/bookwyrm/templates/snippets/datepicker_js.html b/bookwyrm/templates/snippets/datepicker_js.html
new file mode 100644
index 00000000..abfadaaf
--- /dev/null
+++ b/bookwyrm/templates/snippets/datepicker_js.html
@@ -0,0 +1,3 @@
+<script type="module" src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.3.0/dist/duet/duet.esm.js"></script>
+<script nomodule src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.3.0/dist/duet/duet.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.3.0/dist/duet/themes/default.css" />
diff --git a/bookwyrm/templates/snippets/readthrough_form.html b/bookwyrm/templates/snippets/readthrough_form.html
index c5be295e..256fcea5 100644
--- a/bookwyrm/templates/snippets/readthrough_form.html
+++ b/bookwyrm/templates/snippets/readthrough_form.html
@@ -5,7 +5,11 @@
 <div class="field">
     <label class="label">
         {% trans "Started reading" %}
-        <input type="date" name="start_date" class="input" id="id_start_date-{{ readthrough.id }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
+        <duet-date-picker
+            identifier="id_start_date-{{ readthrough.id }}"
+            name="start_date"
+            value="{{ readthrough.start_date | date:'Y-m-d' }}">
+        </duet-date-picker>
     </label>
 </div>
 {# Only show progress for editing existing readthroughs #}
@@ -28,6 +32,10 @@
 <div class="field">
     <label class="label">
         {% trans "Finished reading" %}
-        <input type="date" name="finish_date" class="input" id="id_finish_date-{{ readthrough.id }}" value="{{ readthrough.finish_date | date:"Y-m-d" }}">
+        <duet-date-picker
+            identifier="id_finish_date-{{ readthrough.id }}"
+            name="finish_date"
+            value="{{ readthrough.finish_date | date:'Y-m-d' }}">
+        </duet-date-picker>
     </label>
 </div>
diff --git a/bookwyrm/templates/snippets/shelve_button/finish_reading_modal.html b/bookwyrm/templates/snippets/shelve_button/finish_reading_modal.html
index ca65bf06..6d4ea5ea 100644
--- a/bookwyrm/templates/snippets/shelve_button/finish_reading_modal.html
+++ b/bookwyrm/templates/snippets/shelve_button/finish_reading_modal.html
@@ -17,13 +17,21 @@
     <div class="field">
         <label class="label">
             {% trans "Started reading" %}
-            <input type="date" name="start_date" class="input" id="finish_id_start_date-{{ uuid }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
+            <duet-date-picker
+                identifier="id_start_date-{{ uuid }}"
+                name="start_date"
+                value="{{ readthrough.start_date | date:'Y-m-d' }}"
+            ></duet-date-picker>
         </label>
     </div>
     <div class="field">
         <label class="label">
             {% trans "Finished reading" %}
-            <input type="date" name="finish_date" class="input" id="id_finish_date-{{ uuid }}" value="{% now "Y-m-d" %}">
+            <duet-date-picker
+                identifier="id_finish_date-{{ uuid }}"
+                name="finish_date"
+                value="{{ readthrough.finish_date | date:'Y-m-d' }}"
+            ></duet-date-picker>
         </label>
     </div>
 </section>
diff --git a/bookwyrm/templates/snippets/shelve_button/start_reading_modal.html b/bookwyrm/templates/snippets/shelve_button/start_reading_modal.html
index 21341683..47d620e0 100644
--- a/bookwyrm/templates/snippets/shelve_button/start_reading_modal.html
+++ b/bookwyrm/templates/snippets/shelve_button/start_reading_modal.html
@@ -15,7 +15,11 @@
     <div class="field">
         <label class="label">
             {% trans "Started reading" %}
-            <input type="date" name="start_date" class="input" id="start_id_start_date-{{ uuid }}" value="{% now "Y-m-d" %}">
+            <duet-date-picker
+                identifier="start_id_start_date-{{ uuid }}"
+                name="start_date"
+                value="{% now "Y-m-d" %}"
+            ></duet-date-picker>
         </label>
     </div>
 </section>