Datepicker Date is not changing after changing date in texbox

[afeef1915]

What i Need

• when i type date manually i need to reflect changed date to be bsdatepicker.

• or Textfield only accept DD-MMM-YYYY date format

where im stuck

     Enter  10/7/2019 
    got this format     Wed Jan 10 0007 00:00:00 GMT+0553 (India Standard Time)
    changed format date get converted       10-Jan-2007

more example

        If Date format correct DD-MMM-YYYY then it works.
    10-May-1989
    main.js:2203 Wed May 10 1989 00:00:00 GMT+0530 (India Standard Time)
    14:11:40.317 main.js:2203 10-May-1989

           if date format different then then it doesnot works
    10/5/1989
    main.js:2203 Mon Jan 10 0005 00:00:00 GMT+0553 (India Standard Time)
    10-Jan-0005

If I just type a date directly (not using the date picker) it is not recognising it correctly …. I entered 10/9/1980 then pressed <tab> and got 10-Jan-0009.

Problem can be solved

If i change date in texbox datepicker date must change on key type

I got wrong date if change date manually in texbox.

That's why wrong date conversion.

Angular Code

     <input type="text" class="form-control" 
        bsDatepicker
        [formControlName]="field.code"
        [bsConfig]="datePickerConfig"
        [(ngModel)]="customInitDate"
        (ngModelChange)="customOnDateChange()"
        placeholder='DD-MMM-YYYY''
        #dp="bsDatepicker"
        (keyup)="dp.toggle()"
       />

    export class DateComponent implements OnInit, AfterViewChecked {
            constructor(private cd: ChangeDetectorRef, private bs: BsDatepickerConfig ) {
            this.bs.dateInputFormat = 'DD-MMM-YYYY';
            }

            datePickerConfig = {
            isAnimated: true,
            containerClass: 'theme-blue',
            showWeekNumbers: false,
            dateInputFormat: this.appConstants.APP_DATE_FORMAT
            };
            customOnDateChange() {
            if (this.customInitDate !== '') {
            if (moment(this.customInitDate).isValid()){
            console.log(this.customInitDate);
            this.customInitDate = moment(new Date(this.customInitDate)).format('DD-MMM-YYYY');
            } else {
            this.customInitDate = '';
            }

            }

            }

Link

https://stackoverflow.com/questions/59749923/how-to-populate-bsdatepicker-when-date-is-changed-in-texbox

[daniloff200]

hi @afeef1915 I'm not 100% sure, that I exactly get, what you mean, but, have you tried to change dateInputFormat in bsConfig to rangeInputFormat ?

Also, a small demo on Plunker / Stackblitz with more details will be very useful!

[afeef1915]

Thanks for the answer.

My issue was i need to use multiple date format .

14-4-2019 should be converted to 14-april-2019 14/4/2019 should be converted to 14-april-2019 14.4.2019 should be converted to 14-april-2019

etc

I know input is custom date format that's why it only support single date format.

refrence https://stackoverflow.com/questions/59942688/elementref-is-not-working-angular-8-with-bsdatepicker