Angular 9 Native date picker component.
Check demo Here
$ npm i np-ui-date-picker
<np-ui-date-picker
[(ngModel)]="startDate">
</np-ui-date-picker>
ngModel
: Date
two way date binding model value.
value must be date type object.format
: string
pass date format as string, date will be shown in given format in text box.
default format is dd/MM/yyyydisabled
: boolean
true/false - set component disabled.required
: boolean
default value is false. add required attribute to input textbox.defaultOpen
: boolean
default open datepicker, user can not close this. no textbox will be shown.minDate
: Date
no date will be selected less than min date.
Default calender shows min year upto CurrentYear - 100, but if need to set years less than that,
then set minDate validation with less year numbers.maxDate
: Date
no date will be selected greater than max date.
Default calender shows max year upto CurrentYear + 100, but if need to set years more than that, then set maxDate validation with high year numbers.placeholder
: string
set placeholder for datepickershowTodayButton
: boolean
show/hide Today link in datepicker pop up, on click of link today's date will be set as selected.disableWeekDays
: string[]
disable week days for date picker. Possible values for array are "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa".disableDates
: Date[]
disable dates in date picker. Assign array of dates to this property.dateLabels
: any[] Example: [{ date : new Date(), label: "Today"}] Lables tooltip will be shown on hover of dates passed in this property.isStartMonthWithMonday
: boolean If set to true then month will be start with Monday, default value is false.styleClass
: string
set name of css class.
onChange
on change event binding.
This project is licensed under the MIT License.