data attribute value set

powerhome · Dec 2, 2024 · d4f9b39 · d4f9b39
1 parent 028e7c4
commit d4f9b39
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/date_picker.rb b/playbook/app/pb_kits/playbook/pb_date_picker/date_picker.rb
@@ -40,6 +40,8 @@ class DatePicker < Playbook::KitBase
                         default: {}
       prop :input_data, type: Playbook::Props::HashProp,
                         default: {}
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
       prop :max_date, type: Playbook::Props::String
       prop :min_date, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
@@ -55,6 +57,8 @@ class DatePicker < Playbook::KitBase
       prop :position, type: Playbook::Props::String,
                       default: "auto"
       prop :position_element, type: Playbook::Props::String
+      prop :reset_to_default, type: Playbook::Props::Boolean,
+                              default: false
       prop :scroll_container, type: Playbook::Props::String
       prop :selection_type, type: Playbook::Props::Enum,
                             values: %w[week month quickpick none],
@@ -98,6 +102,7 @@ def date_picker_config
           plugins: plugins,
           position: position,
           positionElement: position_element,
+          resetToDefault: reset_to_default,
           required: required,
           selectionType: selection_type,
           showTimezone: show_timezone,

diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts b/playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts
@@ -24,9 +24,11 @@ type DatePickerConfig = {
   required: boolean,
   hideIcon?: boolean;
   inLine?: boolean,
+  inputValue: string,
   onChange: (dateStr: string, selectedDates: Date[]) => void,
   selectionType?: "month" | "week" | "quickpick" | "",
   onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
+  resetToDefault?: boolean,
   showTimezone?: boolean,
   staticPosition: boolean,
   thisRangesEndToday?: boolean,
@@ -50,6 +52,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     disableWeekdays,
     enableTime,
     format,
+    inputValue,
     maxDate,
     minDate,
     mode,
@@ -59,6 +62,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     plugins,
     position = "auto",
     positionElement,
+    resetToDefault,
     required,
     selectionType,
     showTimezone,
@@ -242,6 +246,12 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     picker.changeYear(Number(e.target.value))
   })
 
+  // add data atrribute for reset to default
+  const element = document.querySelector(`#${pickerId}`);
+  if (resetToDefault && defaultDate && element) {
+    element.setAttribute("data-pb-date-picker", defaultDate?.toString());
+  }
+
   // Reverse month and year dropdown reset on form.reset()
   if (picker.input.form) {
     picker.input.form.addEventListener('reset', () => {

diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/docs/example.yml b/playbook/app/pb_kits/playbook/pb_date_picker/docs/example.yml
@@ -2,6 +2,7 @@ examples:
 
   rails:
   - date_picker_default: Default
+  - date_picker_reset_to_default: Reset to Default
   - date_picker_hide_icon: Hide Input Icon
   - date_picker_default_date: Default Date
   - date_picker_allow_input: Allow Input

diff --git a/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb b/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb
@@ -45,11 +45,12 @@
     class: "checkbox-class"
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
+  <%= form.date_picker :example_date_picker_2,  props: { label: true,  reset_to_default: true, default_date: "06/09/1994" } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>
-    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary", onclick: "resetDates()"  } %>
   <% end %>
 <% end %>