在日期選擇後製作引導日期選擇器只讀

我需要在選擇日期後使引導日期選擇器只讀。但我沒有得到相同的行爲。我已經嘗試使用datepicker的change事件和changeDate事件，但沒有一個正在工作。在日期選擇後製作引導日期選擇器只讀

$('#txtBookingDate').on('change', function (event) { 
     $('#txtBookingDate').attr('readonly','readonly'); 
    });

而且也

$('#txtBookingDate').datepicker() 
    .on('changeDate', function (e) {   
     $('#txtBookingDate').attr('readonly','readonly'); 
    });

我想實現的是讓用戶只單一的時間來選擇日期，即一旦第一次用戶選擇日期，然後讓日期選擇器只讀所以用戶不能更改日期！

任何幫助將不勝感激！

來源

2017-06-19 Nikunj Patel

您可以選擇日期後第一時間刪除日期選擇器，並使用prop()代替attr()一樣，

$('#txtBookingDate').datepicker().on('change', function (e) {   
    $(this).datepicker('remove') 
      .prop('readonly',true); 
});

片段，

$('#txtBookingDate').datepicker().on('change', function(e) { 
 
    $(this).datepicker('remove') 
 
    .prop('readonly', true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" /> 
 
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script> 
 
<input id="txtBookingDate" />

您可以使用enableOnReadonly:false選項而不刪除日期選擇器。

來源

2017-06-19 06:44:06

選擇日期日期選擇之前即刪除當我點擊日期選擇器，它只是popsup並關閉並且日期選擇器變爲只讀！ :( –

嘗試我的更新回答ans snippet。 –

偉大的！它的工作正常，因爲我想!!謝謝!! –

您可以使用這些attr('readonly',true)或prop('readonly',true)使日期輸入只讀。你可以根據你的jQuery版本選擇其中的一個。

// if jquery version > 1.9 
 
$('#txtBookingDate').on('change', function (event) { 
 
     $('#txtBookingDate').prop('readonly',true); 
 
}); 
 

 
// if jquery version < 1.9 
 
$('#txtBookingDate').on('change', function (event) { 
 
     $('#txtBookingDate').attr('readonly',true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<input type="date" id="txtBookingDate"></input>

來源

2017-06-19 06:45:03 hasan

感謝您的幫助，但我不能讓它禁用，因爲我需要在Post和禁用的元素中的日期值（ –

@Nikunj你使用的是哪個版本的jquery – hasan

我已經更新了我的回答 – hasan

試試這個代碼片段：

$('#txtBookingDate').datepicker({ 
 
      weekStart: 1, 
 
      startDate: '01/01/2010', 
 
      autoclose: true, 
 
      "setDate": new Date(), 
 
     }).on('changeDate', function (selected) { 
 
      $(this).attr("disabled","disabled"); 
 
     });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/css/bootstrap-datepicker.min.css" integrity="sha256-V0Nho4sjvYsznAMBVSBq2YuaQ8CDXv4FRdoIy+Yf4zk=" crossorigin="anonymous" /> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/js/bootstrap-datepicker.min.js" integrity="sha256-FOV0q1Ks/eXoUwtkcN6OxWV4u9OSq7LDomNYnfF/0Ys=" crossorigin="anonymous"></script> 
 
    
 
<input type="text" id="txtBookingDate"/>

來源

2017-06-19 07:22:18

在日期選擇後製作引導日期選擇器只讀

回答

相關問題