jQuery Datepicker z wprowadzaniem tekstu, które nie pozwala na wprowadzanie danych przez użytkownika

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

Powinieneś móc używać tylko do odczytu atrybutu przy wprowadzaniu tekstu, a jQuery nadal będzie mógł edytować jego zawartość.

<input type='text' id='foo' readonly='true'>

Bazując na swoim doświadczeniu polecam rozwiązanie zaproponowane przez Adhip Gupta:

$("#my_txtbox").attr( 'readOnly' , 'true' );

Poniższy kod nie pozwoli typu użytkownik nowe postacie, ale będą dopuszczać ich do znaków Usuń:

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

Dodatkowo spowoduje to, że formularz będzie bezużyteczny dla tych, którzy mają wyłączoną obsługę JavaScript:

<input type="text" readonly="true" />

próbować

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

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:

$("#my_txtbox").attr( 'readOnly' , 'true' );

zaraz po / przed miejscem, w którym zainicjowałeś swój datepicker.

<input type="text" readonly="true" />

powoduje, że pole tekstowe traci swoją wartość po ogłoszeniu zwrotnym.

Powinieneś raczej skorzystać z sugestii Brad8118, która działa idealnie.

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

EDYCJA: aby działał w IE, użyj „keydown” zamiast „keypress”

$("#txtfromdate").datepicker({         
    numberOfMonths: 2,
    maxDate: 0,               
    dateFormat: 'dd-M-yy'       
}).attr('readonly', 'readonly');

dodaj atrybut readonly do jquery.

Masz dwie możliwości, aby to zrobić. (Z tego co wiem)

1. Opcja A: Ustaw pole tekstowe tylko do odczytu. Można to zrobić w następujący sposób.

2. 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/>

Po zainicjowaniu selektora dat:

        $(".project-date").datepicker({
            dateFormat: 'd M yy'
        });

        $(".project-date").keydown(false);

Aby wybrać datę wyskakującego okienka na temat wzmocnienia:

$(".selector").datepicker({ showOn: 'both' })

Jeśli nie chcesz, aby użytkownik wprowadzał dane, dodaj to do pola wejściowego

<input type="text" name="date" readonly="readonly" />

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

<br/>
<!-- padding for jsfiddle -->
<div class="input-group date" id="arrival_date_div">
  <input type="text" class="form-control" id="arrival_date" name="arrival_date" required readonly="readonly" />
  <span class="input-group-addon">
    <span class="glyphicon-calendar glyphicon"></span>
  </span>
</div>

JS

$('#arrival_date_div').datetimepicker({
  format: "YYYY-MM-DD",
  ignoreReadonly: true
});

Oto skrzypce:

http://jsfiddle.net/matbaric/wh1cb6cy/

Moja wersja pliku bootstrap-datetimepicker.js to 4.17.45

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ść.

<input type="text" readonly="true" />

HTML

<input class="date-input" type="text" readonly="readonly" />

CSS

.date-input {
      background-color: white;
      cursor: pointer;
}

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):

$('[data-toggle="datepicker"]').datepicker({
    autoHide: true,
    pick: function (e) {
        e.preventDefault();
        $(this).val($(this).datepicker('getDate', true));
    }
}).keypress(function(event) {
    event.preventDefault(); // prevent keyboard writing but allowing value deletion
}).bind('paste',function(e) {
    e.preventDefault()
}); //disable paste;

Zamiast dodawać tylko do odczytu , możesz również użyć onkeypress = "return false;"

Odkryłem, że wtyczka jQuery Calendar, przynajmniej dla mnie, ogólnie działa lepiej do wybierania dat.

$('.date').each(function (e) {
    if ($(this).attr('disabled') != 'disabled') {
        $(this).attr('readOnly', 'true');
        $(this).css('cursor', 'pointer');
        $(this).css('color', '#5f5f5f');
    }
});

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.

<input type="text" id="my_txtbox" readonly />  <!--HTML5-->

<input type="text" id="my_txtbox" readonly="true"/>

$ ("# my_txtbox"). prop ('tylko do odczytu', prawda)

działał jak urok.

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ę.

Wiem, że na to pytanie udzielono już odpowiedzi i większość sugeruje użycie readonlyatrybutu.
Chcę tylko podzielić się moim scenariuszem i odpowiedzieć.

Po dodaniu readonlyatrybutu do mojego elementu HTML napotkałem problem polegający na tym, że nie mogę utworzyć tego atrybutu tak requireddynamicznie.
Próbowałem nawet ustawić jako oba readonlyirequired podczas tworzenia HTML.

Więc zasugeruję, aby nie używać, readonlyjeśli chcesz ustawić to requiredrównież.

Zamiast tego użyj

$("#my_txtbox").datepicker({
    // options
});

$("#my_txtbox").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});

Pozwala to tabtylko na naciśnięcie klawisza.
Możesz dodać więcej kodów klawiszy, które chcesz ominąć.

Poniżej kod, ponieważ dodałem oba readonlyi requirednadal przesyła formularz.
Po wyjęciu readonlydziała poprawnie.

https://jsfiddle.net/shantaram/hd9o7eor/

$(function() {
  $('#id-checkbox').change( function(){
  	$('#id-input3').prop('required', $(this).is(':checked'));
  });
  $('#id-input3').datepicker();
  $("#id-input3").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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/jquery-ui-git.css" rel="stylesheet"/>

<form action='https://jsfiddle.net/'>
Name:  <input type="text" name='xyz' id='id-input3' readonly='true' required='true'> 
    <input type='checkbox' id='id-checkbox'> Required <br>
    <br>
    <input type='submit' value='Submit'>
</form>

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

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:

<input type="text" ... inputmode="none" />

lub, jeśli wolisz zrobić to w skrypcie:

$(selector).attr('inputmode', 'none');

Nie testowałem go szczegółowo, ale działa dobrze na konfiguracjach Androida, z którymi go używałem.

Lub możesz na przykład użyć ukrytego pola do przechowywania wartości ...

        <asp:HiddenField ID="hfDay" runat="server" />

i w $ ("# my_txtbox"). datepicker ({opcje:

        onSelect: function (dateText, inst) {
            $("#<% =hfDay.ClientID %>").val(dateText);
        }

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:

<script type="text/javascript">
$(function () {
    $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
    $("#datepicker").readonlyDatepicker(true);

});