Question

我正在浏览link以make a datepicker on the webpage。我从上面提到的链接中复制了以下代码：

   <div class="item item-1" fxFlex="50%" fxFlexOrder="1">
      <mat-form-field>
         <input matInput [matDatepicker]="picker" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
         <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
         <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
   </div>

上述代码适用于一个datepicker，但在my application I want multiple Datepickers中。

我尝试复制上面的代码两次，以便在页面上有多个日期选择器，但我只能在那里获得占位符而无法选择日期。

我想知道我需要在上面的代码中做些什么更改才能在网页上有多个日期选择器。

Answer 1

你必须为他们使用不同的名字[matDatepicker] =＆＃34; picker1＆＃34;以及另一个像这样的选择器2

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion '26.0.2'
    defaultConfig {
        multiDexEnabled true
        applicationId "com.example.aaronliang.flow_v1"
        minSdkVersion 15
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:26.1.0'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.android.volley:volley:1.0.0'
    compile 'com.github.bumptech.glide:glide:3.7.0'
    compile 'com.google.firebase:firebase-firestore:11.6.0'
    compile 'com.google.firebase:firebase-auth:11.6.0'
    compile 'com.google.firebase:firebase-core:11.6.0'
    compile 'com.google.android.gms:play-services:11.6.0'
    compile 'com.github.woxthebox:draglistview:1.5.0'
    //compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'
    compile 'com.jjoe64:graphview:4.2.1'
    testCompile 'junit:junit:4.12'
}
apply plugin: 'com.google.gms.google-services'

configurations.all {
    resolutionStrategy.eachDependency { DependencyResolveDetails details ->
        def requested = details.requested
        if (requested.group == 'com.android.support') {
            if (!requested.name.startsWith("multidex")) {
                details.useVersion '25.3.1'
            }
        }

    }
}

和第二个

<div class="item item-1" fxFlex="50%" fxFlexOrder="1">
     <mat-form-field>
        <input matInput [matDatepicker]="picker" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
     </mat-form-field>
</div>

我们怎样才能在Angular Material中有多个Datepickers？

1 个答案: