Options

Main options

Currently, these options are available but I will keep on developing and adding more and more options

You can import following types for better typescript support (Although typings support is there)

import {
  Options,
  Timepicker,
  DefinedDateRange,
  DateRange,
  Position,
  Theme,
} from "angular-datetimerangepicker";

class for passing options to the component.

Option Name	Type	Purpose	Default Value	Possible Values
format	string	format that this date and time range picker will use to communicate with your code	"YYYY-MM-DD"	As per dayjs standard formats
displayFormat	string	format that will be displayed to end user	Same as format	As per dayjs standard formats
startDate	string, dayjs instance	Default start date when this components is rendered for first time. Format of this date should be in line with format option's value above	Current Systetm Date	date string in line with format option's value above
endDate	string, dayjs instance	Default end date when this components is rendered for first time. Format of this date should be in line with format option's value above	Current Systetm Date	date string in line with format option's value above
minDate	string, dayjs instance	Default minimum date not including this date. End user will not be able select all dates before this date. Format of this date should be in line with format option's value above	null	date string in line with format option's value above
maxDate	string, dayjs instance	Default maximum date not including this date. End user will not be able select all dates after this date. Format of this date should be in line with format option's value above	null	date string in line with format option's value above
inactiveBeforeStart	boolean	Whether to blur dates that are before selected start date in left calendar. This option applies to right calendar only	false	true,false
autoApply	boolean	Hides apply and cancel buttons applies as soon as user selects end date	false	true,false
showRanges	boolean	if true, Shows default ranges below apply and cancel button This is related to preDefinedRanges option If not preDefinedRanges is supplied default ranges are shown which includes Today, Yesterday, last 7 day, This month, Last Month	false	true,false
preDefinedRanges	Array of object shown as below.	Custom ranges if you want to define your own ranges. Requires showRanges set to true to be useful Requires dayjs installed. As custom ranges are accepted in dayjs format only.	see below for more details	see below for more details
noDefaultRangeSelected	boolean	This option set the startDate and endDate options to blank on first render. Setting this to true will discard passed startDate and endDate	false	true,false
singleCalendar	boolean	Show only one calendar (left one). So you do not need another datepicker for single month.	false	true,false
position	string	position of the flyout which will open. By default it opens on left edge of input box. This is intelligently overridden based on space available on left or right.	'left'	'left','right','center'
theme	string	theme for overall component	'light'	'light','dark'
disabled	boolean	Whether to disable the main input control	false	true,false
timePicker	object	Whether to show timepicker	null	Object explained as below Setting this to truthy will automatically set auto apply to false
disableBeforeStart	boolean	Whether to disable dates that are before selected start date in left calendar. This option applies to right calendar only	false	true,false
alwaysOpen	boolean	Whether to keep the calendars always open. This option removes the main input box where range is shown Setting this to true not respect position	false	true,false
required	boolean	Sets required attribute to the input box (makes sense only if used inside form)	false	true,false
weekStartsOn	number (0-6)	Sets start day of week 0 is sunday and 6 is saturday. Absolute value is taken in case of negative values. Any value above 6 is taken modulo 7.	0	0-6
placeholder	string	Sets placeholder for main input box	[Empty string]	Any string literal
readOnly	boolean	If true, Makes the main input box read only. But keeps interactiveness of the input box.	false	true,false
hideControls	boolean	Show/hide entire row of buttons below calendars(apply, cancel, clear) Useful if autoapply is set to true.	false	true,false
disableWeekEnds	boolean	Disable weekends on calendars Weekend is calculated based on weekStartsOn value	false	true,false
disabledDays	number[]	Disable certain weekdays on calendars	null	Array of max length 7 containing values from 0-6 0 = Sunday, 6 = saturday
disabledDates	Dayjs[]	Disable certain dates on calendars	null	Array of dayjs objects

Updating the options on the fly

If you want to update the options after components initial render is done (i.e. after component is shown to end user)

All options can be updated individually (except startDate, endDate, minDate, maxDate, format, displayFormat) on the fly and the component will reflect the expected behaviour.
If you want to update either of startDate, endDate, minDate, maxDate, format, displayFormat then you must pass all new object of Options class. check this stackblitz example for more info on how to achieve this

Custom Range Options

For custom range, Pass options as below. For this you need to pass dayjs objects. ⚠️ Custom ranges should always be passed in dayjs objects

preDefinedRanges: [
  {
    name: "Day After tomorrow",
    value: {
      start: dayjs().add(2, "days"),
      end: dayjs().add(2, "days"),
    },
  },
  {
    name: "This week",
    value: {
      start: dayjs(),
      end: dayjs().add(7, "days"),
    },
  },
];

All dates are supposed to be string and in format as you are passing.

Time Picker Options

Timepicker options expects an object containing following keys as timepicker options

Option Name	Type	Purpose	Default Value	Possible Values
minuteInterval	(integer)number	The interval by which minutes will increase/decrease when user changes minutes in timepicker	1	anything between 1 to 59. If you supply value greater or equal 60 then that value mod 60 is taken as actual value
twentyFourHourFormat	boolean	Whether to show 24 hour or 12 hour time format There no 12 hour support in javascript. So this is just for display/convenience of end user The programmatic communication will still happen in 24 hour format only	true	true, false