मुझे केवल साल और महीने के साथ मैट-डेट-रेंज-पिकर का उपयोग करने का तरीका खोजने में परेशानी हो रही है ... क्या आप लोगों को पहले से ही ऐसा करने का कोई तरीका मिल गया है? :)

मैंने दिनांक पिकर के लिए दस्तावेज़ीकरण में उपयोग किए गए समान फ़ंक्शन का उपयोग करने का प्रयास किया है, लेकिन मुझे दूसरी तारीख के लिए पॉप अप को पुनरारंभ करने का कोई तरीका नहीं मिला ....

<mat-datepicker #dp
                  startView="multi-year"
                  (yearSelected)="chosenYearHandler($event)"
                  (monthSelected)="chosenMonthHandler($event, dp)"
                  panelClass="example-month-picker">
</mat-datepicker>

सभी को अग्रिम धन्यवाद \o/

1
Courbin .Francis 19 मार्च 2021, 19:26
1
सुनिश्चित नहीं है कि आप कहाँ फंस गए हैं। क्या आप कृपया विस्तृत कर सकते हैं ..
 – 
Nirmalya Roy
19 मार्च 2021, 19:36
डॉक्स में अंतिम उदाहरण काम न करें:material.angular.io/components/datepicker/examples< /ए> ?
 – 
Eliseo
21 मार्च 2021, 15:19

2 जवाब

सबसे बढ़िया उत्तर

यहां महीने के रेंज-पिकर पॉपअप का एक उदाहरण दिया गया है। पॉपअप बनाने के लिए बस इसका इस्तेमाल करें। DEMO

1
Naman Jain 21 मार्च 2021, 10:46
यह वही है जो मैं चाहता हूँ :)। लेकिन कोणीय सामग्री में कोई उदाहरण नहीं है?
 – 
Courbin .Francis
22 मार्च 2021, 11:03
कम से कम, जो मुझे करने की ज़रूरत है उसके लिए वह चाल चलेगा :) धन्यवाद :)
 – 
Courbin .Francis
22 मार्च 2021, 13:52
ईमानदार होने के लिए कोणीय सामग्री में खराब दस्तावेज हैं।
 – 
Naman Jain
22 मार्च 2021, 14:37

मैं कोणीय तकनीक के साथ एक एप्लिकेशन विकसित कर रहा हूं, मैं इस समस्या में भाग गया और हर जगह देखा कि कोणीय सामग्री के साथ समाधान कैसे दिया जाए, लेकिन ऐसा नहीं है, मैं इसे निम्नलिखित के साथ हल करने में कामयाब रहा (कोड में सुधार किया जा सकता है):

फ़ाइल एचटीएमएल में:

<mat-form-field appearance="fill">
    <mat-label>date</mat-label>
    <mat-date-range-input [rangePicker]="picker">
        <input matStartDate placeholder="Start date" formControlName="mesIni">
        <input matEndDate placeholder="End date" formControlName="mesFin">
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker id="picker" #picker disabled="false" startView="multi-year"
                           (monthSelected)="chosenMonthHandler($event, picker)" (click)="true">
    </mat-date-range-picker>
</mat-form-field>

फ़ाइल टीएस में:

formBusqueda: FormGroup;
//flag to identify if the start date or end date is entered
mclick = 0;

ngOnInit() {}

get controls() {
    return this.formBusqueda.controls;
}

public chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>):void {
    this.mclick++;

    if (this.mclick == 1) {
        const ctrlValue = this.controls.mesIni.value;
        ctrlValue.month(normalizedMonth.month());
        this.controls.mesIni.setValue(ctrlValue);
        
        datepicker.close();

        //It can improve
        var inter = setInterval(() => {
            let htmlElem: HTMLCollectionOf<HTMLElement> = document.getElementsByClassName('mat-focus-indicator mat-icon-button mat-button-base') as HTMLCollectionOf<HTMLElement>;

            //Here it is important to put the id of the element that is clicked to open the calendar
            htmlElem[1].click();
            clearInterval(inter);
        }, 50);
    } else if (this.mclick == 2) {
        const ctrlValue = this.controls.mesFin.value;
        ctrlValue.month(normalizedMonth.month());
        this.controls.mesFin.setValue(ctrlValue);
        datepicker.close();
        this.mclick = 0;
    }
}

कैलेंडर को देरी से बंद करने और फिर से खोलने की चाल है, यह आदर्श नहीं है लेकिन इसे हल करने का एक तरीका है।

0
Alex Villatoro 14 सितंबर 2021, 08:44