Jak używać jQuery Datepicker z danymi wejściowymi w polu tekstowym:
$("#my_txtbox").datepicker({
// options
});
która nie pozwala użytkownikowi na wprowadzenie losowego tekstu w polu tekstowym. Chcę, aby Datepicker pojawiał się, gdy pole tekstowe zyskuje fokus lub użytkownik je kliknie, ale chcę, aby pole tekstowe ignorowało wszelkie dane wejściowe użytkownika za pomocą klawiatury (kopiuj i wklej lub inne). Chcę wypełnić pole tekstowe wyłącznie z kalendarza Datepicker.
czy to możliwe?
jQuery 1.2.6
Datepicker 1.5.2
jquery
datepicker
Elliot Vargas
źródło
źródło
$("#my_txtbox").prop('readonly', true)
<input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">
Bazując na swoim doświadczeniu polecam rozwiązanie zaproponowane przez Adhip Gupta:
Poniższy kod nie pozwoli typu użytkownik nowe postacie, ale będą dopuszczać ich do znaków Usuń:
Dodatkowo spowoduje to, że formularz będzie bezużyteczny dla tych, którzy mają wyłączoną obsługę JavaScript:
źródło
readonly
atrybut do pola za pośrednictwem JS, zapewniasz, że jeśli mają wyłączony JavaScript (a zatem nie będą mogli korzystać z datepickera), nadal będą mogli używać formularza poprzez standardowe ręczne wprowadzanie.$("#my_txtbox").prop('readonly', true)
;próbować
źródło
Jeśli ponownie używasz selektora dat w wielu miejscach, dobrze byłoby zmodyfikować pole tekstowe również za pomocą JavaScript, używając czegoś takiego:
zaraz po / przed miejscem, w którym zainicjowałeś swój datepicker.
źródło
powoduje, że pole tekstowe traci swoją wartość po ogłoszeniu zwrotnym.
Powinieneś raczej skorzystać z sugestii Brad8118, która działa idealnie.
EDYCJA: aby działał w IE, użyj „keydown” zamiast „keypress”
źródło
dodaj atrybut readonly do jquery.
źródło
Masz dwie możliwości, aby to zrobić. (Z tego co wiem)
Opcja A: Ustaw pole tekstowe tylko do odczytu. Można to zrobić w następujący sposób.
Opcja B: Zmień onfocus kursora. Ustaw ti na rozmycie. można to zrobić, ustawiając atrybut
onfocus="this.blur()"
w polu tekstowym selektora dat.Dawny:
<input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>
źródło
Po zainicjowaniu selektora dat:
źródło
$(".project-date").datepicker().keydown(false);
Aby wybrać datę wyskakującego okienka na temat wzmocnienia:
Jeśli nie chcesz, aby użytkownik wprowadzał dane, dodaj to do pola wejściowego
źródło
Właśnie natknąłem się na to, więc udostępniam tutaj. Oto opcja
https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly
Oto kod.
HTML
JS
Oto skrzypce:
http://jsfiddle.net/matbaric/wh1cb6cy/
Moja wersja pliku bootstrap-datetimepicker.js to 4.17.45
źródło
To demo robi to poprzez umieszczenie kalendarza nad polem tekstowym, więc nie można go wpisać. Możesz także ustawić pole wejściowe tak, aby było tylko do odczytu w HTML, aby mieć pewność.
źródło
HTML
CSS
źródło
Wiem, że ten wątek jest stary, ale dla innych, którzy napotykają ten sam problem, wdrażają rozwiązanie @ Brad8118 (co wolę, ponieważ jeśli wybierzesz, aby dane wejściowe były tylko do odczytu, użytkownik nie będzie mógł usunąć wartości daty wstawionej z datepicker jeśli wybierze), a także muszę uniemożliwić użytkownikowi wklejenie wartości (jak sugerował @ErikPhilips, że jest potrzebna), tutaj dodałem ten dodatek, który działał dla mnie:
$("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });
stąd https://www.dotnettricks.com/learn/ jquery / disable-cut-copy-and-paste-in-textbox-using-jquery-javascript oraz cały specyficzny skrypt używany przeze mnie (używając zamiast tego wtyczki fengyuanchen / datepicker):źródło
Zamiast dodawać tylko do odczytu , możesz również użyć onkeypress = "return false;"
źródło
Odkryłem, że wtyczka jQuery Calendar, przynajmniej dla mnie, ogólnie działa lepiej do wybierania dat.
źródło
źródło
Oto twoja odpowiedź, która jest sposobem na rozwiązanie: Nie chcesz używać jquery, gdy ograniczyłeś wprowadzanie danych przez użytkownika w kontrolce TextBox.
źródło
$ ("# my_txtbox"). prop ('tylko do odczytu', prawda)
działał jak urok.
źródło
Zamiast używać pola tekstowego możesz również użyć przycisku. U mnie działa najlepiej, gdy nie chcę, aby użytkownicy ręcznie wpisywali datę.
źródło
Wiem, że na to pytanie udzielono już odpowiedzi i większość sugeruje użycie
readonly
atrybutu.Chcę tylko podzielić się moim scenariuszem i odpowiedzieć.
Po dodaniu
readonly
atrybutu do mojego elementu HTML napotkałem problem polegający na tym, że nie mogę utworzyć tego atrybutu takrequired
dynamicznie.Próbowałem nawet ustawić jako oba
readonly
irequired
podczas tworzenia HTML.Więc zasugeruję, aby nie używać,
readonly
jeśli chcesz ustawić torequired
również.Zamiast tego użyj
Pozwala to
tab
tylko na naciśnięcie klawisza.Możesz dodać więcej kodów klawiszy, które chcesz ominąć.
Poniżej kod, ponieważ dodałem oba
readonly
irequired
nadal przesyła formularz.Po wyjęciu
readonly
działa poprawnie.https://jsfiddle.net/shantaram/hd9o7eor/
źródło
zastąp identyfikator selektora czasu: IDofDatetimePicker swoim identyfikatorem.
Uniemożliwi to użytkownikowi wprowadzanie dalszych danych wejściowych z klawiatury, ale nadal będzie mógł uzyskać dostęp do wyskakującego okienka czasu.
$ ("# my_txtbox"). keypress (function (event) {event.preventDefault ();});
Wypróbuj to źródło: https://github.com/jonthornton/jquery-timepicker/issues/109
źródło
To pytanie ma wiele starszych odpowiedzi i wydaje się, że tylko odczyt jest ogólnie przyjętym rozwiązaniem. Uważam, że lepszym podejściem w nowoczesnych przeglądarkach jest użycie
inputmode="none"
w tagu wejściowym HTML:lub, jeśli wolisz zrobić to w skrypcie:
Nie testowałem go szczegółowo, ale działa dobrze na konfiguracjach Androida, z którymi go używałem.
źródło
Lub możesz na przykład użyć ukrytego pola do przechowywania wartości ...
i w $ ("# my_txtbox"). datepicker ({opcje:
źródło
Jeśli chcesz, aby użytkownik wybrał datę z selektora dat, ale nie chcesz, aby użytkownik wpisał w polu tekstowym, użyj następującego kodu:
źródło