Date picker

                <turas-date-picker asp-for="DatePickerBasic">
                </turas-date-picker>
            

                <div class="form-group form-date-picker "><input type="hidden" id="DatePickerBasic" name="DatePickerBasic" value="" />
<label for="DatePickerBasicText" class="control-label   ">Date picker</label>
<div class="row">
<div class="col-md-3">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerBasic" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerBasicText" name="DatePickerBasicText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerBasic" data-valmsg-replace="true"></span>
</div>
            

                <turas-date-picker asp-for="DatePickerRequired">
                </turas-date-picker>
            

                <div class="form-group form-date-picker "><input type="hidden" data-val="true" data-val-required="The Date picker required field is required." id="DatePickerRequired" name="DatePickerRequired" value="" />
<label for="DatePickerRequiredText" class="control-label requiredFieldMarker  ">Date picker required</label>
<div class="row">
<div class="col-md-3">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerRequired" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerRequiredText" name="DatePickerRequiredText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerRequired" data-valmsg-replace="true"></span>
</div>
            

                <turas-date-picker asp-for="DatePickerWithGuidanceText" guidance-text="I am some guidance text">
                </turas-date-picker>
            

                <div class="form-group form-date-picker "><input type="hidden" id="DatePickerWithGuidanceText" name="DatePickerWithGuidanceText" value="" />
<label for="DatePickerWithGuidanceTextText" class="control-label   ">Date picker guidance text</label>
<div class="form-field-guidance-text">I am some guidance text</div>
<div class="row">
<div class="col-md-3">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerWithGuidanceText" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerWithGuidanceTextText" name="DatePickerWithGuidanceTextText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerWithGuidanceText" data-valmsg-replace="true"></span>
</div>
            

                <turas-date-picker asp-for="DatePickerWithGuidanceAccordion">
                    <turas-form-guidance collapses>
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                    </turas-form-guidance>
                </turas-date-picker>
            

                <div class="form-group form-date-picker "><input type="hidden" id="DatePickerWithGuidanceAccordion" name="DatePickerWithGuidanceAccordion" value="" />
<label for="DatePickerWithGuidanceAccordionText" class="control-label   ">Date picker guidance accordion</label>
<div class="turas-form-guidance-collapse">
            <button class="turas-form-guidance-collapse-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-92296dcc-fa7e-4f6e-a16d-5f15b0aa3dd8" aria-expanded="false" aria-controls="collapse-92296dcc-fa7e-4f6e-a16d-5f15b0aa3dd8"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-92296dcc-fa7e-4f6e-a16d-5f15b0aa3dd8">   
                <div class="form-field-guidance-text"><span class=""></span>
                    
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                       
                </div>
            </div></div>
<div class="row">
<div class="col-md-3">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerWithGuidanceAccordion" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerWithGuidanceAccordionText" name="DatePickerWithGuidanceAccordionText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerWithGuidanceAccordion" data-valmsg-replace="true"></span>
</div>
            

                <turas-date-picker asp-for="DatePickerFormFieldWidth" field-column-widths="col-6">
                </turas-date-picker>
            

                <div class="form-group form-date-picker "><input type="hidden" id="DatePickerFormFieldWidth" name="DatePickerFormFieldWidth" value="" />
<label for="DatePickerFormFieldWidthText" class="control-label   ">Date picker field width</label>
<div class="row">
<div class="col-6">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerFormFieldWidth" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerFormFieldWidthText" name="DatePickerFormFieldWidthText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerFormFieldWidth" data-valmsg-replace="true"></span>
</div>
            

                <turas-date-picker asp-for="DatePickerAdditionalClasses" additional-classes="p-t-2">
                </turas-date-picker>
            

                <div class="form-group form-date-picker p-t-2"><input type="hidden" id="DatePickerAdditionalClasses" name="DatePickerAdditionalClasses" value="" />
<label for="DatePickerAdditionalClassesText" class="control-label   ">Date picker additional classes</label>
<div class="row">
<div class="col-md-3">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerAdditionalClasses" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerAdditionalClassesText" name="DatePickerAdditionalClassesText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerAdditionalClasses" data-valmsg-replace="true"></span>
</div>
            

                <div class="row">
                    <div class="col-md-4">
                        <turas-date-picker asp-for="DatePickerInARowOne" field-column-widths="col">
                        </turas-date-picker>
                    </div>
                    <div class="col-md-4">
                        <turas-date-picker asp-for="DatePickerInARowTwo" field-column-widths="col">
                        </turas-date-picker>
                    </div>
                    <div class="col-md-4">
                        <turas-date-picker asp-for="DatePickerInARowThree" field-column-widths="col">
                        </turas-date-picker>
                    </div>
                </div>
            

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group form-date-picker "><input type="hidden" id="DatePickerInARowOne" name="DatePickerInARowOne" value="" />
<label for="DatePickerInARowOneText" class="control-label   ">Date picker in a row</label>
<div class="row">
<div class="col">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerInARowOne" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerInARowOneText" name="DatePickerInARowOneText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerInARowOne" data-valmsg-replace="true"></span>
</div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-date-picker "><input type="hidden" id="DatePickerInARowTwo" name="DatePickerInARowTwo" value="" />
<label for="DatePickerInARowTwoText" class="control-label   ">Date picker in a row</label>
<div class="row">
<div class="col">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerInARowTwo" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerInARowTwoText" name="DatePickerInARowTwoText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerInARowTwo" data-valmsg-replace="true"></span>
</div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-date-picker "><input type="hidden" id="DatePickerInARowThree" name="DatePickerInARowThree" value="" />
<label for="DatePickerInARowThreeText" class="control-label   ">Date picker in a row</label>
<div class="row">
<div class="col">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerInARowThree" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerInARowThreeText" name="DatePickerInARowThreeText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerInARowThree" data-valmsg-replace="true"></span>
</div>
                    </div>
                </div>
            

                <div class="row">
                    <div class="col-md-4">
                        <turas-date-picker asp-for="DatePickerRequiredInARowOne" field-column-widths="col">
                        </turas-date-picker>
                    </div>
                    <div class="col-md-4">
                        <turas-date-picker asp-for="DatePickerRequiredInARowTwo" field-column-widths="col">
                        </turas-date-picker>
                    </div>
                    <div class="col-md-4">
                        <turas-date-picker asp-for="DatePickerRequiredInARowThree" field-column-widths="col">
                        </turas-date-picker>
                    </div>
                </div>
            

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group form-date-picker "><input type="hidden" data-val="true" data-val-required="The Date picker in a row required field is required." id="DatePickerRequiredInARowOne" name="DatePickerRequiredInARowOne" value="" />
<label for="DatePickerRequiredInARowOneText" class="control-label requiredFieldMarker  ">Date picker in a row required</label>
<div class="row">
<div class="col">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerRequiredInARowOne" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerRequiredInARowOneText" name="DatePickerRequiredInARowOneText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerRequiredInARowOne" data-valmsg-replace="true"></span>
</div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-date-picker "><input type="hidden" data-val="true" data-val-required="The Date picker in a row required field is required." id="DatePickerRequiredInARowTwo" name="DatePickerRequiredInARowTwo" value="" />
<label for="DatePickerRequiredInARowTwoText" class="control-label requiredFieldMarker  ">Date picker in a row required</label>
<div class="row">
<div class="col">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerRequiredInARowTwo" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerRequiredInARowTwoText" name="DatePickerRequiredInARowTwoText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerRequiredInARowTwo" data-valmsg-replace="true"></span>
</div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-date-picker "><input type="hidden" data-val="true" data-val-required="The Date picker in a row required field is required." id="DatePickerRequiredInARowThree" name="DatePickerRequiredInARowThree" value="" />
<label for="DatePickerRequiredInARowThreeText" class="control-label requiredFieldMarker  ">Date picker in a row required</label>
<div class="row">
<div class="col">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerRequiredInARowThree" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerRequiredInARowThreeText" name="DatePickerRequiredInARowThreeText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerRequiredInARowThree" data-valmsg-replace="true"></span>
</div>
                    </div>
                </div>
            

                <turas-date-picker asp-for="DatePickerHideTodayButton" hide-today-button>
                </turas-date-picker>
            

                <div class="form-group form-date-picker "><input type="hidden" id="DatePickerHideTodayButton" name="DatePickerHideTodayButton" value="" />
<label for="DatePickerHideTodayButtonText" class="control-label   ">Date picker hide today button</label>
<div class="row">
<div class="col-md-3">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerHideTodayButton" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="false" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerHideTodayButtonText" name="DatePickerHideTodayButtonText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerHideTodayButton" data-valmsg-replace="true"></span>
</div>
            

                <turas-date-picker asp-for="DatePickerHideClearButton" hide-clear-button>
                </turas-date-picker>
            

                <div class="form-group form-date-picker "><input type="hidden" id="DatePickerHideClearButton" name="DatePickerHideClearButton" value="" />
<label for="DatePickerHideClearButtonText" class="control-label   ">Date picker hide clear button</label>
<div class="row">
<div class="col-md-3">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerHideClearButton" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="false" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerHideClearButtonText" name="DatePickerHideClearButtonText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerHideClearButton" data-valmsg-replace="true"></span>
</div>
            

                <turas-date-picker asp-for="DatePickerHideValidationMessage" hide-validation-message>
                </turas-date-picker>
            

                <div class="form-group form-date-picker "><input type="hidden" data-val="true" data-val-required="The Date picker hide validation message field is required." id="DatePickerHideValidationMessage" name="DatePickerHideValidationMessage" value="" />
<label for="DatePickerHideValidationMessageText" class="control-label requiredFieldMarker  ">Date picker hide validation message</label>
<div class="row">
<div class="col-md-3">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerHideValidationMessage" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerHideValidationMessageText" name="DatePickerHideValidationMessageText" type="text" class="form-control turas-date-picker"   />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>

</div>
            

                <turas-date-picker asp-for="DatePickerReadOnly" readonly>
                </turas-date-picker>
            

                <div class="form-group form-date-picker "><input type="hidden" id="DatePickerReadOnly" name="DatePickerReadOnly" value="" />
<label for="DatePickerReadOnlyText" class="control-label   ">Date picker readonly</label>
<div class="row">
<div class="col-md-3">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerReadOnly" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerReadOnlyText" name="DatePickerReadOnlyText" type="text" class="form-control turas-date-picker" readonly  />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerReadOnly" data-valmsg-replace="true"></span>
</div>
            

                <turas-date-picker asp-for="DatePickerDisabled" asp-is-disabled="True">
                </turas-date-picker>
            

                <div class="form-group form-date-picker "><input type="hidden" id="DatePickerDisabled" name="DatePickerDisabled" value="" />
<label for="DatePickerDisabledText" class="control-label   ">Date picker disabled</label>
<div class="row">
<div class="col-md-3">
<div class="input-group date datepicker" 
                                   data-provide="datepicker" 
                                   data-date-iso-input-name="DatePickerDisabled" 
                                   data-date-format="dd/mm/yyyy" 
                                   data-date-autoclose="true" 
                                   data-date-clear-btn="true" 
                                   data-date-today-btn="linked" 
                                   data-date-today-highlight="true"
                                   data-date-enable-on-readonly="false" 
                                   data-date-min-view-mode="0">
<input id="DatePickerDisabledText" name="DatePickerDisabledText" type="text" class="form-control turas-date-picker"  disabled />
<span class="input-group-addon turas-date-picker-icon"><i class="fa fa-calendar"></i></span>
</div><!-- end date picker-->
</div>
</div>
<span class="field-validation-valid" data-valmsg-for="DatePickerDisabled" data-valmsg-replace="true"></span>
</div>