-1
  • How to create a custom module?
  • Which files should be there in the custom module?
  • How to get the form_id and the exact location of the attribute for which the change is required?

closed as too broad by leymannx, Jdrupal, mradcliffe, prkos, Krishna Mohan Sep 16 at 14:54

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

2

The webform below shows how to alter the datepicker options without using a custom module via Drupal.webform.datePicker.options

uuid: 164b1057-cb1f-4329-abcf-5f85e49c5049
langcode: en
status: open
dependencies: {  }
open: null
close: null
weight: 0
uid: 1
template: false
archive: false
id: datepicker_icon
title: 'How can I change the calendar icon?'
description: ''
category: ''
elements: |
  date:
    '#type': date
    '#title': date
    '#datepicker': true
    '#datepicker_button': true
css: ''
javascript: |
  Drupal.webform = Drupal.webform || {};
  Drupal.webform.datePicker = Drupal.webform.datePicker || {};
  Drupal.webform.datePicker.options = Drupal.webform.datePicker.options || {};
  Drupal.webform.datePicker.options.buttonImage = 'https://cdn3.iconfinder.com/data/icons/database-line/128/calendar_date_schedule_datepicker-128.png';
settings:
  ajax: false
  ajax_scroll_top: form
  ajax_progress_type: ''
  ajax_effect: ''
  ajax_speed: null
  page: true
  page_submit_path: ''
  page_confirm_path: ''
  page_admin_theme: false
  form_title: both
  form_submit_once: false
  form_exception_message: ''
  form_open_message: ''
  form_close_message: ''
  form_previous_submissions: true
  form_confidential: false
  form_confidential_message: ''
  form_remote_addr: true
  form_convert_anonymous: false
  form_prepopulate: false
  form_prepopulate_source_entity: false
  form_prepopulate_source_entity_required: false
  form_prepopulate_source_entity_type: ''
  form_reset: false
  form_disable_autocomplete: false
  form_novalidate: false
  form_disable_inline_errors: false
  form_required: false
  form_unsaved: false
  form_disable_back: false
  form_submit_back: false
  form_autofocus: false
  form_details_toggle: false
  form_access_denied: default
  form_access_denied_title: ''
  form_access_denied_message: ''
  form_access_denied_attributes: {  }
  form_file_limit: ''
  submission_label: ''
  submission_log: false
  submission_views: {  }
  submission_views_replace: {  }
  submission_user_columns: {  }
  submission_user_duplicate: false
  submission_access_denied: default
  submission_access_denied_title: ''
  submission_access_denied_message: ''
  submission_access_denied_attributes: {  }
  submission_exception_message: ''
  submission_locked_message: ''
  submission_excluded_elements: {  }
  submission_exclude_empty: false
  submission_exclude_empty_checkbox: false
  previous_submission_message: ''
  previous_submissions_message: ''
  autofill: false
  autofill_message: ''
  autofill_excluded_elements: {  }
  wizard_progress_bar: true
  wizard_progress_pages: false
  wizard_progress_percentage: false
  wizard_progress_link: false
  wizard_start_label: ''
  wizard_preview_link: false
  wizard_confirmation: true
  wizard_confirmation_label: ''
  wizard_track: ''
  preview: 0
  preview_label: ''
  preview_title: ''
  preview_message: ''
  preview_attributes: {  }
  preview_excluded_elements: {  }
  preview_exclude_empty: true
  preview_exclude_empty_checkbox: false
  draft: none
  draft_multiple: false
  draft_auto_save: false
  draft_saved_message: ''
  draft_loaded_message: ''
  draft_pending_single_message: ''
  draft_pending_multiple_message: ''
  confirmation_type: page
  confirmation_title: ''
  confirmation_message: ''
  confirmation_url: ''
  confirmation_attributes: {  }
  confirmation_back: true
  confirmation_back_label: ''
  confirmation_back_attributes: {  }
  confirmation_exclude_query: false
  confirmation_exclude_token: false
  confirmation_update: false
  limit_total: null
  limit_total_interval: null
  limit_total_message: ''
  limit_total_unique: false
  limit_user: null
  limit_user_interval: null
  limit_user_message: ''
  limit_user_unique: false
  entity_limit_total: null
  entity_limit_total_interval: null
  entity_limit_user: null
  entity_limit_user_interval: null
  purge: none
  purge_days: null
  results_disabled: false
  results_disabled_ignore: false
  token_update: false
access:
  create:
    roles:
      - anonymous
      - authenticated
    users: {  }
    permissions: {  }
  view_any:
    roles: {  }
    users: {  }
    permissions: {  }
  update_any:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_any:
    roles: {  }
    users: {  }
    permissions: {  }
  purge_any:
    roles: {  }
    users: {  }
    permissions: {  }
  view_own:
    roles: {  }
    users: {  }
    permissions: {  }
  update_own:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_own:
    roles: {  }
    users: {  }
    permissions: {  }
  administer:
    roles: {  }
    users: {  }
    permissions: {  }
  test:
    roles: {  }
    users: {  }
    permissions: {  }
  configuration:
    roles: {  }
    users: {  }
    permissions: {  }
handlers: {  }

The key is adding the JS snippet below to your webform CSS/JS (admin/structure/webform/manage/WEBFORM_ID/settings/assets)

Drupal.webform = Drupal.webform || {};
Drupal.webform.datePicker = Drupal.webform.datePicker || {};
Drupal.webform.datePicker.options = Drupal.webform.datePicker.options || {};
Drupal.webform.datePicker.options.buttonImage = 'https://cdn3.iconfinder.com/data/icons/database-line/128/calendar_date_schedule_datepicker-128.png';
2
  • First we need to create a custom module called admissionform, follow this path modules/custom/admissionform
  • We need to create 2 files inside the custom module called admissionform.module and admission.info.yml

admissionform.info.yml

name: admissionform
description: To change the calander icon.
package: Custom

type: module
core: 8.x

admissionform.form.module

<?php
use Drupal\Core\Form\FormStateInterface;

// Hook to change the calendar button image
function admissionform_form_alter(&$form, FormStateInterface $form_state, $form_id) {
 if($form_id=="webform_submission_collateral_form_add_form"){
    // var_dump($form);
    $form['elements']['date_of_event_']['#attached']['drupalSettings']['webform']['datePicker']['buttonImage'] = '/modules/custom/admissionform/images/elements/date-calendar-1.png';
  }
}

The icon image should be put at this path modules/custom/admissionform/images/elements/date-calendar-1.png

To know form_id, we can do var_dump($form_id) and to get the attributes of the form we can do var_dump($form)

Not the answer you're looking for? Browse other questions tagged or ask your own question.