How to disable datepicker textfield?

[keerthana_hn]

Hi,

I'm using datepicker in my component and I have given minDate as today in properties which works fine by disabling the previous days. How to disable the textfield so that author won't be enter the date but only pick the date from datepicker.

Thank you 

[arunpatidar · Accepted solution]

Hi,

You may have to write a custom logic to disable keyborad input to input text field

https://stackoverflow.com/questions/29715655/html-5-input-type-date-disable-keyboard-input

[keerthana_hn]

Hi @arunpatidar ,

Thank you, it worked.

[LekyCodes]

$("#birthdate").datepicker({

        dateFormat: 'dd-mm-yyyy',

        maxDate: new Date()

    });

How can i disable this date picker from users manually typing

[arunpatidar]

If you are using the Coral datepicker then you can use readonly flag.

https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/Coral.Datep... 

var datepicker = new Coral.Datepicker().set({
placeholder: "Choose a date",
name: "field",
value: "2015-01-15",
valueFormat: "YYYY-MM-DD",
displayFormat: "YYYY-MM-DD",
startDay: "0",
readOnly: true
});

[LekyCodes]

I am using a bootstrap please redo it 

[LekyCodes]

<div class="col-md-6">

                                <div class="input-group mb-3">

                                        <div class="input-group-prepend">

                                                <label class="input-group-text">Birthdate<span class="important">*</span></label>

                                            </div>

                                    <input required="" data-language='en' name="birthdate" type="text" id="birthdate" data-date-format="dd MM yyyy"

                                        class="form-control" value="{{ old('birthdate') }}" placeholder="DD-MM-YYYY" readonly style="background-color:#fff; cursor:auto" >

                                </div>

                            </div>

                    </div>

 <script>

//DatePicker

    $("#birthdate").datepicker({

        dateFormat: 'dd-mm-yyyy',

        maxDate: new Date()

    });

</script>

Thats how it looks like......the input field and the datepicker