Describe the bug <TextField type="date" /> can't use browser-native datepicker.

To Reproduce

<TextField type="date" value />

Expected behavior can use browser-native datepicker.

Screenshots

Desktop (please complete the following information):

OS: macOS Bigsur
Browser Chrome
Version: 91

Additional context Material UI can browser-native datepicker.
https://material-ui.com/components/pickers/#datepickers

Jul 06 '21 06:07 tamanugi

This change is a direct result from https://github.com/material-components/material-components-web/pull/6243

I think the intention is that the native picker is disabled so that the MUI implementation will have its own for cross-browser support.

One work around we found was to override the CSS that hides the picker:

.mdc-text-field__input::-webkit-calendar-picker-indicator {
  display: initial;
}

Aug 06 '21 06:08 theStuRat

How to override the CSS @theStuRat ?

Edit: Found it, add this in node_modules/@smui/textfield/Input.svelte

<style>
    .mdc-text-field__input::-webkit-calendar-picker-indicator {
        display: initial;
    }
</style>

Sep 12 '21 07:09 risalfajar

@risalfajar

I would recommend you not change the node_modules directly as that will be overwritten the next time you update your project modules. I added that CSS inside the svelte component that was using the date TextField

Sep 18 '21 04:09 theStuRat

You can just add an extra .css file after loading the smui/bare.css with the extra style override: .mdc-text-field__input::-webkit-calendar-picker-indicator { display: initial; }

This way, you don't modify node_modules.

However, the other issue is that the input type=date placeholder ("mm/dd/yyyy") overlaps the field label when not focused.

Dec 23 '21 20:12 elirov

In Svelte file:

<style>
    :global(.mdc-text-field__input::-webkit-calendar-picker-indicator) {
        display: initial !important;
    }    
</style>

Note the 'important' modifier !

Jun 01 '22 12:06 IvankoB

that is not a good enough solution, because you will still see the native icon of the <input type"date"> in the textField, i tried to open it with javascript I tried to add a click event on the icon #input..showPicker() but I cant get access on the dom input element, even with Manual setup, anyone knows how to access to the imput elements methods

<script lang="ts">
    let datePicker: HTMLInputElement;
</script>
<TextField class="display-block date-show-calendar"
           label="Expire"
           on:change={handleChange}
           on:blur={handleChange}
           bind:input={datePicker}
           variant="filled">
      <Icon class="material-icons"
               on:click={()=>datePicker.showPicker()}
               slot="leadingIcon">event</Icon>
      <Input
               type="date"
               bind:el={fff}
               bind:this={datePicker}
               bind:value={$form.expiresAt}
               id="input-manual-c"
               aria-controls="helper-text-manual-c"
               aria-describedby="helper-text-manual-c"
      />
      <HelperText slot="helper">01/02/2006</HelperText>
</TextField>

Jun 27 '22 03:06 isaacwein

Forgive me if I'm wrong, but type="date" is deprecated. <input type="datetime-local"> is the one you need, right?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

I'm sorry if the answer has already been discussed. I've been very distracted recently.

Jun 27 '22 03:06 hperrin

I think you confusing date with datetime, date is for a date picker only, datetime has a time picker in it too

Jun 27 '22 04:06 isaacwein

I found a complicated solution checkout my stackblitz the only way to get the HTMLInputElement is by the id, i know it's not ideal, but I wasn't able to find any other way to trigger the native input.showPicker(), it will be great if they add this event on the Input component this event is to trigger from javascript the date, file, or color picker panel

Jun 27 '22 06:06 isaacwein

I've found a simple solution:

<script lang="ts">
  import Textfield from "@smui/textfield";
  import IconButton from "@smui/icon-button";

  let dob = "";

  function showDatePicker() {
    // @ts-ignore
    document.querySelector("input[type=date]").showPicker();
  }
</script>

<Textfield variant="outlined" bind:value={dob} label="Date of Birth" type="date">
  <IconButton on:click={showDatePicker} class="material-icons" slot="trailingIcon" style="bottom: 5px; right: 5px;">calendar_month</IconButton>
</Textfield>

Aug 25 '22 07:08 topazrn

This would only work if you have one date input in your DOM. Might be able to pass the I put element, 'this', into your showDatePicker

On Thu, Aug 25, 2022, 16:35 Topaz RN @.***> wrote:

I've found a simple solution:
calendar_month
[image: image] https://user-images.githubusercontent.com/40129033/186603860-8bb9cc41-8174-49ef-aa6f-259c6a8385b5.png

— Reply to this email directly, view it on GitHub https://github.com/hperrin/svelte-material-ui/issues/268#issuecomment-1226888838, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIDEGAGOWHQSOPWD4CHALUDV24O4PANCNFSM4735KJRQ . You are receiving this because you were mentioned.Message ID: @.***>

Aug 25 '22 09:08 theStuRat

Haven't tested it too much, but this should work:

<script>
  import Textfield from "@smui/textfield";
  import Icon from "@smui/textfield/icon";
  import HelperText from "@smui/textfield/helper-text";

  let date = "";

  function clicked(e) {
    if (e.target?.nodeName === "INPUT") {
      e.target.showPicker()
    }
  }

</script>

<Textfield on:click={clicked} variant="outlined" bind:value={date} type="date">
  <Icon class="material-icons" slot="trailingIcon">today</Icon>
  <HelperText>{helperText}</HelperText>
</Textfield>