Add jQuery Date picker with month and year selection and a fix starting date

 Today, I have learned how to add a jQuery date picker in Drupal 9 theme. I am going to share the steps and codes here. 

Steps: 

1. Add jquery library to your drupal 9 theme

2. Create a jquery file for  jQuery date picker

3. Apply custom css code to customized your needs.

4. Attach library to theme file

5. Add the date picker to bootstrap 5 form


Dependencies: 

  1. jQuery
  2. jQuery Date Picker JavaScript
  3. Bootstrap 5
  4. Drupal 9


Step 1: 

Attach files to the theme's library for Drupal:

Open your themes libraries.yml file and put the following code: 

datepicker:
  version: VERSION
  css:
      theme:
        assets/custom/datepicker/datepicker.css: {}
  js:
      //code.jquery.com/jquery-3.6.0.js: { type: external }
      //code.jquery.com/ui/1.13.1/jquery-ui.js: { type: external }
      assets/custom/datepicker/datepicker.js: {}



Step 2: 

Create a JavaScript file as linked in libraries: (assets/custom/datepicker/datepicker.js) and put the following jQuery codes:


$( function() {
    $( "#datepicker" ).datepicker({
      showButtonPanel:true,
      changeMonth: true,
      changeYear: true,
      yearRange: "1971:"+(new Date).getFullYear(),
      maxDate: 0
    });
  } );

Codes Explanation:
    
showButtonPanel:true, To display "today" button on calendar.
changeMonth: true    To display "Month Selection" Dropdown on calendar.
changeYear: true    To display "Year Selection" Dropdown on calendar.
yearRange: "1971:"+(new Date).getFullYear(), To display "Year Selection Range" Starting from 1971 to the current year.
maxDate: 0    To display "Dates up to today" on Date selection on calendar.


Step 3:

Apply Some css to make the calendar beautiful:

 Create a css file as refereced on libraries file (assets/custom/datepicker/datepicker.css) and put the following css styles:

/* datepicker css */

.ui-datepicker {
    text-align: center;
}

.ui-datepicker-trigger {
    margin: 0 0 0 5px;
    vertical-align: text-top;
}

.ui-datepicker {
    font-family: Open Sans, Arial, sans-serif;
    margin-top: 2px;
    padding: 0 !important;
    border-color: #c9f0f5 !important;
}

.ui-datepicker {
    width: 256px;
}

.ui-datepicker table {
    width: 256px;
    table-layout: fixed;
}

.ui-datepicker-header {
    background-color: #3e9aba !important;
    background-image: none !important;
    border-radius: 0;
}

.ui-datepicker-title {
    line-height: 35px !important;
    margin: 0 10px !important;
}

.ui-datepicker-prev span {
    display: none !important;
}

.ui-datepicker-next {
    text-align: center;
}

.ui-datepicker-next span {
    display: none !important;
}

.ui-datepicker-prev {
    background-color: transparent !important;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAYAAACulacQAAAAUklEQVQYlXWPwQnAMAwDj9IBOlpH8CjdJLNksuujFIJjC/w6WUioFBcqJ7sGEAD5Y/hpqLRghRv4YQlUjqXI3Kql2MixraGbEhVcDXcFUR/1egEHNuTBpFW0NgAAAABJRU5ErkJggg==') !important;
    height: 12px !important;
    width: 7px !important;
    margin: 14px 12px;
    display: inline-block;
    left: 0 !important;
    top: 0 !important;
}

.ui-datepicker-next {
    cursor: pointer;
}

.ui-datepicker-prev {
    cursor: pointer;
}

.ui-datepicker-next {
    background-color: transparent !important;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAVUlEQVQYlXWQ0Q3AIAhEL07gKI7kKN2kI3Wk1w9to3KQEELucQEECOizhhTQGHFnwOdgobWx0GkZILfYBhXl0STVbPoBarbkL7ozN/F8VBBXh8uJgF5r2hrI4GHUkAAAAABJRU5ErkJggg==') !important;
    height: 12px !important;
    width: 8px !important;
    margin: 14px 12px;
    display: inline-block;
    right: 0 !important;
    top: 0 !important;
}

.openemr-calendar .ui-datepicker-next {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAOCAYAAAASVl2WAAAAtElEQVQYlXXQsUpCcRQH4I97EQyHa1pgIEE0hBGYL+BjNLRFjxXh4rM4F21BS4S4FAgqQioOngt/RM/6+zi/w4EanlA4MDkecYsO3vG/D8a4Rx03eMMqBQt8oodTXAdalwBm+IpNDVxG3aYEMMU3ujjDBT5SAH9R2cE58mwPFOgneJSCGp7RjLoXTEtQjbCFOV7xCxkqdp9sYxnhpFyb4QFXdh8c4Cc9Ko++OwzjFwfn5FiwBVeuI/K2UCkSAAAAAElFTkSuQmCC') !important;
    height: 14px !important;
    width: 8px !important;
    margin: 5px;
}

.ui-datepicker-month {
    border-radius: 2px;
    background-color: #3985a0;
    width: 110px !important;
    height: 22px;
    font-family: Open Sans !important;
    color: #fff;
    font-size: 14px !important;
    font-weight: 600;
    text-align: left;
    border: none !important;
    margin-right: 17px !important;
    vertical-align: text-top;
}
.ui-datepicker-year {
    border-radius: 2px;
    background-color: #3985a0;
    width: 61px !important;
    height: 22px;
    border: none !important;
    font-family: Open Sans !important;
    color: #fff;
    font-size: 14px !important;
    font-weight: 600;
    text-align: left;
    vertical-align: text-top;
}

.openemr-calendar .ui-datepicker-year {
    font-family: Open Sans, Arial, sans-serif;
    color: rgba(34, 34, 34, 0.87);
    font-size: 12px !important;
    font-weight: 700;
    text-align: center;
    transform: scaleX(1.0029)
}

.ui-datepicker-month option,
.ui-datepicker-year option {
    color: #3985a0 !important;
    background-color: #fff !important;
    font-family: Open Sans !important;
    font-size: 14px !important;
    font-weight: 600;
}

.ui-datepicker-month option[selected],
.ui-datepicker-year option[selected] {
    background-color: #e5edf0 !important;
}

.ui-datepicker .ui-state-hover {
    /*background: none !important;*/
    border: 0 !important;
}

.ui-datepicker td {
    vertical-align: top;
}

.ui-datepicker .ui-state-default {
    border-radius: 2px;
    border-color: #edebeb !important;
/*     background: white !important; */
    width: 24px;
    height: 24px;
    padding: 0 !important;
    line-height: 24px;
    text-align: center !important;
    font-family: Open Sans, Arial, sans-serif;
    color: #707070;
    font-size: 13px;
    font-weight: 400 !important;
    margin: 7px 0 0 4px;
}

.ui-datepicker .ui-state-default.ui-state-highlight{
    border-color: #dcdcdc;
    background-color: #cff3f8 !important;
    color: #3e9aba !important;
}

.openemr-calendar .ui-state-default {
    font-size: 10px;
    margin: 0;
}

.ui-datepicker td {
    width: 33px;
}

.ui-state-default.ui-state-hover {
    border-color: #dcdcdc;
    background-color: #cff3f8 !important;
}

.ui-datepicker .ui-state-active {
    border-color: #dcdcdc;
    background-color: #cff3f8 !important;
    color: #3e9aba !important;
}

.ui-datepicker-calendar thead tr th {
    font-family: Open Sans, Arial, sans-serif;
    color: #549fa8;
    font-size: 12px;
    font-weight: 400;
    padding: 0.45em 0.3em !important;
    /*   width: 15px !important; */
}

.openemr-calendar .ui-datepicker-calendar thead tr th {
    font-size: 10px;
}

.ui-datepicker-close {
    display: none;
}

.ui-datepicker thead {
    background-color: #f5f5f5;
}

.ui-state-default.ui-datepicker-current {
    float: none !important;
    font-family: Open Sans, Arial, sans-serif;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    border-width: 0 !important;
    border: none;
    vertical-align: top;
    margin: 0 !important;
    background-color: transparent !important;
}

.ui-datepicker-buttonpane.ui-widget-content {
    text-align: center;
    background-color: #3e9aba;
    margin: 0 !important;
    height: 28px;
    padding: 0 !important;
}


Step 4:

Attach the library to themes .yml file:

Open the twig theme file where you want to display the calendar and put the following content:

{{ attach_library('mubassir/datepicker') }}


Step 5:

Add the date picker to bootstrap 5 form:


Now finally locate your theme's region to display the jQuery Date picker and put the following code: 

<input type="text" class="form-control form-control-lg form-control-borderless" id="datepicker" name="created" placeholder="dd/mm/yyyy"/>

Voila, You can now see the jQuery Date Picker on your website





Comments

Post a Comment

Popular posts from this blog

Enable Theme Debug in Drupal 9

services.yml Navigate to  \sites\default create a the file sites/default/services.yml from sites/default/default.services.yml set the parameters as follows: parameters: twig.config: debug: true auto_reload: true cache: false settings.local.php  Navigate to / sites/ Make a copy of   example.settings.local.php   and rename it to   settings.local.php Locate the following lines and uncomment # $settings['cache']['bins']['render'] = 'cache.backend.null'; # $settings['cache']['bins']['page'] = 'cache.backend.null'; # $settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null'; settings.php Navigate to  sites\default Open  settings.php  and search for ' local.php ' You should then find the following code block if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) { include $app_root . '/' . $site_path . '/settings.local.php'; }
Read more

DSPace Send Email

 mail.extraproperties = mail.smtp.socketFactory.port=587, \                         mail.smtp.starttls.enable=true, \                         mail.smtp.starttls.required=true, \                         mail.smtp.ssl.protocols=TLSv1.2
Read more

Remove drupal 9 extensions from database

Image
  drush eval "\$module_data = \Drupal::config('core.extension')->get('module'); unset(\$module_data['MODULE_NAME']); \Drupal::configFactory()->getEditable('core.extension')->set('module', \$module_data)->save();" If you get any more warning like below:  Then run this commands too: drush php - eval "\Drupal::keyValue('system.schema')->delete('my_already_removed_module');" drush php - eval "\Drupal::keyValue('system.schema')->delete('update_test_0');" Source:https://drupal.stackexchange.com/questions/72927/manually-disable-a-module Contribution from: https://eduvai.com
Read more