javascript - কৌণিক 2 উপাদান 2 তারিখ চয়নকারী তারিখ ফর্ম্যাট




angular angular-material2 (8)

আমার সাহায্য দরকার. আমি জানি না কীভাবে 2 ডেটপিকারের উপাদানটির তারিখ বিন্যাসটি পরিবর্তন করতে হয়। আমি ডকুমেন্টেশন পড়েছি তবে আমার আসলে কী করা দরকার তা আমি বুঝতে পারি না। আউটপুট তারিখের ফর্ম্যাটটি যা ডেটপিকারটি ডিফল্ট হিসাবে সরবরাহ করে তা হল: 6/9/2017

আমি যেটি অর্জনের চেষ্টা করছি তা হ'ল 9-জুন -2017 বা অন্য কোনওটিতে ফর্ম্যাট পরিবর্তন করা।

ডকুমেন্টেশন https://material.angular.io/components/component/datepicker घटक/ https://material.angular.io/components/component/datepicker আমাকে মোটেও সহায়তা করে না। আগাম ধন্যবাদ


আপনাকে কেবল একটি কাস্টম MAT_DATE_FORMATS

export const APP_DATE_FORMATS = {
    parse: {dateInput: {month: 'short', year: 'numeric', day: 'numeric'}},
    display: {
        dateInput: {month: 'short', year: 'numeric', day: 'numeric'},
        monthYearLabel: {year: 'numeric'}
    }
};

এবং এটি সরবরাহকারীদের সাথে যুক্ত করুন।

providers: [{
   provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
}]

ওয়ার্কিং code


আপনি ইতিমধ্যে একটি লাইব্রেরি ব্যবহার করেছেন যে জাভাস্ক্রিপ্টে আপনাকে পার্সিং, যাচাইকরণ, প্রদর্শন, ইত্যাদি তারিখ এবং সময়গুলি পরিচালনা করার একটি উপযুক্ত উপায় সরবরাহ করে way যদি আপনি না পান তবে উদাহরণস্বরূপ moment.js

Moment.js ব্যবহার করে আপনার কাস্টম অ্যাডাপ্টারটি প্রয়োগ করা এটির মতো দেখায়।

কাস্টমডেটএডাপ্টার.টিস তৈরি করুন এবং এটি এর মতো প্রয়োগ করুন:

import { NativeDateAdapter } from "@angular/material";
import * as moment from 'moment';

export class CustomDateAdapter extends NativeDateAdapter {
    format(date: Date, displayFormat: Object): string {
        moment.locale('ru-RU'); // Choose the locale
        var formatString = (displayFormat === 'input')? 'DD.MM.YYYY' : 'LLL';
        return moment(date).format(formatString);
    }
}

আপনার app.module.ts এ :

import { DateAdapter } from '@angular/material';

providers: [
    ...
    {
        provide: DateAdapter, useClass: CustomDateAdapter
    },
    ...
]

এটাই. সহজ, সহজ এবং সাইকেলের পুনর্নবীকরণের প্রয়োজন নেই।


আমি @ আইগর-জাঙ্কোভি'র সমাধান প্রস্তাবটি ব্যবহার করেছি এবং "ত্রুটি: আনকনড (প্রতিশ্রুতিতে): টাইপ এয়ারার: ​​অপরিজ্ঞাত সম্পত্তি 'ডেটইনপুট' পড়তে পারি না"। আমি বুঝতে পেরেছিলাম যে এই সমস্যাটি কারণ MY_DATE_FORMATS type MdDateFormats মতো ঘোষণা করা দরকার:

export declare type MdDateFormats = {
    parse: {
        dateInput: any;
    };
    display: {
        dateInput: any;
        monthYearLabel: any;
        dateA11yLabel: any;
        monthYearA11yLabel: any;
    };
};

সুতরাং, MY_DATE_FORMATS ঘোষণার সঠিক উপায় হ'ল:

const MY_DATE_FORMATS:MdDateFormats = {
   parse: {
       dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
   },
   display: {
       dateInput: 'input',
       monthYearLabel: {year: 'numeric', month: 'short'},
       dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
       monthYearA11yLabel: {year: 'numeric', month: 'long'},
   }
};

উপরোক্ত পরিবর্তনটি দিয়ে আমার জন্য সমাধানটি কাজ করে।

শুভেচ্ছা সহ


আমি এখানে এটির জন্য একমাত্র সমাধানটি পেয়েছি:

প্রথমে কনস্ট তৈরি করুন:

const MY_DATE_FORMATS = {
   parse: {
       dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
   },
   display: {
       // dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
       dateInput: 'input',
       monthYearLabel: {year: 'numeric', month: 'short'},
       dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
       monthYearA11yLabel: {year: 'numeric', month: 'long'},
   }
};

তারপরে আপনাকে নেটিভেটেটড্যাডাপ্টার প্রসারিত করতে হবে:

export class MyDateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat: Object): string {
       if (displayFormat == "input") {
           let day = date.getDate();
           let month = date.getMonth() + 1;
           let year = date.getFullYear();
           return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
       } else {
           return date.toDateString();
       }
   }

   private _to2digit(n: number) {
       return ('00' + n).slice(-2);
   } 
}

ফর্ম্যাট ফাংশনে, আপনি যে ফর্ম্যাটটি চান তা চয়ন করতে পারেন

এবং শেষ পদক্ষেপ, আপনাকে এটি মডিউল সরবরাহকারীগুলিতে যুক্ত করতে হবে:

providers: [
    {provide: DateAdapter, useClass: MyDateAdapter},
    {provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS},
],

এবং এটাই. আমি বিশ্বাস করতে পারি না যে @ ইনপুটটির মাধ্যমে তারিখের ফর্ম্যাট পরিবর্তন করার কোনও সহজ উপায় নেই তবে আসুন আশা করি এটি ভবিষ্যতের উপাদান 2 এর কিছু সংস্করণে প্রয়োগ করা হবে (বর্তমানে বিটা 6 )।


কেন কৌণিক ডেট পাইপ ব্যবহার করবেন না?

import {Component} from '@angular/core';
import {DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter} from '@angular/material';
import {FormControl} from '@angular/forms';
import {DatePipe} from '@angular/common';

export const PICK_FORMATS = {
    parse: {dateInput: {month: 'short', year: 'numeric', day: 'numeric'}},
    display: {
        dateInput: 'input',
        monthYearLabel: {year: 'numeric', month: 'short'},
        dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
        monthYearA11yLabel: {year: 'numeric', month: 'long'}
    }
};
class PickDateAdapter extends NativeDateAdapter {
    format(date: Date, displayFormat: Object): string {
        if (displayFormat === 'input') {
            return new DatePipe('en-US').transform(date, 'EEE, MMM dd, yyyy');
        } else {
            return date.toDateString();
        }
    }
}
@Component({
    selector: 'custom-date',
    template: `<mat-form-field>
                   <input matInput [formControl]="date" />
                   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                   <mat-datepicker #picker></mat-datepicker>
               </mat-form-field>`,
    providers: [
        {provide: DateAdapter, useClass: PickDateAdapter},
        {provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS}
    ]
})
export class DateComponent {
    date = new FormControl(new Date());
    constructor() {}
}

ডকুমেন্টেশন থেকে:

Customizing the parse and display formats

The MD_DATE_FORMATS object is just a collection of formats that the datepicker uses when parsing and displaying dates. These formats are passed through to the DateAdapter so you will want to make sure that the format objects you're using are compatible with the DateAdapter used in your app. This example shows how to use the native Date implementation from material, but with custom formats.

@NgModule({
  imports: [MdDatepickerModule],
  providers: [
    {provide: DateAdapter, useClass: NativeDateAdapter},
    {provide: MD_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS},
  ],
})
export class MyApp {}
  1. এনজিডমুলেলে প্রয়োজনীয় যোগ করুন।
  2. আপনার নিজস্ব ফর্ম্যাট তৈরি করুন - MY_NATIVE_DATE_FORMATS

রোবস্টে নিখুঁতভাবে কাজ করেছেন !!

আমি সহজ করেছিলাম (কৌণিক 4 "@ কৌণিক / উপাদান": "^ 2.0.0-বিটা.10") প্রথম তৈরি তারিখপিকার.মডিউল.ট



    import { NgModule }  from '@angular/core';
    import { MdDatepickerModule, MdNativeDateModule, NativeDateAdapter, DateAdapter, MD_DATE_FORMATS  }  from '@angular/material';

    class AppDateAdapter extends NativeDateAdapter {
        format(date: Date, displayFormat: Object): string {
            if (displayFormat === 'input') {
                const day = date.getDate();
                const month = date.getMonth() + 1;
                const year = date.getFullYear();
                return `${year}-${month}-${day}`;
            } else {
                return date.toDateString();
            }
        }
    }

    const APP_DATE_FORMATS = {
    parse: {
    dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
    },
    display: {
    // dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
    dateInput: 'input',
    monthYearLabel: {year: 'numeric', month: 'short'},
    dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
    monthYearA11yLabel: {year: 'numeric', month: 'long'},
    }
    };

    @NgModule({
    declarations:  [ ],
    imports:  [ ],
        exports:  [ MdDatepickerModule, MdNativeDateModule ],
    providers: [
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MD_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }
    ]
    })

    export class DatePickerModule {

    }

শুধু এটি আমদানি করুন (app.module.ts)


    import {Component, NgModule, VERSION,  ReflectiveInjector}   from '@angular/core'//NgZone,
    import { CommonModule }              from '@angular/common';
    import {BrowserModule}               from '@angular/platform-browser'
    import { BrowserAnimationsModule }        from '@angular/platform-browser/animations';
    import { FormsModule }              from '@angular/forms';
    import { DatePickerModule }            from './modules/date.picker/datepicker.module';

    @Component({
    selector: 'app-root',
    template: `
    <input (click)="picker.open()" [mdDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="datepicker.SearchDate"  >
    <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
    <md-datepicker #picker touchUi="true"  ></md-datepicker>
    `,
    })


    export class App{
        datepicker = {SearchDate:new Date()}
        constructor( ) {}

        }

    @NgModule({
    declarations: [ App ],
    imports: [ CommonModule, BrowserModule, BrowserAnimationsModule, FormsModule, DatePickerModule],
    bootstrap: [ App ],
    providers: [   ]//NgZone
    })
    export class AppModule {}

একটি ফাইল ডেট.এডাপ্টার.টিস তৈরি করুন

import { NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from "@angular/material";

export class AppDateAdapter extends NativeDateAdapter {
    parse(value: any): Date | null {
        if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
          const str = value.split('/');
          const year = Number(str[2]);
          const month = Number(str[1]) - 1;
          const date = Number(str[0]);
          return new Date(year, month, date);
        }
        const timestamp = typeof value === 'number' ? value : Date.parse(value);
        return isNaN(timestamp) ? null : new Date(timestamp);
      }
   format(date: Date, displayFormat: string): string {
       if (displayFormat == "input") {
          let day = date.getDate();
          let month = date.getMonth() + 1;
          let year = date.getFullYear();
          return   year + '-' + this._to2digit(month) + '-' + this._to2digit(day)   ;
       } else if (displayFormat == "inputMonth") {
          let month = date.getMonth() + 1;
          let year = date.getFullYear();
          return  year + '-' + this._to2digit(month);
       } else {
           return date.toDateString();
       }
   }
   private _to2digit(n: number) {
       return ('00' + n).slice(-2);
   }
}
export const APP_DATE_FORMATS =
{
   parse: {
       dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
   },
   display: {
       dateInput: 'input',
       monthYearLabel: 'inputMonth',
       dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
       monthYearA11yLabel: {year: 'numeric', month: 'long'},
   }
}

app.module.ts

  providers: [
    DatePipe,
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }
    ]

app.component.ts

import { FormControl } from '@angular/forms';
import { DatePipe } from '@angular/common';
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
  providers: [
    DatePipe,
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }
    ]
})
export class DatepickerOverviewExample {
  day = new Date();
  public date;
 constructor(private datePipe: DatePipe){
    console.log("anh "," " +datePipe.transform(this.day.setDate(this.day.getDate()+7)));
    this.date = new FormControl(this.datePipe.transform(this.day.setDate(this.day.getDate()+7)));
    console.log("anht",' ' +new Date());
 }
}

app.component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>






angular-material2