Cannot set empty input by default

[com-xuonghuynh]

Versions

• Angular version: 8
• component version: 2.1.9

Describe the bug I want to set the input with empty and placeholder, but it always display to current date. I tried to set ngModel with startDate and endDate with null value but not success.

<input class="form-control date-select" type="text"
	id="filter-date"
	ngxDaterangepickerMd
	[(ngModel)]="filter_date"
	[showCustomRangeLabel]="true"
	[alwaysShowCalendars]="true"
	[ranges]="ranges"
	[linkedCalendars]="true"
        opens = "right"
	[isInvalidDate] = "isInvalidDate"
	[locale]="{format: 'DD MMM YYYY', firstDay: 1}"
	[showClearButton]="true"
	(datesUpdated)="filterDate()"
	placeholder="Select date...">  

this.filter_date = {
            "startDate": null,
            "endDate": null
        }

[madhuri-bhamre-003]

Please provide solution for this asap. Instead for ngModel I am using fromControl but having same issue.

After reset daterange picker value when we remove(display: none) and show element again it comes with default value set with current date

Not sure why it is happening. although the formControl value show start and end date null only. Not Understand this magic.

[RupinSahu]

Hey @com-xuonghuynh , you have found solution but if not then please refer to the following solution, hope this helps -

1. Instead of ngModel use formControlName and pass your object as string type
2. Remove placeholder.
3. Remove isInvalidDate if not required else return a null value for your use case

Hope it woks!!

[RupinSahu]

Please provide solution for this asap. Instead for ngModel I am using fromControl but having same issue.

After reset daterange picker value when we remove(display: none) and show element again it comes with default value set with current date

Not sure why it is happening. although the formControl value show start and end date null only. Not Understand this magic.

Hope you found the solution for it but if not then try providing an any or string type value to formcontrol where if it is any type then it should not contain even start & end date attributes.

My code snippet for your reference, where zval is a string type value - <input type="text" ngxDaterangepickerMd formControlName="zval" [showCustomRangeLabel]="true" [alwaysShowCalendars]="true" [ranges]="propertyMetaData.periods" [linkedCalendars]="false" [locale]="{direction: 'ltr'}" [lockStartDate]="false" [showDropdowns]="true" [timePicker]="propertyMetaData.showTime" [showClearButton]="propertyMetaData.clear" drops="down"/> Hope this helps. Let me know if it works for you, copied to @com-xuonghuynh

[anupam42]

Hello I am facing issue while setting default value when i am adding 7 days as default it is taking as custom range option only but when i disable timePicker it takes as 7 days but its fails . Please provide a solution Thanks

[mbenfriha]

I found solution, u can set ngModel to undefined, its display your placeholder instead of today date :

In my front :