fix(core/datetime-picker): adjust done button placement (#484)

packages/core/src/components/date-picker/date-picker.scss

@@ -10,6 +10,10 @@
 @import 'common-variables';
 
 :host {
+  ix-date-time-card {
+    display: inline-block;
+  }
+
   .header {
     display: flex;
     align-items: center;

packages/core/src/components/date-picker/date-picker.tsx

@@ -166,23 +166,23 @@ export class DatePicker {
   @Event() dateSelect: EventEmitter<DateChangeEvent>;
 
   get year() {
-    if (this.from) {
+    if (this.from !== null) {
       return DateTime.fromFormat(this.from, this.format).year;
     }
 
     return DateTime.now().year;
   }
 
   get day() {
-    if (this.from) {
+    if (this.from !== null) {
       return DateTime.fromFormat(this.from, this.format).day;
     }
 
     return null;
   }
 
   get month() {
-    if (this.from) {
+    if (this.from !== null) {
       return DateTime.fromFormat(this.from, this.format).month;
     }
 
@@ -493,6 +493,7 @@ export class DatePicker {
                   >
                     {this.years.map((year) => (
                       <div
+                        key={year}
                         class={{ arrowYear: true }}
                         onClick={(event) => this.selectTempYear(event, year)}
                       >
@@ -513,6 +514,7 @@ export class DatePicker {
                   <div class="overflow">
                     {this.monthNames.map((month, index) => (
                       <div
+                        key={month}
                         class={{
                           arrowYear: true,
                           selected: this.tempMonth - 1 === index,
@@ -553,7 +555,9 @@ export class DatePicker {
           <div class="grid">
             <div class="calendar-item week-day"></div>
             {this.dayNames.map((name) => (
-              <div class="calendar-item week-day">{name.slice(0, 3)}</div>
+              <div key={name} class="calendar-item week-day">
+                {name.slice(0, 3)}
+              </div>
             ))}
 
             {this.calendar.map((week) => {
@@ -562,6 +566,7 @@ export class DatePicker {
                   <div class="calendar-item week-number">{week[0]}</div>
                   {week[1].map((day) => (
                     <div
+                      key={day}
                       class={this.getDayClasses(day)}
                       onClick={() => this.selectDay(day)}
                     >

packages/core/src/components/datetime-picker/datetime-picker.scss

@@ -13,18 +13,19 @@
   display: block;
   background-color: var(--theme-menu--background);
   border-radius: 4px;
+  position: relative;
+  width: 32.6875rem;
 }
 
 .flex {
   display: flex;
   justify-content: center;
 }
 
-.done {
-  display: inline-flex;
-  justify-content: flex-end;
-  padding: $default-space;
-  width: 100%;
+.btn-select-date{
+  position: absolute;
+  bottom: $default-space;
+  right: $default-space;
 }
 
 .separator {

packages/core/src/components/datetime-picker/datetime-picker.tsx

@@ -241,11 +241,9 @@ export class DateTimePicker {
           <div class="separator"></div>
         </div>
 
-        <div class="done">
-          <ix-button onClick={() => this.onDone()}>
-            {this.textSelectDate}
-          </ix-button>
-        </div>
+        <ix-button class="btn-select-date" onClick={() => this.onDone()}>
+          {this.textSelectDate}
+        </ix-button>
       </Host>
     );
   }