Textfield with type="date" can't use native datepicker

[tamanugi]

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

[theStuRat]

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

[risalfajar]

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>

[theStuRat]

@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

[elirov]

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.

[IvankoB]

In Svelte file:

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

Note the 'important' modifier !

[isaacwein]

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>

[hperrin]

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.

[isaacwein]

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

[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

[topazrn]

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>

[theStuRat]

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: @.***>

[chrispahm]

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>

[shadowempire123]

@chrispahm: that's working. not as nice (the icon does not "ripple") but works :) thx

[NickantX]

@chrispahm: that's working. not as nice (the icon does not "ripple") but works :) thx

Probably simple to implement with the ripple component https://sveltematerialui.com/demo/ripple

[bitlogist]

Will a component like Angular Datepicker be added to the SMUI library?