如何在使用bootstrap-datepicker時不顯示移動鍵盤？

我嘗試設置disableTouchKeyboard選項，但它什麼也沒做 - 至少在iOS/Safari上。我正在使用的選項有：如何在使用bootstrap-datepicker時不顯示移動鍵盤？

$(".datepicker").datepicker({ 
    autoclose: true, 
    disableTouchKeyboard: true, 
    format: 'm/d/yyyy', 
    startDate: '01/01/1900', 
    todayBtn: 'linked', 
    todayHighlight: true, 
});

任何人都知道這樣做的最佳方法是什麼？

來源

2015-04-12 GusP

這就是我已經完成的，但我很想知道是否有更好的方法。

使用中的問題相同的選項，然後我也通過我的HTML這樣做的HTML文本框readonly：

@Html.EditorFor(model => model.Date, new { htmlAttributes = new { 
    @class = "form-control datepicker", @readonly = "true", 
}})

這似乎是工作，如JavaScript仍然可以改變字段的值。但是，它確實使文本框的背景變灰（即禁用），並將鼠標指針更改爲不需要的交叉圓圖標（not-allowed）。要解決這個問題我這樣做增加了一個內嵌樣式：

@Html.EditorFor(model => model.Date, new { htmlAttributes = new { 
    @class = "form-control datepicker", @readonly = "true", 
    style = "cursor: default; background-color: #fff" 
}})

我試圖覆蓋CSS的cursor和background-color（使用!important），但似乎並沒有在Internet Explorer中工作。

這不是很漂亮，但它適用於我。還需要看看我如何以更強大的方式來完成此任務（例如，不需要對背景顏色進行硬編碼，也不必在所有日期字段中指定此類等）。如果有人知道更好的方法，我會非常感激。

來源

2015-04-12 16:52:04 GusP

爲什麼使用'new {htmlAttributes = new {...}}'？我通常只使用'new {...}'。這一定是不好的？ –

我有/有這樣的類似問題。

我使用輸入字段type=text我在那裏綁定了一個jQuery datepicker。當我在手機上選擇輸入字段（android chrome）時，我會看到日期選擇器和手機的鍵盤。

搜索StackOverflow後，我發現了一些解決方案，只需在readonly上設置輸入字段或禁用字段。這個問題是當你禁用它不會被提交的字段，並且當設置爲只讀時，我的jQuery驗證器跳過該字段。所以我需要不同的解決方案。

我現在已經通過讓datepicker將字段設置爲只讀，然後打開選取器並在拾取器關閉時刪除只讀來修復它。我已經在移動android（chrome和I.E）上對它進行了測試，我沒有得到原生鍵盤。 iPhone/iPad尚未測試，但也許其他人可以檢查它。

的代碼是：

$(this).datepicker({ 
beforeShow: function(input, obj){$(input).prop('readonly', 'readonly');}, 
onClose: function() {$(this).prop('readonly', false);}});

來源

2015-06-13 09:16:58

如果您正在使用Bootstrap3日期選擇器：
https://eonasdan.github.io/bootstrap-datetimepicker

就在這個屬性添加到輸入：只讀= 「只讀」與這個屬性
期權當實例化庫時。

$('#datetimepicker1').datetimepicker({ 
     useCurrent: false, 
     daysOfWeekDisabled: [0, 6], 
     format: 'DD-MM-YYYY', 
     ignoreReadonly: true <------ this property 
});

在Safari iPhone和Chrome/Native瀏覽器Android上測試。

來源

2015-10-28 10:58:25

只需在datepicker中添加屬性readonly即可。

$(".datepicker").datepicker({ 
    format: "dd-M-yyyy", 
    autoclose: true, 
    disableTouchKeyboard: true, 
    Readonly: true 
}).attr("readonly", "readonly");

來源

2016-12-02 10:57:31 Chenthil

這是一個老問題，但我想我應該分享我的解決方案，因爲這個問題出現在谷歌搜索。如果您將輸入類型設置爲按鈕，則鍵盤將不會顯示，並且如果您確實需要，可以將按鈕設置爲文本輸入字段。

<input type="button" style="background-color:white;border:1px solid #DDD;padding:5px;cursor:text;" value="Enter a Date" id="datepicker">

來源

2017-03-28 20:17:12 Amrit

如何在使用bootstrap-datepicker時不顯示移動鍵盤？

回答

相關問題