Open a datepicker from a button | Angular Community | Page 1

fervent flame Nov 2, 2022, 7:37 PM

#

Hi, is it possible to open a datepicker (not material) from a button next to the input (and make the input invisible) ?

<div class="btn">
    <mat-icon>event</mat-icon>
    <span>Add Date</span>
    <input type="date" name="date" id="date">
</div>```

velvet basin Nov 2, 2022, 7:40 PM

#

Yes that is possible

fervent flame Nov 2, 2022, 7:40 PM

#

What would be the syntaxe of that ?

velvet basin Nov 2, 2022, 7:42 PM

#

Depends on the date picker but

@Component({
  template: `
<app-datepicker *ngIf="showPicker"></app-picker>
<input *ngIf="!showPicker">
  `,
})
export class TheComponent {
  public showPicker: boolean = false;
}

#

g!toh @fervent flame Have you built the Tour of Heroes apps from the tutorial in the Angular Guide? They are a great starting point for Angular because they show you some of what Angular can do and how to do it. I highly recommend that you put aside this current project and go do the tutorial. It will save you time.

graceful hearthBOT Nov 2, 2022, 7:43 PM

#

@fervent flame The place we recommend starting your Angular journey is with the Tour of Heroes tutorial, located here https://angular.io/tutorial.

fervent flame Nov 2, 2022, 7:44 PM

#

It's been 3.5+ years I'm doing Angular in entreprise, I did the ToH long time ago.
Only thing is, I never had the situation of where I need to open a datepicker from another button. I'm mostly using material, and with that they give you the ability to open the picker with the open() method, which I don't know if it exist for a "default" datepicker. When I say open the datepicker it's that I'm talking about (browser native datepicker) :

velvet basin Nov 2, 2022, 7:47 PM

#

How was I supposed to know that from your original question?

fervent flame Nov 2, 2022, 7:47 PM

#

I'm sorry maybe it wasn't clear enough 😦

velvet basin Nov 2, 2022, 7:48 PM

#

Basically you have an <input type="date" that is visually hidden by CSS.
Then you make a button that on click focuses the input element to display the picker.

#

you could probably use a label too

fervent flame Nov 2, 2022, 7:49 PM

#

Okey so display: none for the input, and then for the button it's something like : (click)="myInput.focus"?

#

I'm not sure for the syntaxe 🤔

velvet basin Nov 2, 2022, 7:50 PM

#

<label>
  <input type="date" class="visually-hidden">
  <i class="icon">date picker</i>
</label>

#

No, display none would remove it from the DOM. I doubt that would work. But try it.
I was suggesting https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

fervent flame Nov 2, 2022, 7:53 PM

#

Ok, wasn't aware visibity existed, that is intersting. So something like that ?

                            <div class="btn">
                                <mat-icon>event</mat-icon>
                                <span (pointerdown)="$event.preventDefault()" (click)="dateInput.focus">Add Date</span>
                                <input #dateInput type="date" style="visibility: hidden; position: absolute;" name="date" id="date">
                            </div>```
(didn't change for a label since it's a whole button, and the styling will go in the scss, just for now I placing it here for test purposes)

#

dateInput.focus doesn't seem to do anything, any idea why ?

velvet basin Nov 2, 2022, 7:55 PM

#

Apparently you need https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker

HTMLInputElement.showPicker() - Web APIs | MDN

The HTMLInputElement.showPicker() method displays the browser picker for an input element.

fervent flame Nov 2, 2022, 7:56 PM

#

Is it possible to have the showPicker() inline in the html ?

#

That's intersting, contreticts the doc

velvet basin Nov 2, 2022, 7:57 PM

#

You could try:

<label (click)="dateInpt.showPicker()">
  <input #dateInpt type="date" class="visually-hidden">
  <i class="icon">date picker</i>
</label>

#

What version of Angular are you using?

fervent flame Nov 2, 2022, 7:59 PM

#

That's weird, same with the code as you provided

velvet basin Nov 2, 2022, 8:01 PM

#

What version of Angular are you using?

#

Paste the complete output of ng version in a code block please

fervent flame Nov 2, 2022, 8:01 PM

#


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 14.2.6
Node: 16.13.1
Package Manager: npm 8.1.2 
OS: darwin arm64

Angular: 14.2.6
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.6
@angular-devkit/build-angular   14.2.6
@angular-devkit/core            14.2.6
@angular-devkit/schematics      14.2.6
@angular/cdk                    14.2.5
@angular/material               14.2.5
@schematics/angular             14.2.6
rxjs                            7.5.7
typescript                      4.7.4```

velvet basin Nov 2, 2022, 8:02 PM

#

Might just be your editor having old definitions/types.

#

does it work in ng serve or ng build?

fervent flame Nov 2, 2022, 8:03 PM

#

At runtime too :/

velvet basin Nov 2, 2022, 8:06 PM

#

Try it in a new Angular project. works just fine in mine. I assume your environment is broken subtly somehow

fervent flame Nov 2, 2022, 8:06 PM

#

That is so weird

velvet basin Nov 2, 2022, 8:09 PM

#

the definition file should be: node_modules/typescript/lib/lib.dom.d.ts

    /**
     * Sets the start and end positions of a selection in a text field.
     * @param start The offset into the text field for the start of the selection.
     * @param end The offset into the text field for the end of the selection.
     * @param direction The direction in which the selection is performed.
     */
    setSelectionRange(start: number | null, end: number | null, direction?: "forward" | "backward" | "none"): void;
    showPicker(): void;
    /**
     * Decrements a range input control's value by the value given by the Step attribute. If the optional parameter is used, it will decrement the input control's step value multiplied by the parameter's value.
     * @param n Value to decrement the value by.
     */
    stepDown(n?: number): void;

#

It is a relatively new feature; version 99 wasn't that long ago:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker#browser_compatibility

HTMLInputElement.showPicker() - Web APIs | MDN

The HTMLInputElement.showPicker() method displays the browser picker for an input element.

fervent flame Nov 2, 2022, 8:12 PM

#

Maybe I should update to ng 14.2.0 to 14.2.8

#

Because I indeed don't see it in the node_modules the showPicker method

velvet basin Nov 2, 2022, 8:14 PM

#

It was added 5 months ago to TypeScript
https://github.com/microsoft/TypeScript/commit/6004b35ce4c9ed1c9e8c1e450068ef3f9c4cbd5c

GitHub

Update 4.8 DOM from Typescript-DOM-lib-generator (#49596) · microso...

#

version 4.8.4. But even with typescript 4.6.4 that code compiles for me

#

If I run ng build with a typo I get:

Error: src/app/user-input/user-input.component.html:118:26 - error TS2339: Property 'showPiker' does not exist on type 'HTMLInputElement'.

118     <button (click)="foo.showPiker()">Open</button>
                             ~~~~~~~~~

  src/app/user-input/user-input.component.ts:55:16
    55   templateUrl: './user-input.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component UserInputComponent.

If I fix the typo to foo.showPicker() it builds just fine.

fervent flame Nov 2, 2022, 8:16 PM

#

I'm on typescript 4.7, so that's probably it

velvet basin Nov 2, 2022, 8:16 PM

#

What is your lib in tsconfig.json?

{
    "lib": [
      "es2020",
      "dom",
      "dom.iterable"
    ],

fervent flame Nov 2, 2022, 8:17 PM

#

velvet basin version 4.8.4. But even with typescript 4.6.4 that code compiles for me

Ah didn't see that

velvet basin Nov 2, 2022, 8:17 PM

#

Perhaps it is that I added dom.iterable to my list. Seems like the default is:

{
    "lib": [
      "es2020",
      "dom"
    ]

fervent flame Nov 2, 2022, 8:18 PM

#

mmh yes it's default that, so I added dom.itarable but it doesn't seem to fix the issue

velvet basin Nov 2, 2022, 8:19 PM

#

Probably you will have to do it in your TS code so you can do:

// @ts-expect-error showPicker was introduced in typescript 4.8.4
this.dateInput.nativeElement.showPicker()

fervent flame Nov 2, 2022, 8:19 PM

#

Okey I upgrade to 4.8.4 it fixes the issue

velvet basin Nov 2, 2022, 8:19 PM

#

That is a risky upgrade...

fervent flame Nov 2, 2022, 8:19 PM

#

Oh, why is that ?

#

Is it because it won't be compatible with angular ?

velvet basin Nov 2, 2022, 8:20 PM

#

because v4.7 and v4.8 are different. And because Angular hasn't declared itself compatible with v4.8 yet

fervent flame Nov 2, 2022, 8:20 PM

#

Okey I see... 🤔

fervent flame Nov 2, 2022, 8:22 PM

#

velvet basin Probably you will have to do it in your TS code so you can do: ```ts // @ts-expe...

I revertet to 4.7, and added that and it looks like it solve the TS error

#

Thank you for your help !

#Open a datepicker from a button