사용자 입력을 허용하지 않는 텍스트 입력이있는 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();});

편집 : IE에서 작동하게하려면 'keypress'대신 'keydown'을 사용하십시오.

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

jquery에 readonly 속성을 추가하십시오.

이 작업을 수행 할 수있는 두 가지 옵션이 있습니다. (내가 아는 한)

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

게인 포커스에서 datepicker가 팝업되도록하려면 :

$(".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 솔루션을 구현합니다 (입력을 읽기 전용으로 선택하면 사용자가 datepicker에서 삽입 된 날짜 값을 삭제할 수 없기 때문에 선호합니다) 그가 선택)도) @ErikPhilips이 필요하는 제안 (값을 붙여에서 사용자를 방지하기 위해 필요한 경우, I는 나를 위해 일한, 여기이 추가하자 $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });여기에서 https://www.dotnettricks.com/learn/ jquery / disable-cut-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', true)

매력처럼 일했다 ..

텍스트 상자를 사용하는 대신 버튼을 사용할 수도 있습니다. 사용자가 날짜를 수동으로 쓰지 않기를 원하는 경우 가장 효과적입니다.

이 질문에 이미 답변되어 있으며 가장 많이 사용하는 것이 readonly좋습니다.
시나리오와 답변을 공유하고 싶습니다.

추가 한 후 readonly내에 속성을 HTML 요소 , 내가 만들 수 없습니다 오전 문제를 직면 한 이 같은 속성을 required동적으로. HTML 생성 시간 과 HTML 생성 시간
으로 설정을 시도 했습니다.readonlyrequired

따라서 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>

시간 선택기의 ID (IDofDatetimePicker)를 ID로 바꿉니다.

이렇게하면 사용자가 추가 키보드 입력을 입력 할 수 없지만 여전히 시간 팝업에 액세스 할 수 있습니다.

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

이 소스를 사용해보십시오 : https://github.com/jonthornton/jquery-timepicker/issues/109

이 질문에는 많은 오래된 답변이 있으며 읽기 전용이 일반적으로 허용되는 솔루션 인 것 같습니다. 현대 브라우저에서 더 나은 접근 방식 inputmode="none"은 HTML 입력 태그 를 사용하는 것 입니다.

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

또는 스크립트에서 원하는 경우 :

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

나는 그것을 광범위하게 테스트하지는 않았지만 내가 사용한 Android 설정에서 잘 작동하고 있습니다.

또는 예를 들어 숨겨진 필드를 사용하여 값을 저장할 수 있습니다.

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

그리고 $ ( "# my_txtbox"). datepicker ({옵션 :

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

사용자가 날짜 선택기에서 날짜를 선택하지만 사용자가 텍스트 상자 안에 입력하지 못하게하려면 다음 코드를 사용하십시오.

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

});