Set myDatePicker so PlaceHolder is shown

Question

I have a record where no End Date has been defined. I can not figure out how to set the myDatePicker such that the place holder is shown

to be clear, this is the control I am using

https://github.com/kekeh/angular-mydatepicker/wiki

import { Component, OnInit , AfterViewInit
        , Input, Output, SimpleChanges 
        , ElementRef, EventEmitter, ViewChild} from '@angular/core';
import { ReactiveFormsModule, FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';
import { IMyDpOptions, IMyDateModel, IMyDate } from 'mydatepicker';
import { MatIconRegistry } from '@angular/material/icon';
import { Observable,forkJoin, combineLatest } from 'rxjs';
import { distinctUntilKeyChanged, pluck
  , switchMap ,tap, map} from 'rxjs/operators';
import { DomSanitizer } from '@angular/platform-browser';

import {CashFlow2 } from '../cash-flow2'
import {cashFlowService } from '../services/cash-flow.service';
import { sbList} from '../../list-management/sbList';
import { sbListEntry} from '../../list-management/sbListEntry';
import { ListManagementService } from '../../list-management/list-management.service';
 
@Component({
  selector: 'app-cashflow-detail',
  templateUrl: './cashflow-detail.component.html',
  styleUrls: ['./cashflow-detail.component.css']
})
export class CashflowDetailComponent implements OnInit, AfterViewInit {

  
  myFormGroup: FormGroup;
  myCashFlow: CashFlow2;
  
  public myForm$ : Observable<any>;
  public vm$ : Observable<any>;
  public cfTypes$ : Observable<sbList >;
  
  public myDatePickerOptions: IMyDpOptions = {
    
    todayBtnTxt: 'Today',
    dateFormat: 'mm/dd/yyyy',
    firstDayOfWeek: 'su',
    sunHighlight: true,
    satHighlight: true,
    inline: false,
    height: '25px' 
  };
  @ViewChild('OuterDiv', { static :false } ) private cfDetailDiv_: ElementRef;

  @Output() itemOUT = new EventEmitter<CashFlow2>();
  
   
  
    constructor(private fb: FormBuilder 
        , private iconRegistry: MatIconRegistry 
        , private sanitizer: DomSanitizer
        , private cashFlowService : cashFlowService
        , private listService : ListManagementService) {
 
        }
        
        
        ngOnInit(): void {
          
        
          this.iconRegistry.addSvgIconSet(
            this.sanitizer.bypassSecurityTrustResourceUrl('edit/mdi.svg')); 
           this.iconRegistry.addSvgIconSet(
              this.sanitizer.bypassSecurityTrustResourceUrl('edit/mdi.svg')); 
           
              this.cfTypes$ = this.listService.getListByName('CashFlowType').pipe(
                tap( data => console.log('just asked for the cfType list'))
              );
            
              this.vm$.combineLatest(
                [
                  this.myItem
                  , this.myForm$
                  , this.cfTypes$
                ]
              ).pipe(
                map( ([cashFlow,form, cfTypes ]) => ({cashFlow, form, cfTypes})  ) 
                ,tap( ( data  ) => console.log(data.cfTypes)    ) 
              )

  }
  ngAfterViewInit(){
     
    
  }

  ngOnChanges(changes : SimpleChanges){
    console.log( 'myitem was changed' );
    console.log(  changes);
    
    if (changes.myItem && changes.myItem.currentValue) {
      console.log( '****myitem was changed');
      this.setMyItem(changes.myItem.currentValue);
    }
  }
  
  //build the form based on a cashflow
  buildForm(cf_: CashFlow2): void {
    //return;
    this.myFormGroup = null;
    this.myCashFlow = cf_;
    if (cf_ == null) { return;}


      this.myFormGroup = this.fb.group({
      cashFlowName: this.myCashFlow.Name,
      

      // here i need to assign **something** to the date picker if the 
      //  value is NULL so it does not display NaaN, NaaN, NaaN
      startDate: this.threePartDateFromDate( this.myCashFlow.StartDate),
      endDate: this.threePartDateFromDate(this.myCashFlow.EndDate),
      

      description : this.myCashFlow.Description ,
      cashFlowType: this.myCashFlow.CashFlowType
    });

     

    //subscribe to value changes on form
    this.myForm$ = this.myFormGroup.valueChanges. 
        switchMap(  data => {
                    this.myCashFlow = data;
                    this.itemOUT.emit(data);
                    return data;
    });


  }//buildform

public setMyItem(value:CashFlow2){
  console.log('inside setter',value);
  this.buildForm(this.myItem);

  this.cfDetailDiv_.nativeElement.style.visibility='';
}

  //necessary for the datepicker
  threePartDateFromDate(d_: string): any {
    const date_ = new Date(d_);
console.log(d_);
if(d_ ==  undefined ){
  console.log('date missing');
  return {
    date: {
      year: 0,
      month: 0,
      day: 0}
  }

}
    return {
      date: {
        year: date_.getFullYear(),
        month: date_.getMonth()+1,
        day: date_.getDate()}
    }

  }
}

the value is coming to me as undefined. I have tried settting to undefine - this shows NaaN, NaaN, NaaN in the control I have tried setting to {0,0,0}, this shows 0,0,0 in the control

Answer 1

I think the way to do it is to add a ViewChild and call clearDate(). I have spent a couple hours trying to find an example that works on their wiki. A simpler solution is to go w/ the Angular Material date picker.

Answer 2

I did a lot of experimenting. Here are the 2 relevant interfaces defined by myDatePicker

export interface IMyDateModel {
    date: IMyDate;
    jsdate: Date;
    formatted: string;
    epoc: number;
}


export interface IMyDate {
    year: number;
    month: number;
    day: number;
}

I found that for IMyDateModel, I am able to pass in any combination of the 4 elements and the date picker works. (I did not try setting the 4 elements to different dates, that could be fun...)

My solution is to simply pass an object w/ only the formatted element present. Once I established that, it was an easy guess to pass in null as a value

So this will give you the correct date

"EstimatedStartDate": {
        "formatted": "1/1/2020"
    },

and this will show the null value suggestion

"EstimatedStartDate": {
        "formatted": null
    },

I do not know if this is the best practice. Would love to hear from the myDatePicker team. I have posted a question on the github wiki, still waiting a response. Ill update if i hear of a better way.