사용자 입력을 허용하지 않는 텍스트 입력이 있는 jQuery Datepicker

사용자 입력을 허용하지 않는 텍스트 입력이 있는 jQuery Datepicker

텍스트 상자 입력과 함께 jQuery Datepicker를 사용하는 방법:

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

그것은 사용자가 텍스트 상자에 임의의 텍스트를 입력하는 것을 허용하지 않습니다.텍스트 상자가 포커스를 얻거나 사용자가 클릭하면 Datepicker(데이트 픽커)가 팝업되되 키보드를 사용하는 모든 사용자 입력(복사 및 붙여넣기)은 텍스트 상자에서 무시하도록 합니다.저는 날짜 선택 달력에서만 텍스트 상자를 채우고 싶습니다.

가능한가요?

jQuery 1.2.6
날짜 선택기 1.5.2

텍스트 입력에 읽기 전용 특성을 사용할 수 있어야 하며 jQuery는 여전히 내용을 편집할 수 있습니다.

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

저의 경험을 바탕으로 Adhip Gupta가 제안한 해결책을 추천합니다.

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

다음 코드에서는 사용자가 새 문자를 입력할 수 없지만 문자를 삭제할 수 있습니다.

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

또한, 이것은 자바스크립트가 비활성화된 사용자들에게 이 양식을 쓸모없게 만들 것입니다.

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

해라

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

여러 곳에서 날짜 선택기를 재사용하는 경우 다음과 같은 방법을 사용하여 자바스크립트를 통해 텍스트 상자를 수정하는 것이 쉽습니다.

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

데이트 상대를 초기화하는 장소의 바로 다음/이전.

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

포스트백 후 텍스트 상자의 값이 손실됩니다.

차라리 완벽하게 작동하는 브래드8118의 제안을 사용하는 것이 좋습니다.

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

편집: IE에서 작동하려면 '키 누르기' 대신 '키다운'을 사용합니다.

날짜 선택기를 초기화한 후:

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

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

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

jquery에서 read only 특성을 추가합니다.

두 가지 방법이 있습니다. (제가 알기로는)

1. 옵션 A: 텍스트 필드를 읽기 전용으로 설정합니다.다음과 같이 할 수 있습니다.

2. 옵션 B: 커서를 포커스로 바꿉니다.ti를 흐리게 설정합니다.속성을 설정하여 수행할 수 있습니다.onfocus="this.blur()"날짜 선택기 텍스트 필드로 이동합니다.

예:<input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

게인 포커스에 대한 날짜 선택에서 팝업으로 이동하려면:

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

사용자 입력을 원하지 않을 경우 입력 필드에 추가합니다.

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

방금 이걸 발견해서 여기에 공유합니다.여기 옵션이 있습니다.

https://eonasdan.github.io/bootstrap-datetimepicker/Options/ # ignore 읽기 전용

코드는 여기 있습니다.

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입니다.

이 스레드가 오래되었다는 것을 알고 있지만, 동일한 문제가 발생하는 다른 사람들을 위해 @Brad8118 솔루션을 구현합니다(입력 내용을 읽기만 하도록 선택하면 사용자가 선택한 경우 datepicker에서 삽입된 날짜 값을 삭제할 수 없기 때문에 선호합니다). 또한 사용자가 값을 붙여넣는 것을 방지해야 합니다(@ErikPhilips가 제안하는 것처럼).d to need), 저는 여기에 이 추가 사항을 남겨두었는데, 이것은 저에게 효과가 있었습니다.$("#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 에서 그리고 내가 사용한 전체 스크립트(대신 펑위안첸/데이트피커 플러그인 사용):

$('[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;

읽기만 추가하는 대신 키 누르기="reath false;"를 사용할 수도 있습니다.

이 데모는 일정관리를 텍스트 필드 위에 놓아서 입력할 수 없도록 합니다.입력 필드를 HTML에서만 읽도록 설정할 수도 있습니다.

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

HTML

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

CSS

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

저는 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)

매력적으로 작용했습니다.

텍스트 상자를 사용하는 대신 버튼을 사용할 수도 있습니다.사용자가 수동으로 날짜를 작성하지 않았으면 하는 저에게 가장 적합합니다.

저는 이 질문에 이미 답했고 대부분이 속성을 사용할 것을 제안했습니다.
나는 단지 나의 시나리오를 공유하고 대답하고 싶습니다.

HTML 요소에 속성을 추가한 후 이 속성을 동적으로 만들 수 없다는 문제에 직면했습니다.
HTML 작성 시간에 둘 다로 설정을 시도하기도 했습니다.

그래서 나는 당신이 그것을 또한 설정하고 싶다면 사용하지 말 것을 제안할 것입니다.

대신 사용

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

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

키만 누를 수 있습니다.
우회할 키 코드를 더 추가할 수 있습니다.

저는 두 가지를 모두 추가했고 여전히 양식을 제출하기 때문에 아래와 같은 코드입니다.
제거 후에는 정상적으로 작동합니다.

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>

Time picker의 ID(DatetimePicker의 ID)를 사용자의 ID로 바꿉니다.

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

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

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

이 질문은 오래된 답이 많고 읽기만 하는 것이 일반적으로 받아들여지는 해결책인 것 같습니다.나는 현대 브라우저에서 더 나은 접근방식은inputmode="none"HTML 입력 태그에서:

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

또는 스크립트로 수행하는 것을 선호하는 경우:

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

테스트를 많이 해본 적은 없지만, 제가 사용했던 안드로이드 셋업에서는 잘 작동하고 있습니다.

제 경우에는 제가 사용합니다.disableTextInput소유물

$( ".datepicker" ).datepicker({'dateFormat' : 'd-m-y', 'disableTextInput':true });

아니면 숨겨진 필드를 사용하여 값을 저장할 수도 있습니다.

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

});

언급URL : https://stackoverflow.com/questions/153759/jquery-datepicker-with-text-input-that-doesnt-allow-user-input