0

I am using a view created with the views module. The view displays all change requests, and I wanted to expose a filter to users to be able to filter the change requests by date.

The change requests themselves use the daterange field, which I was able to find and expose in Filter Criteria. All of this worked well, but for some reason this filter creates an input field of type "text" which is not user friendly, as users have to type in a machine-recognized input similar to CCYY-MM-DD HH:MM:SS.

I was able to use the chrome developer tools to change the type to "datetime-local" which created a date & time widget that eliminated the need for users to enter the times manually, but I don't know the best way to change this.

Attempt

My first thought was to use jQuery to change the type, so I was able to find this question that gave me a hint as to how it is done.

My result was the following code snippet: $('#edit-field-date-value-min').attr('type', 'text');

When this didn't work, I tried $('#edit-field-date-value-min').get(0).type = 'text';

Neither of these worked for me unfortunately.

More Info

I have twig debugging enabled, and it is showing me that it is outputting from input.form.twig as per the below screenshot, but there is only one line in that file which is:

<input{{ attributes }} />{{ children }}

enter image description here

So I am not sure if this is something within drupal, or if I have to override the daterange module, or what I have to do.

Preferred solution

Ideally, I want to know how to actually generate the html so that the input is automatically created with the type "datetime-local" instead of using jQuery to change it after the fact. I know how to edit twig templates, but I don't know how to figure out which template to use, or how to target this specific element.

Question Summary

So to summarize my question: What do I need to do in order for this daterange filter to create an input of type "datetime-local" instead of "text"?

2 Answers 2

1

This hook_preprocess_input__textfield() hook can be use: to convert field type from text to datetime-local

function Mymodulename_preprocess_input__textfield(&$vars) {
  $view_id = \Drupal::routeMatch()->getParameter('view_id');
  // Added condition so that code execute for specfied view.
  if (!empty($view_id) && $view_id == 'view_machine_name') {
    // Added Check to find whether specified exist in the view & code execute for specified field only
    if(isset($vars['element']['#name']) && $vars['element']['#name'] == 'field_name'){
      // convert input type to datetime-local
      $vars['attributes']['type'] = 'datetime-local';
    }
  }
}

Note: You can print this variable "$vars['element']['#name']" to get machine name of field name

You can add or remove conditions added inside hook_preprocess_input__textfield() hook as per logic

click here for more documentation

1
  • This solution worked. To clarify for others, I had to create a custom module and place this into the module_name.module file. As per mini, I was able to get the view and field machine names using print(). Nov 17, 2023 at 19:12
0

To make the daterange filter create an input of type "datetime-local" instead of "text", you'll need to modify the template that is being used to render the filter.

In your case, it looks like the template is being defined in input.form.twig. To change the input type, you'll need to find the line in the template that is rendering the input field, and modify it to use the type="datetime-local" attribute instead of type="text".

Here's an example of how you might do this:

<input{{ attributes }} />{{ children }}

In this example, the attributes variable contains the attributes that are being applied to the input field, and the children variable contains the content that is being displayed inside the input field.

To change the input type, you can simply add the type="datetime-local" attribute to the attributes variable, like this:

<input{{ attributes }} type="datetime-local" />{{ children }}

This will render an input field with the type "datetime-local" instead of "text".

I hope this helps!

1
  • 1
    Thanks for the answer, but wouldn't this alter all of the inputs on all forms using this twig template to be type="datetime-local"? Nov 17, 2023 at 19:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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