输入框为只读时如何禁用Datepicker

Question

How to turn off datepicker when input box is in readonly? Here is my textbox

<input type="text" name="letter_date" value="12/05/2019"  id="letter_date" class="form-control datepicker" placeholder="Masukkan Tanggal Nota" data-toggle="datepicker" readonly="readonly" />

and I have tried using this javascript code but when I select the textbox it is still showing datepicker.

$('[data-toggle="datepicker"]').datepicker({
    beforeShow: function(i) {
      if ($(this).prop('readonly')) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
        }
    },
    format : 'dd/mm/yyyy',
    autoHide : true
});

Answer 1

You can disable the datepicker with datepicker("option", "disabled", true); .

 $('[data-toggle="datepicker"]').datepicker({ beforeShow: function(i) { if ($(this).prop('readonly')) { console.log('readonly is true'); $(this).datepicker("option", "disabled", true); return; } }, format : 'dd/mm/yyyy', autoHide : true, }); 

 <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input type="text" name="letter_date" value="12/05/2019" id="letter_date" class="form-control datepicker" placeholder="Masukkan Tanggal Nota" data-toggle="datepicker" readonly="readonly"/> 

--Edit--

For multiple inputs

 $('[data-toggle="datepicker"]').datepicker({ beforeShow: function(i) { if ($(this).prop('readonly')) { $(this).datepicker("option", "disabled", true); return; } }, format : 'dd/mm/yyyy', autoHide : true, }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <input type="text" name="letter_date" value="12/05/2019" id="letter_date" class="form-control datepicker" placeholder="Masukkan Tanggal Nota" data-toggle="datepicker" readonly/> <input type="text" name="letter_date" value="12/05/2019" id="letter_date1" class="form-control datepicker" placeholder="Masukkan Tanggal Nota" data-toggle="datepicker"/> <input type="text" name="letter_date" value="12/05/2019" id="letter_date2" class="form-control datepicker" placeholder="Masukkan Tanggal Nota" data-toggle="datepicker" readonly/> 

Answer 2

Try below Code :

$('[data-toggle="datepicker"]').datepicker({
    beforeShow: function(i) {
      if ($(this).prop('readonly')) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
        }
    },
    format : 'dd/mm/yyyy',
    autoHide : true,
    disabled: true
});