carbon-components-angular 3.31.0 → 3.31.1

package/docs/documentation/components/DatePicker.html

@@ -138,6 +138,7 @@
 			}">
 			<div class="bx--date-picker-container">
 				<ibm-date-picker-input
+					#input
 					[label]="label"
 					[placeholder]="placeholder"
 					[pattern]="pattern"
@@ -149,12 +150,13 @@
 					[invalidText]="invalidText"
 					[skeleton]="skeleton"
 					(valueChange)="onValueChange($event)"
-					(click)="openFlatpickrInstance()">
+					(click)="openCalendar(input)">
 				</ibm-date-picker-input>
 			</div>
 
 			<div *ngIf="range" class="bx--date-picker-container">
 				<ibm-date-picker-input
+					#rangeInput
 					[label]="rangeLabel"
 					[placeholder]="placeholder"
 					[pattern]="pattern"
@@ -166,7 +168,7 @@
 					[invalidText]="invalidText"
 					[skeleton]="skeleton"
 					(valueChange)="onRangeValueChange($event)"
-					(click)="openFlatpickrInstance()">
+					(click)="openCalendar(rangeInput)">
 				</ibm-date-picker-input>
 			</div>
 		</div>
@@ -220,6 +222,9 @@
                                     <span class="modifier">Protected</span>
                                 <a href="#flatpickrInstance">flatpickrInstance</a>
                             </li>
+                            <li>
+                                <a href="#input">input</a>
+                            </li>
                             <li>
                                 <a href="#onTouched">onTouched</a>
                             </li>
@@ -230,6 +235,9 @@
                             <li>
                                 <a href="#propagateChange">propagateChange</a>
                             </li>
+                            <li>
+                                <a href="#rangeInput">rangeInput</a>
+                            </li>
                         </ul>
                     </td>
                 </tr>
@@ -270,7 +278,7 @@
                                 <a href="#onValueChange">onValueChange</a>
                             </li>
                             <li>
-                                <a href="#openFlatpickrInstance">openFlatpickrInstance</a>
+                                <a href="#openCalendar">openCalendar</a>
                             </li>
                             <li>
                                 <a href="#registerOnChange">registerOnChange</a>
@@ -420,7 +428,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="182" class="link-to-prism">src/datepicker/datepicker.component.ts:182</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="190" class="link-to-prism">src/datepicker/datepicker.component.ts:190</a></div>
                             </td>
                         </tr>
 
@@ -478,7 +486,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/datepicker/datepicker.component.ts:102</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="106" class="link-to-prism">src/datepicker/datepicker.component.ts:106</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -498,7 +506,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="127" class="link-to-prism">src/datepicker/datepicker.component.ts:127</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="131" class="link-to-prism">src/datepicker/datepicker.component.ts:131</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -515,7 +523,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/datepicker/datepicker.component.ts:138</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/datepicker/datepicker.component.ts:142</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -535,7 +543,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/datepicker/datepicker.component.ts:112</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/datepicker/datepicker.component.ts:116</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -555,7 +563,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="129" class="link-to-prism">src/datepicker/datepicker.component.ts:129</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/datepicker/datepicker.component.ts:133</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -576,7 +584,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="131" class="link-to-prism">src/datepicker/datepicker.component.ts:131</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="135" class="link-to-prism">src/datepicker/datepicker.component.ts:135</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -597,7 +605,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="104" class="link-to-prism">src/datepicker/datepicker.component.ts:104</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/datepicker/datepicker.component.ts:108</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -617,7 +625,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/datepicker/datepicker.component.ts:110</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/datepicker/datepicker.component.ts:114</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -637,7 +645,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/datepicker/datepicker.component.ts:108</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/datepicker/datepicker.component.ts:112</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -657,7 +665,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="135" class="link-to-prism">src/datepicker/datepicker.component.ts:135</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="139" class="link-to-prism">src/datepicker/datepicker.component.ts:139</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -679,7 +687,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="95" class="link-to-prism">src/datepicker/datepicker.component.ts:95</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="99" class="link-to-prism">src/datepicker/datepicker.component.ts:99</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -700,7 +708,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="106" class="link-to-prism">src/datepicker/datepicker.component.ts:106</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/datepicker/datepicker.component.ts:110</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -720,7 +728,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/datepicker/datepicker.component.ts:133</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/datepicker/datepicker.component.ts:137</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -744,7 +752,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="125" class="link-to-prism">src/datepicker/datepicker.component.ts:125</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="129" class="link-to-prism">src/datepicker/datepicker.component.ts:129</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -765,7 +773,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/datepicker/datepicker.component.ts:114</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="118" class="link-to-prism">src/datepicker/datepicker.component.ts:118</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -787,7 +795,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="163" class="link-to-prism">src/datepicker/datepicker.component.ts:163</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="171" class="link-to-prism">src/datepicker/datepicker.component.ts:171</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -817,7 +825,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="215" class="link-to-prism">src/datepicker/datepicker.component.ts:215</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="223" class="link-to-prism">src/datepicker/datepicker.component.ts:223</a></div>
                             </td>
                         </tr>
 
@@ -855,7 +863,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="388" class="link-to-prism">src/datepicker/datepicker.component.ts:388</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="420" class="link-to-prism">src/datepicker/datepicker.component.ts:420</a></div>
                             </td>
                         </tr>
 
@@ -931,7 +939,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="383" class="link-to-prism">src/datepicker/datepicker.component.ts:383</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="415" class="link-to-prism">src/datepicker/datepicker.component.ts:415</a></div>
                             </td>
                         </tr>
 
@@ -1002,7 +1010,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="395" class="link-to-prism">src/datepicker/datepicker.component.ts:395</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="427" class="link-to-prism">src/datepicker/datepicker.component.ts:427</a></div>
                             </td>
                         </tr>
 
@@ -1042,7 +1050,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="201" class="link-to-prism">src/datepicker/datepicker.component.ts:201</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="209" class="link-to-prism">src/datepicker/datepicker.component.ts:209</a></div>
                             </td>
                         </tr>
 
@@ -1080,7 +1088,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="186" class="link-to-prism">src/datepicker/datepicker.component.ts:186</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="194" class="link-to-prism">src/datepicker/datepicker.component.ts:194</a></div>
                             </td>
                         </tr>
 
@@ -1149,7 +1157,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="245" class="link-to-prism">src/datepicker/datepicker.component.ts:245</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="265" class="link-to-prism">src/datepicker/datepicker.component.ts:265</a></div>
                             </td>
                         </tr>
 
@@ -1189,7 +1197,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="268" class="link-to-prism">src/datepicker/datepicker.component.ts:268</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="288" class="link-to-prism">src/datepicker/datepicker.component.ts:288</a></div>
                             </td>
                         </tr>
 
@@ -1260,7 +1268,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="253" class="link-to-prism">src/datepicker/datepicker.component.ts:253</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="273" class="link-to-prism">src/datepicker/datepicker.component.ts:273</a></div>
                             </td>
                         </tr>
 
@@ -1313,36 +1321,69 @@
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="openFlatpickrInstance"></a>
+                        <a name="openCalendar"></a>
                         <span class="name">
                             <b>
-                            openFlatpickrInstance
+                            openCalendar
                             </b>
-                            <a href="#openFlatpickrInstance"><span class="icon ion-ios-link"></span></a>
+                            <a href="#openCalendar"><span class="icon ion-ios-link"></span></a>
                         </span>
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-<code>openFlatpickrInstance()</code>
+<code>openCalendar(datepickerInput: <a href="../components/DatePickerInput.html">DatePickerInput</a>)</code>
                     </td>
                 </tr>
 
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="278" class="link-to-prism">src/datepicker/datepicker.component.ts:278</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="299" class="link-to-prism">src/datepicker/datepicker.component.ts:299</a></div>
                             </td>
                         </tr>
 
 
                 <tr>
                     <td class="col-md-4">
+                            <div class="io-description"><p>Handles opening the calendar &quot;properly&quot; when the calendar icon is clicked.</p>
+</div>
+
+                            <div class="io-description">
+                                    <b>Parameters :</b>
+                                    <table class="params">
+                                        <thead>
+                                            <tr>
+                                                <td>Name</td>
+                                                    <td>Type</td>
+                                                <td>Optional</td>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                                <tr>
+                                                        <td>datepickerInput</td>
+                                                        <td>
+                                                                    <code><a href="../components/DatePickerInput.html" target="_self" >DatePickerInput</a></code>
+                                                        </td>
+                                                    
+                                                    <td>
+                                                            No
+                                                    </td>
+                                                    
 
+                                                </tr>
+                                        </tbody>
+                                    </table>
+                            </div>
+                            <div>
+                            </div>
                             <div class="io-description">
                                 <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
 
                             </div>
+                                <div class="io-description">
+                                    
+                                </div>
                     </td>
                 </tr>
             </tbody>
@@ -1369,7 +1410,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="230" class="link-to-prism">src/datepicker/datepicker.component.ts:230</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="250" class="link-to-prism">src/datepicker/datepicker.component.ts:250</a></div>
                             </td>
                         </tr>
 
@@ -1438,7 +1479,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="234" class="link-to-prism">src/datepicker/datepicker.component.ts:234</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="254" class="link-to-prism">src/datepicker/datepicker.component.ts:254</a></div>
                             </td>
                         </tr>
 
@@ -1509,7 +1550,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="342" class="link-to-prism">src/datepicker/datepicker.component.ts:342</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="374" class="link-to-prism">src/datepicker/datepicker.component.ts:374</a></div>
                             </td>
                         </tr>
 
@@ -1587,7 +1628,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="282" class="link-to-prism">src/datepicker/datepicker.component.ts:282</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="314" class="link-to-prism">src/datepicker/datepicker.component.ts:314</a></div>
                             </td>
                         </tr>
 
@@ -1627,7 +1668,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="293" class="link-to-prism">src/datepicker/datepicker.component.ts:293</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="325" class="link-to-prism">src/datepicker/datepicker.component.ts:325</a></div>
                             </td>
                         </tr>
 
@@ -1667,7 +1708,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="223" class="link-to-prism">src/datepicker/datepicker.component.ts:223</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="243" class="link-to-prism">src/datepicker/datepicker.component.ts:243</a></div>
                             </td>
                         </tr>
 
@@ -1763,7 +1804,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="167" class="link-to-prism">src/datepicker/datepicker.component.ts:167</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="175" class="link-to-prism">src/datepicker/datepicker.component.ts:175</a></div>
                             </td>
                         </tr>
 
@@ -1803,7 +1844,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="165" class="link-to-prism">src/datepicker/datepicker.component.ts:165</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="173" class="link-to-prism">src/datepicker/datepicker.component.ts:173</a></div>
                             </td>
                         </tr>
 
@@ -1844,7 +1885,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/datepicker/datepicker.component.ts:90</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/datepicker/datepicker.component.ts:94</a></div>
                             </td>
                         </tr>
 
@@ -1893,7 +1934,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="171" class="link-to-prism">src/datepicker/datepicker.component.ts:171</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="179" class="link-to-prism">src/datepicker/datepicker.component.ts:179</a></div>
                             </td>
                         </tr>
 
@@ -1933,7 +1974,50 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="182" class="link-to-prism">src/datepicker/datepicker.component.ts:182</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="190" class="link-to-prism">src/datepicker/datepicker.component.ts:190</a></div>
+                            </td>
+                        </tr>
+
+
+            </tbody>
+        </table>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-4">
+                        <a name="input"></a>
+                        <span class="name">
+                            <b>
+                            input
+                            </b>
+                            <a href="#input"><span class="icon ion-ios-link"></span></a>
+                        </span>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <code>input:     <code><a href="../components/DatePickerInput.html" target="_self" >DatePickerInput</a></code>
+</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                            <i>Type : </i>    <code><a href="../components/DatePickerInput.html" target="_self" >DatePickerInput</a></code>
+
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="col-md-4">
+                            <b>Decorators : </b>
+                            <br />
+                            <code>
+                                @ViewChild(&#x27;input&#x27;)<br />
+                            </code>
+                        </td>
+                    </tr>
+                        <tr>
+                            <td class="col-md-4">
+                                    <div class="io-line">Defined in <a href="" data-line="157" class="link-to-prism">src/datepicker/datepicker.component.ts:157</a></div>
                             </td>
                         </tr>
 
@@ -1972,7 +2056,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="238" class="link-to-prism">src/datepicker/datepicker.component.ts:238</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="258" class="link-to-prism">src/datepicker/datepicker.component.ts:258</a></div>
                             </td>
                         </tr>
 
@@ -2006,7 +2090,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="381" class="link-to-prism">src/datepicker/datepicker.component.ts:381</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="413" class="link-to-prism">src/datepicker/datepicker.component.ts:413</a></div>
                             </td>
                         </tr>
 
@@ -2039,7 +2123,50 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="240" class="link-to-prism">src/datepicker/datepicker.component.ts:240</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="260" class="link-to-prism">src/datepicker/datepicker.component.ts:260</a></div>
+                            </td>
+                        </tr>
+
+
+            </tbody>
+        </table>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-4">
+                        <a name="rangeInput"></a>
+                        <span class="name">
+                            <b>
+                            rangeInput
+                            </b>
+                            <a href="#rangeInput"><span class="icon ion-ios-link"></span></a>
+                        </span>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <code>rangeInput:     <code><a href="../components/DatePickerInput.html" target="_self" >DatePickerInput</a></code>
+</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                            <i>Type : </i>    <code><a href="../components/DatePickerInput.html" target="_self" >DatePickerInput</a></code>
+
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="col-md-4">
+                            <b>Decorators : </b>
+                            <br />
+                            <code>
+                                @ViewChild(&#x27;rangeInput&#x27;)<br />
+                            </code>
+                        </td>
+                    </tr>
+                        <tr>
+                            <td class="col-md-4">
+                                    <div class="io-line">Defined in <a href="" data-line="159" class="link-to-prism">src/datepicker/datepicker.component.ts:159</a></div>
                             </td>
                         </tr>
 
@@ -2068,7 +2195,7 @@
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/datepicker/datepicker.component.ts:121</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="125" class="link-to-prism">src/datepicker/datepicker.component.ts:125</a></div>
                                 </td>
                             </tr>
 
@@ -2079,7 +2206,7 @@
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/datepicker/datepicker.component.ts:114</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="118" class="link-to-prism">src/datepicker/datepicker.component.ts:118</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -2137,7 +2264,7 @@
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/datepicker/datepicker.component.ts:141</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="145" class="link-to-prism">src/datepicker/datepicker.component.ts:145</a></div>
                                 </td>
                             </tr>
 
@@ -2148,7 +2275,7 @@
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/datepicker/datepicker.component.ts:138</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/datepicker/datepicker.component.ts:142</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -2202,7 +2329,7 @@
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="158" class="link-to-prism">src/datepicker/datepicker.component.ts:158</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/datepicker/datepicker.component.ts:166</a></div>
                                 </td>
                             </tr>
 
@@ -2213,7 +2340,7 @@
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="153" class="link-to-prism">src/datepicker/datepicker.component.ts:153</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="161" class="link-to-prism">src/datepicker/datepicker.component.ts:161</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -2268,12 +2395,14 @@
 	TemplateRef,
 	OnChanges,
 	SimpleChanges,
-	AfterViewChecked
+	AfterViewChecked,
+	ViewChild
 } from &quot;@angular/core&quot;;
 import rangePlugin from &quot;flatpickr/dist/plugins/rangePlugin&quot;;
 import flatpickr from &quot;flatpickr&quot;;
 import { NG_VALUE_ACCESSOR } from &quot;@angular/forms&quot;;
 import { carbonFlatpickrMonthSelectPlugin } from &quot;./carbon-flatpickr-month-select&quot;;
+import { DatePickerInput } from &quot;../datepicker-input/datepicker-input.component&quot;;
 
 /**
  * [See demo](../../?path&#x3D;/story/date-picker--single)
@@ -2295,6 +2424,7 @@ import { carbonFlatpickrMonthSelectPlugin } from &quot;./carbon-flatpickr-month-
 				}&quot;&gt;
 				&lt;div class&#x3D;&quot;bx--date-picker-container&quot;&gt;
 					&lt;ibm-date-picker-input
+						#input
 						[label]&#x3D;&quot;label&quot;
 						[placeholder]&#x3D;&quot;placeholder&quot;
 						[pattern]&#x3D;&quot;pattern&quot;
@@ -2306,12 +2436,13 @@ import { carbonFlatpickrMonthSelectPlugin } from &quot;./carbon-flatpickr-month-
 						[invalidText]&#x3D;&quot;invalidText&quot;
 						[skeleton]&#x3D;&quot;skeleton&quot;
 						(valueChange)&#x3D;&quot;onValueChange($event)&quot;
-						(click)&#x3D;&quot;openFlatpickrInstance()&quot;&gt;
+						(click)&#x3D;&quot;openCalendar(input)&quot;&gt;
 					&lt;/ibm-date-picker-input&gt;
 				&lt;/div&gt;
 
 				&lt;div *ngIf&#x3D;&quot;range&quot; class&#x3D;&quot;bx--date-picker-container&quot;&gt;
 					&lt;ibm-date-picker-input
+						#rangeInput
 						[label]&#x3D;&quot;rangeLabel&quot;
 						[placeholder]&#x3D;&quot;placeholder&quot;
 						[pattern]&#x3D;&quot;pattern&quot;
@@ -2323,7 +2454,7 @@ import { carbonFlatpickrMonthSelectPlugin } from &quot;./carbon-flatpickr-month-
 						[invalidText]&#x3D;&quot;invalidText&quot;
 						[skeleton]&#x3D;&quot;skeleton&quot;
 						(valueChange)&#x3D;&quot;onRangeValueChange($event)&quot;
-						(click)&#x3D;&quot;openFlatpickrInstance()&quot;&gt;
+						(click)&#x3D;&quot;openCalendar(rangeInput)&quot;&gt;
 					&lt;/ibm-date-picker-input&gt;
 				&lt;/div&gt;
 			&lt;/div&gt;
@@ -2408,6 +2539,10 @@ export class DatePicker implements OnDestroy, OnChanges, AfterViewChecked {
 		});
 	}
 
+	@ViewChild(&quot;input&quot;) input: DatePickerInput;
+
+	@ViewChild(&quot;rangeInput&quot;) rangeInput: DatePickerInput;
+
 	set flatpickrOptionsRange (options) {
 		console.warn(&quot;flatpickrOptionsRange is deprecated, use flatpickrOptions and set the range to true instead&quot;);
 		this.range &#x3D; true;
@@ -2471,6 +2606,18 @@ export class DatePicker implements OnDestroy, OnChanges, AfterViewChecked {
 
 	@HostListener(&quot;focusin&quot;)
 	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.rangeInput.input.nativeElement &#x3D;&#x3D;&#x3D; document.activeElement &amp;&amp; this.flatpickrInstance.selectedDates[1]) {
+				const currentMonth &#x3D; this.flatpickrInstance.selectedDates[1].getMonth();
+				this.flatpickrInstance.changeMonth(currentMonth, false);
+			} else if (this.input.input.nativeElement &#x3D;&#x3D;&#x3D; document.activeElement &amp;&amp; this.flatpickrInstance.selectedDates[0]) {
+				const currentMonth &#x3D; this.flatpickrInstance.selectedDates[0].getMonth();
+				this.flatpickrInstance.changeMonth(currentMonth, false);
+			}
+		}
+
 		this.onTouched();
 	}
 
@@ -2531,10 +2678,22 @@ export class DatePicker implements OnDestroy, OnChanges, AfterViewChecked {
 		}
 	}
 
-	// FlatpickrInstance needs to be opened like this when calendar Icon is clicked to avoid the error:
-	// Property &#x27;flatpickrInstance&#x27; is protected and only accessible within class &#x27;DatePicker&#x27; and its subclasses.
-	openFlatpickrInstance() {
-		this.flatpickrInstance.open();
+	/**
+	 * Handles opening the calendar &quot;properly&quot; when the calendar icon is clicked.
+	 */
+	openCalendar(datepickerInput: DatePickerInput) {
+		datepickerInput.input.nativeElement.click();
+
+		// If the first input&#x27;s calendar icon is clicked when calendar is in range mode, then
+		// the month and year needs to be manually changed to the current selected month and
+		// year otherwise the calendar view will not be updated upon opening.
+		if (datepickerInput &#x3D;&#x3D;&#x3D; this.input &amp;&amp; this.range &amp;&amp; this.flatpickrInstance.selectedDates[0]) {
+			const currentMonth &#x3D; this.flatpickrInstance.selectedDates[0].getMonth();
+
+			this.flatpickrInstance.currentYear &#x3D; this.flatpickrInstance.selectedDates[0].getFullYear();
+
+			this.flatpickrInstance.changeMonth(currentMonth, false);
+		}
 	}
 
 	protected updateCalendarListeners() {
@@ -2696,7 +2855,7 @@ export class DatePicker implements OnDestroy, OnChanges, AfterViewChecked {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><div class="bx--form-item">	<div class="bx--form-item">		<div			class="bx--date-picker"			[ngClass]="{				\'bx--date-picker--range\' : range,				\'bx--date-picker--single\' : !range,				\'bx--date-picker--light\' : theme === \'light\',				\'bx--skeleton\' : skeleton			}">			<div class="bx--date-picker-container">				<ibm-date-picker-input					[label]="label"					[placeholder]="placeholder"					[pattern]="pattern"					[id]="id"					[type]="(range ? \'range\' : \'single\')"					[hasIcon]="(range ? false : true)"					[disabled]="disabled"					[invalid]="invalid"					[invalidText]="invalidText"					[skeleton]="skeleton"					(valueChange)="onValueChange($event)"					(click)="openFlatpickrInstance()">				</ibm-date-picker-input>			</div>			<div *ngIf="range" class="bx--date-picker-container">				<ibm-date-picker-input					[label]="rangeLabel"					[placeholder]="placeholder"					[pattern]="pattern"					[id]="id + \'-rangeInput\'"					[type]="(range ? \'range\' : \'single\')"					[hasIcon]="(range ? true : null)"					[disabled]="disabled"					[invalid]="invalid"					[invalidText]="invalidText"					[skeleton]="skeleton"					(valueChange)="onRangeValueChange($event)"					(click)="openFlatpickrInstance()">				</ibm-date-picker-input>			</div>		</div>	</div></div></div>'
+        var COMPONENT_TEMPLATE = '<div><div class="bx--form-item">	<div class="bx--form-item">		<div			class="bx--date-picker"			[ngClass]="{				\'bx--date-picker--range\' : range,				\'bx--date-picker--single\' : !range,				\'bx--date-picker--light\' : theme === \'light\',				\'bx--skeleton\' : skeleton			}">			<div class="bx--date-picker-container">				<ibm-date-picker-input					#input					[label]="label"					[placeholder]="placeholder"					[pattern]="pattern"					[id]="id"					[type]="(range ? \'range\' : \'single\')"					[hasIcon]="(range ? false : true)"					[disabled]="disabled"					[invalid]="invalid"					[invalidText]="invalidText"					[skeleton]="skeleton"					(valueChange)="onValueChange($event)"					(click)="openCalendar(input)">				</ibm-date-picker-input>			</div>			<div *ngIf="range" class="bx--date-picker-container">				<ibm-date-picker-input					#rangeInput					[label]="rangeLabel"					[placeholder]="placeholder"					[pattern]="pattern"					[id]="id + \'-rangeInput\'"					[type]="(range ? \'range\' : \'single\')"					[hasIcon]="(range ? true : null)"					[disabled]="disabled"					[invalid]="invalid"					[invalidText]="invalidText"					[skeleton]="skeleton"					(valueChange)="onRangeValueChange($event)"					(click)="openCalendar(rangeInput)">				</ibm-date-picker-input>			</div>		</div>	</div></div></div>'
     var COMPONENTS = [{'name': 'Accordion', 'selector': 'ibm-accordion'},{'name': 'AccordionItem', 'selector': 'ibm-accordion-item'},{'name': 'AlertModal', 'selector': 'ibm-alert-modal'},{'name': 'Breadcrumb', 'selector': 'ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'ibm-breadcrumb-item'},{'name': 'Checkbox', 'selector': 'ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'ibm-content-switcher'},{'name': 'DatePicker', 'selector': 'ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'ibm-dialog'},{'name': 'DialogPlaceholder', 'selector': 'ibm-dialog-placeholder'},{'name': 'Documentation', 'selector': 'ibm-documentation'},{'name': 'Dropdown', 'selector': 'ibm-dropdown'},{'name': 'DropdownList', 'selector': 'ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'ibm-expandable-tile'},{'name': 'File', 'selector': 'ibm-file'},{'name': 'FileUploader', 'selector': 'ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'ibm-hamburger'},{'name': 'Header', 'selector': 'ibm-header'},{'name': 'HeaderAction', 'selector': 'ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'ibm-header-global'},{'name': 'HeaderItem', 'selector': 'ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'ibm-header-navigation'},{'name': 'InlineLoading', 'selector': 'ibm-inline-loading'},{'name': 'Label', 'selector': 'ibm-label'},{'name': 'ListColumn', 'selector': 'ibm-list-column'},{'name': 'ListHeader', 'selector': 'ibm-list-header'},{'name': 'ListRow', 'selector': 'ibm-list-row'},{'name': 'Loading', 'selector': 'ibm-loading'},{'name': 'Modal', 'selector': 'ibm-modal'},{'name': 'ModalFooter', 'selector': 'ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'ibm-modal-header'},{'name': 'ModalPlaceholder', 'selector': 'ibm-modal-placeholder'},{'name': 'Notification', 'selector': 'ibm-notification'},{'name': 'NumberComponent', 'selector': 'ibm-number'},{'name': 'OverflowMenu', 'selector': 'ibm-overflow-menu'},{'name': 'OverflowMenuOption', 'selector': 'ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'ibm-overlay'},{'name': 'Pagination', 'selector': 'ibm-pagination'},{'name': 'Panel', 'selector': 'ibm-panel'},{'name': 'Placeholder', 'selector': 'ibm-placeholder'},{'name': 'ProductSwitcher', 'selector': 'ibm-product-switcher'},{'name': 'ProgressIndicator', 'selector': 'ibm-progress-indicator'},{'name': 'Radio', 'selector': 'ibm-radio'},{'name': 'RadioGroup', 'selector': 'ibm-radio-group'},{'name': 'Sample', 'selector': 'ibm-sample'},{'name': 'SampleSub', 'selector': 'ibm-sample-sub'},{'name': 'Search', 'selector': 'ibm-search'},{'name': 'Select', 'selector': 'ibm-select'},{'name': 'SelectionTile', 'selector': 'ibm-selection-tile'},{'name': 'SideNav', 'selector': 'ibm-sidenav'},{'name': 'SideNavHeader', 'selector': 'ibm-sidenav-header'},{'name': 'SideNavItem', 'selector': 'ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'ibm-sidenav-menu'},{'name': 'Slider', 'selector': 'ibm-slider'},{'name': 'StructuredList', 'selector': 'ibm-structured-list'},{'name': 'SwitcherList', 'selector': 'ibm-switcher-list, ibm-product-switcher-list'},{'name': 'SwitcherListItem', 'selector': 'ibm-switcher-list-item, ibm-product-switcher-list-item, ibm-product-switcher-item'},{'name': 'Tab', 'selector': 'ibm-tab'},{'name': 'TabHeaders', 'selector': 'ibm-tab-headers'},{'name': 'Table', 'selector': 'ibm-table'},{'name': 'TableBody', 'selector': '[ibmTableBody]'},{'name': 'TableCheckbox', 'selector': '[ibmTableCheckbox]'},{'name': 'TableContainer', 'selector': 'ibm-table-container'},{'name': 'TableData', 'selector': '[ibmTableData]'},{'name': 'TableExpandButton', 'selector': '[ibmTableExpandButton]'},{'name': 'TableExpandedRow', 'selector': '[ibmTableExpandedRow]'},{'name': 'TableHead', 'selector': '[ibmTableHead]'},{'name': 'TableHeadCell', 'selector': '[ibmTableHeadCell]'},{'name': 'TableHeadCheckbox', 'selector': '[ibmTableHeadCheckbox]'},{'name': 'TableHeader', 'selector': 'ibm-table-header'},{'name': 'TableHeadExpand', 'selector': '[ibmTableHeadExpand]'},{'name': 'TableRadio', 'selector': '[ibmTableRadio]'},{'name': 'TableRowComponent', 'selector': '[ibmTableRow]'},{'name': 'TableToolbar', 'selector': 'ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'ibm-tabs'},{'name': 'Tag', 'selector': 'ibm-tag'},{'name': 'TagFilter', 'selector': 'ibm-tag-filter'},{'name': 'Tile', 'selector': 'ibm-tile'},{'name': 'TileGroup', 'selector': 'ibm-tile-group'},{'name': 'TimePicker', 'selector': 'ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'ibm-timepicker-select'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'Toggle', 'selector': 'ibm-toggle'},{'name': 'Tooltip', 'selector': 'ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'ibm-tooltip-definition'},{'name': 'TooltipIcon', 'selector': 'ibm-tooltip-icon'}];
     var DIRECTIVES = [{'name': 'Button', 'selector': '[ibmButton]'},{'name': 'ColumnDirective', 'selector': '[ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[ibmContentOption]'},{'name': 'DataGridFocus', 'selector': '[ibmDataGridFocus]'},{'name': 'DialogDirective', 'selector': '[ibmDialog]'},{'name': 'EllipsisTooltip', 'selector': '[ibmEllipsisTooltip]'},{'name': 'ExpandedRowHover', 'selector': '[ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[ibmGrid]'},{'name': 'Link', 'selector': '[ibmLink]'},{'name': 'List', 'selector': '[ibmList]'},{'name': 'ListItemDirective', 'selector': '[ibmListItem]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[ibmOverflowMenu]'},{'name': 'RowDirective', 'selector': '[ibmRow]'},{'name': 'ScrollableList', 'selector': '[ibmScrollableList]'},{'name': 'TableDirective', 'selector': '[ibmTable]'},{'name': 'TableHeaderDescription', 'selector': '[ibmTableHeaderDescription]'},{'name': 'TableHeaderTitle', 'selector': '[ibmTableHeaderTitle]'},{'name': 'TextArea', 'selector': '[ibmTextArea]'},{'name': 'TextInput', 'selector': '[ibmText]'},{'name': 'TooltipDirective', 'selector': '[ibmTooltip]'}];
     var ACTUAL_COMPONENT = {'name': 'DatePicker'};