diff --git a/src/datepicker-input/datepicker-input.component.ts b/src/datepicker-input/datepicker-input.component.ts
index dd8e4039f7..149edb38f5 100644
--- a/src/datepicker-input/datepicker-input.component.ts
+++ b/src/datepicker-input/datepicker-input.component.ts
@@ -5,93 +5,80 @@ import {
 	EventEmitter,
 	ElementRef,
 	TemplateRef,
-	ViewChild
+	ViewChild, HostBinding
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
 @Component({
 	selector: "cds-date-picker-input, ibm-date-picker-input",
 	template: `
-	<div class="cds--form-item">
-		<div class="cds--date-picker"
+		<label
+			*ngIf="label"
+			[for]="id"
+			class="cds--label"
+			[ngClass]="{'cds--label--disabled': disabled}">
+			<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
+			<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
+		</label>
+		<div class="cds--date-picker-input__wrapper"
 			[ngClass]="{
-				'cds--date-picker--simple' : type === 'simple',
-				'cds--date-picker--single' : type === 'single',
-				'cds--date-picker--range' : type === 'range',
-				'cds--date-picker--light' : theme === 'light',
-				'cds--skeleton' : skeleton
+				'cds--date-picker-input__wrapper--invalid': invalid,
+				'cds--date-picker-input__wrapper--warn': warn
 			}">
-			<div class="cds--date-picker-container">
-				<label
-					*ngIf="label"
-					[for]="id"
-					class="cds--label"
-					[ngClass]="{'cds--label--disabled': disabled}">
-					<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
-					<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
-				</label>
-				<div class="cds--date-picker-input__wrapper"
-					[ngClass]="{
-						'cds--date-picker-input__wrapper--invalid': invalid,
-						'cds--date-picker-input__wrapper--warn': warn
-					}">
-					<span>
-						<input
-						#input
-						*ngIf="!skeleton"
-						autocomplete="off"
-						type="text"
-						class="cds--date-picker__input"
-						[ngClass]="{
-							'cds--date-picker__input--sm': size === 'sm',
-							'cds--date-picker__input--md': size === 'md',
-							'cds--date-picker__input--lg': size === 'lg'
-						}"
-						[attr.data-invalid]="invalid ? true : undefined"
-						[value]="value"
-						[pattern]="pattern"
-						[placeholder]="placeholder"
-						[id]= "id"
-						[disabled]="disabled"
-							(change)="onChange($event)"/>
-							<svg
-								*ngIf="type !== 'simple' && !warn && !invalid"
-								cdsIcon="calendar"
-								size="16"
-								class="cds--date-picker__icon">
-							</svg>
-							<svg
-								*ngIf="invalid"
-								class="cds--date-picker__icon cds--date-picker__icon--invalid"
-								cdsIcon="warning--filled"
-								size="16">
-							</svg>
-							<svg
-								*ngIf="!invalid && warn"
-								cdsIcon="warning--alt--filled"
-								size="16"
-								class="cds--date-picker__icon cds--date-picker__icon--warn">
-							</svg>
-					</span>
-				</div>
-				<div
-					*ngIf="helperText && !invalid && !warn"
-					class="cds--form__helper-text"
-					[ngClass]="{'cds--form__helper-text--disabled': disabled}">
-					<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
-					<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
-				</div>
-				<div *ngIf="invalid" class="cds--form-requirement">
-					<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
-					<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
-				</div>
-				<div *ngIf="!invalid && warn" class="cds--form-requirement">
-					<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
-					<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
-				</div>
-			</div>
+			<span>
+				<input
+				#input
+				*ngIf="!skeleton"
+				autocomplete="off"
+				type="text"
+				class="cds--date-picker__input"
+				[ngClass]="{
+					'cds--date-picker__input--sm': size === 'sm',
+					'cds--date-picker__input--md': size === 'md',
+					'cds--date-picker__input--lg': size === 'lg'
+				}"
+				[attr.data-invalid]="invalid ? true : undefined"
+				[value]="value"
+				[pattern]="pattern"
+				[placeholder]="placeholder"
+				[id]= "id"
+				[disabled]="disabled"
+					(change)="onChange($event)"/>
+					<svg
+						*ngIf="type !== 'simple' && !warn && !invalid"
+						cdsIcon="calendar"
+						size="16"
+						class="cds--date-picker__icon">
+					</svg>
+					<svg
+						*ngIf="invalid"
+						class="cds--date-picker__icon cds--date-picker__icon--invalid"
+						cdsIcon="warning--filled"
+						size="16">
+					</svg>
+					<svg
+						*ngIf="!invalid && warn"
+						cdsIcon="warning--alt--filled"
+						size="16"
+						class="cds--date-picker__icon cds--date-picker__icon--warn">
+					</svg>
+			</span>
+		</div>
+		<div
+			*ngIf="helperText && !invalid && !warn"
+			class="cds--form__helper-text"
+			[ngClass]="{'cds--form__helper-text--disabled': disabled}">
+			<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
+			<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
+		</div>
+		<div *ngIf="invalid" class="cds--form-requirement">
+			<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
+			<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+		</div>
+		<div *ngIf="!invalid && warn" class="cds--form-requirement">
+			<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
+			<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
 		</div>
-</div>
 	`,
 	providers: [
 		{
@@ -99,7 +86,10 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 			useExisting: DatePickerInput,
 			multi: true
 		}
-	]
+	],
+	host: {
+		"class": 'cds--date-picker-container'
+	}
 })
 export class DatePickerInput {
 	private static datePickerCount = 0;
diff --git a/src/datepicker/datepicker.component.ts b/src/datepicker/datepicker.component.ts
index de955979ca..84c713102b 100644
--- a/src/datepicker/datepicker.component.ts
+++ b/src/datepicker/datepicker.component.ts
@@ -57,54 +57,52 @@ if (languages.default?.default["en"]?.weekdays) {
 		<div
 			class="cds--date-picker"
 			[ngClass]="{
-				'cds--date-picker--range' : range,
-				'cds--date-picker--single' : !range,
+				'cds--date-picker--simple' : datePickerType === 'simple',
+				'cds--date-picker--range' : datePickerType === 'range',
+				'cds--date-picker--single' : datePickerType === 'single',
 				'cds--date-picker--light' : theme === 'light',
 				'cds--skeleton' : skeleton
 			}">
-			<div class="cds--date-picker-container">
-				<cds-date-picker-input
-					#input
-					[label]="label"
-					[placeholder]="placeholder"
-					[pattern]="inputPattern"
-					[id]="id + '-input'"
-					[size]="size"
-					[type]="(range ? 'range' : 'single')"
-					[hasIcon]="(range ? false : true)"
-					[disabled]="disabled"
-					[invalid]="invalid"
-					[invalidText]="invalidText"
-					[warn]="warn"
-					[warnText]="warnText"
-					[skeleton]="skeleton"
-					[helperText]="helperText"
-					(valueChange)="onValueChange($event)"
-					(click)="openCalendar(input)">
-				</cds-date-picker-input>
-			</div>
-
-			<div *ngIf="range" class="cds--date-picker-container">
-				<cds-date-picker-input
-					#rangeInput
-					[label]="rangeLabel"
-					[placeholder]="placeholder"
-					[pattern]="inputPattern"
-					[id]="id + '-rangeInput'"
-					[size]="size"
-					[type]="(range ? 'range' : 'single')"
-					[hasIcon]="(range ? true : null)"
-					[disabled]="disabled"
-					[invalid]="rangeInvalid"
-					[invalidText]="rangeInvalidText"
-					[warn]="rangeWarn"
-					[warnText]="rangeWarnText"
-					[skeleton]="skeleton"
-					[helperText]="rangeHelperText"
-					(valueChange)="onRangeValueChange($event)"
-					(click)="openCalendar(rangeInput)">
-				</cds-date-picker-input>
-			</div>
+			<cds-date-picker-input
+				#input
+				[label]="label"
+				[placeholder]="placeholder"
+				[pattern]="inputPattern"
+				[id]="id + '-input'"
+				[size]="size"
+				[type]="datePickerType"
+				[hasIcon]="datePickerType !== 'simple'"
+				[disabled]="disabled"
+				[invalid]="invalid"
+				[invalidText]="invalidText"
+				[warn]="warn"
+				[warnText]="warnText"
+				[skeleton]="skeleton"
+				[helperText]="helperText"
+				(valueChange)="onValueChange($event)"
+				(click)="openCalendar(input)">
+			</cds-date-picker-input>
+
+			<cds-date-picker-input
+				*ngIf="datePickerType === 'range'"
+				#rangeInput
+				[label]="rangeLabel"
+				[placeholder]="placeholder"
+				[pattern]="inputPattern"
+				[id]="id + '-rangeInput'"
+				[size]="size"
+				[type]="(range ? 'range' : 'single')"
+				[hasIcon]="(range ? true : null)"
+				[disabled]="disabled"
+				[invalid]="rangeInvalid"
+				[invalidText]="rangeInvalidText"
+				[warn]="rangeWarn"
+				[warnText]="rangeWarnText"
+				[skeleton]="skeleton"
+				[helperText]="rangeHelperText"
+				(valueChange)="onRangeValueChange($event)"
+				(click)="openCalendar(rangeInput)">
+			</cds-date-picker-input>
 		</div>
 	</div>
 	`,
@@ -125,10 +123,7 @@ export class DatePicker implements
 	AfterViewInit {
 	private static datePickerCount = 0;
 
-	/**
-	 * Select calendar range mode
-	 */
-	@Input() range = false;
+	@Input() datePickerType: "simple" | "single" | "range" = "simple";
 
 	/**
 	 * Format of date
@@ -227,11 +222,11 @@ export class DatePicker implements
 	}
 	get flatpickrOptions() {
 		const plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];
-		if (this.range) {
+		if (this.datePickerType === "range") {
 			plugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: "left" }));
 		}
 		return Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {
-			mode: this.range ? "range" : "single",
+			mode: this.datePickerType === "range" ? "range" : "single",
 			plugins,
 			dateFormat: this.dateFormat,
 			locale: languages.default?.default[this.language] || languages.default[this.language]
@@ -267,7 +262,7 @@ export class DatePicker implements
 		onClose: (date) => {
 			// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of
 			// the inputs when the calendar closes.
-			if (this.range && this.flatpickrInstance) {
+			if (this.datePickerType === "range" && this.flatpickrInstance) {
 				if (this.flatpickrInstance.selectedDates.length !== 2) {
 					// we could `this.flatpickrInstance.clear()` but it insists on opening the second picker
 					// in some cases, so instead we do this
@@ -354,7 +349,7 @@ export class DatePicker implements
 	onFocus() {
 		// Updates the month manually when calendar mode is range because month
 		// will not update properly without manually updating them on focus.
-		if (this.range) {
+		if (this.datePickerType === "range") {
 			if (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {
 				const currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();
 				this.flatpickrInstance.changeMonth(currentMonth, false);
@@ -420,7 +415,7 @@ export class DatePicker implements
 	onValueChange(event: string) {
 		if (this.isFlatpickrLoaded()) {
 			const date = this.flatpickrInstance.parseDate(event, this.dateFormat);
-			if (this.range) {
+			if (this.datePickerType === "range") {
 				this.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);
 			} else {
 				this.setDateValues([date]);
@@ -444,7 +439,7 @@ export class DatePicker implements
 	 * Handles opening the calendar "properly" when the calendar icon is clicked.
 	 */
 	openCalendar(datepickerInput: DatePickerInput) {
-		if (this.range) {
+		if (this.datePickerType === "range") {
 			datepickerInput.input.nativeElement.click();
 
 			// If the first input's calendar icon is clicked when calendar is in range mode, then
@@ -652,7 +647,7 @@ export class DatePicker implements
 		// In range mode, if a date is selected from the first calendar that is from the previous month,
 		// the month will not be updated on the calendar until the calendar is re-opened.
 		// This will make sure the calendar is updated with the correct month.
-		if (this.range && this.flatpickrInstance.selectedDates[0]) {
+		if (this.datePickerType === "range" && this.flatpickrInstance.selectedDates[0]) {
 			const currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();
 
 			// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will
diff --git a/src/datepicker/datepicker.stories.ts b/src/datepicker/datepicker.stories.ts
index 19f875a637..bdc8ad5686 100644
--- a/src/datepicker/datepicker.stories.ts
+++ b/src/datepicker/datepicker.stories.ts
@@ -41,7 +41,7 @@ export default {
 const Template = (args) => ({
 	props: args,
 	template: `
-		<cds-date-picker-input
+		<cds-date-picker
 			[theme]="theme"
 			[label]="label"
 			[placeholder]="placeholder"
@@ -52,7 +52,7 @@ const Template = (args) => ({
 			[warn]="warn"
 			[warnText]="warnText"
 			(valueChange)="valueChange($event)">
-		</cds-date-picker-input>
+		</cds-date-picker>
 	`
 });
 export const Basic = Template.bind({});
@@ -65,6 +65,7 @@ const SingleTemplate = (args) => ({
 			[label]="label"
 			id="initial-value-datepicker"
 			[placeholder]="placeholder"
+			[datePickerType]="'single'"
 			[language]="language"
 			[size]="size"
 			[theme]="theme"
@@ -83,6 +84,7 @@ const SingleTemplate = (args) => ({
 			[placeholder]="placeholder"
 			[language]="language"
 			[size]="size"
+			[datePickerType]="'single'"
 			[theme]="theme"
 			[disabled]="disabled"
 			[invalid]="invalid"
@@ -96,8 +98,9 @@ const SingleTemplate = (args) => ({
 });
 export const Single = SingleTemplate.bind({});
 Single.args = {
-	dateFormat: "m/d/y",
-	language: "en"
+	dateFormat: "m/d/Y",
+	language: "en",
+	value: "01/01/24"
 };
 Single.argTypes = {
 	language: {
@@ -114,7 +117,7 @@ const RangeTemplate = (args) => ({
 			[label]="label"
 			[rangeLabel]="label"
 			[size]="size"
-			range="true"
+			[datePickerType]="'range'"
 			id="initial-value-range-datepicker"
 			[placeholder]="placeholder"
 			[language]="language"
@@ -135,8 +138,8 @@ const RangeTemplate = (args) => ({
 		<cds-date-picker
 			[label]="label"
 			[rangeLabel]="label"
+			[datePickerType]="'range'"
 			[size]="size"
-			range="true"
 			[language]="language"
 			[placeholder]="placeholder"
 			[theme]="theme"