Datepicker所需的选项是否正常工作但只读它不起作用？

Question

我有一个日期选择器，其中包含以下HTML代码：

<input id="datepicker3" name="date" type="text" placeholder="Booking Date" class="date" required>

当尝试提交表单而不填写日期时，它将显示必填字段警报。 我尝试使用'readonly'使其无法修改，但它无效，然后我尝试了以下js

$(document).ready(function() {
    $('.date').each(function(){
    var pickr = $(this).pickadate({
      format: 'dd/mm/yyyy',
      selectMonths: true, // Creates a dropdown to control month
      selectYears: 5, // Creates a dropdown of 15 years to control year
      editable: true
    });

    $(this).click(function(){
        pickr.pickadate('open');
    });
  })

  $('select').material_select();
});

它也不起作用。我可以选择日期，然后通过单击框轻松编辑它。即使我可以输入任何价值。

我还有一个js为datepciker设置maxdate和mindate：

$(function () {
  $('#datepicker,#datepicker1,#datepicker2,#datepicker3')
    .datepicker({ maxDate: '+1m', minDate: 0 });
});

datepicker3是此页面中唯一的日期选择器

那么我如何才能使datepicker只读和所需？即，一旦选中它，除了使用datepicker选择newdate之外，不能手动编辑。