jQuery Datepicker з введенням тексту, який не дозволяє вводити користувач

Як я можу використовувати jQuery Datepicker з введенням текстового поля:

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

що не дозволяє користувачеві вводити випадковий текст у текстове поле. Я хочу, щоб Datepicker з'явився, коли текстове поле набуває фокус або користувач натискає на нього, але я хочу, щоб текстове поле ігнорувало будь-які дані користувача за допомогою клавіатури (копіювати та вставляти чи будь-яку іншу). Я хочу заповнити текстове поле виключно з календаря Datepicker.

Чи можливо це?

jQuery 1.2.6
Вибірка дати 1.5.2

Ви повинні мати можливість використовувати атрибут readonly для введення тексту, і jQuery все одно зможе редагувати його вміст.

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

На основі свого досвіду я б рекомендував рішення, запропоноване Adhip Gupta:

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

Наступний код не дозволить користувачеві ввести нові символи, але буде дозволяти їм видалити символи:

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

Крім того, ця форма буде корисною для тих, у кого відключений JavaScript:

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

спробуйте

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

Якщо ви повторно використовуєте інструмент вибору дат у кількох місцях, тоді було б доречно змінити текстове поле також через JavaScript, використовуючи щось на кшталт:

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

одразу після / перед місцем, де ви ініціалізуєте свій підбирач дати.

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

призводить до того, що текстове поле втрачає значення після післягарантійної публікації.

Ви краще скористайтеся пропозицією Brad8118, яка працює ідеально.

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

EDIT: щоб змусити його працювати для IE, використовуйте 'keydown' замість 'keypress'

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

додайте атрибут readonly в jquery.

У вас є два варіанти, щоб це зробити. (Наскільки мені відомо)

1. Варіант A: Зробіть текстове поле лише для читання. Зробити це можна наступним чином.

2. Варіант B: Змінення фокусування курсору. Встановіть розмиття. це можна зробити, встановивши атрибут onfocus="this.blur()"до текстового поля вибору дати.

Наприклад: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

Після ініціалізації вибору дати:

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

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

Щоб вибирати дату, щоб відкрити фокус на посилення:

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

Якщо ви не хочете ввести інформацію користувача, додайте це до поля введення

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

Я щойно натрапив на це, тому я тут ділюсь. Ось варіант

https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly

Ось код.

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
});

Ось загадка:

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

Моя версія bootstrap-datetimepicker.js - 4.17.45

Цей демонстраційний зразок це робить, поміщаючи календар над текстовим полем, щоб ви не могли вводити його. Ви також можете встановити поле введення для читання лише в HTML, щоб бути впевненим.

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

HTML

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

CSS

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

Я знаю, що цей потік є старим, але для інших, хто стикається з тією ж проблемою, реалізують рішення @ Brad8118 (що я вважаю за краще, тому що якщо ви вирішите зробити введення лише заново, користувач не зможе видалити значення дати, вставлене з датника якщо він вирішить), а також потрібно не допустити, щоб користувач вставляв значення (як @ErikPhilips запропонував бути необхідним), я дозволю це доповнення тут, яке працювало для мене: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });звідси https://www.dotnettricks.com/learn/ jquery / ones-cut-copy-copy-and-paste-in-textbox-using-jquery-javascript та весь певний скрипт, який я використовую (замість цього використовуйте плагін 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;

Замість додавання лише для читання ви можете також використовувати onkeypress = "return false;"

Я виявив, що плагін jQuery Calendar, як мінімум, для мене просто працює краще для вибору дат.

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

Ось ваша відповідь, який спосіб вирішити. Ви не хочете використовувати jquery, коли ви обмежили введення користувача в керуванні текстовими полями.

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

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

$ ("# my_txtbox"). prop ("лише для читання", правда)

працював як шарм ..

Замість текстового поля ви також можете використовувати кнопку. Для мене це найкраще працює, коли я не хочу, щоб користувачі писали дату вручну.

Я знаю, що на це питання вже відповіли, і більшість з них пропонують використовувати readonlyаттрибуцію.
Я просто хочу поділитися своїм сценарієм і відповісти.

Після додавання readonlyатрибута до мого HTML-елемента я зіткнувся з проблемою, що я не в змозі зробити цей атрибут настільки requiredдинамічно.
Навіть пробував настройки і як readonlyі requiredпри створенні HTML.

Тому я пропоную не використовувати, readonlyякщо ви хочете встановити його requiredтакож.

Замість використання

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

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

Це дозволяє лише натискати tabклавішу.
Ви можете додати більше ключових кодів, які ви хочете обійти.

Я нижче коду, оскільки я додав обидва, readonlyі requiredвін все ще подає форму.
Після readonlyйого видалення працює належним чином.

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>

замініть ідентифікатор вибору часу: IDofDatetimePicker на свій ідентифікатор.

Це не дозволить користувачеві вводити будь-які подальші введення клавіатури, але все-таки користувач зможе отримати доступ до спливаючого часу.

$ ("# my_txtbox"). клавіша (функція (подія) {event.preventDefault ();});

Спробуйте це джерело: https://github.com/jonthornton/jquery-timepicker/isissue/109

На це питання є багато старих відповідей, і лише начебто це загальноприйняте рішення. Я вважаю, що кращим підходом у сучасних браузерах є використання inputmode="none"тегу введення HTML:

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

або, якщо ви хочете робити це в сценарії:

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

Я не перевіряв його широко, але він добре працює на налаштуваннях Android, якими я користувався.

Або ви могли, наприклад, використати приховане поле для збереження значення ...

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

і в панелі $ ("# my_txtbox"). дата ({параметри:

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

Якщо ви хочете, щоб користувач обрав дату з вибору дати, але ви не хочете, щоб користувач вводив всередині текстового поля, використовуйте наступний код:

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

});