How can I change the Webform module date picker calendar icon? [closed]

Question

• 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?

Answer 1

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';

Answer 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)