jQuery UI Datepicker 달력에서 선택한 날짜를 지우거나 재설정하려면 어떻게 해야 합니까?
날짜 선택 도구 달력 값을 재설정하려면 어떻게 해야 합니까?최소 및 최대 날짜 제한?
문제는 텍스트 상자 값을 삭제하여 날짜를 지울 때 이전 날짜 제한이 계속 적용된다는 것입니다.
서류를 분류해 봤는데 해결책으로 나온 게 아무것도 없었어요.또한 SO/Google 검색에 대한 빠른 해결책을 찾을 수 없었습니다.
http://jsfiddle.net/CoryDanielson/tF5MH/
솔루션:
// from & to input textboxes with datepicker enabled
var dates = $("input[id$='dpFrom'], input[id$='dpTo']");
// #clearDates is a button to clear the datepickers
$('#clearDates').on('click', function(){
dates.attr('value', '');
dates.each(function(){
$.datepicker._clearDate(this);
});
});
_.clearDate()는 DatePicker 개체의 개인 메서드입니다.jQuery UI 웹사이트의 공개 API에서는 찾을 수 없지만, 매력적으로 작동합니다.
저는 바로 이 작업을 수행하려고 했습니다. 즉, 사용자가 입력한 필터를 제거할 수 있도록 날짜 선택기를 비웠습니다.조금 검색해보니 이 달콤한 코드 조각이 있었습니다.
읽기 전용 필드에서도 지우기 기능을 추가할 수 있습니다.다음 코드를 날짜 선택기에 추가하기만 하면 됩니다.
}).keyup(function(e) {
if(e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
사용자는 읽기 전용 필드를 강조 표시한 다음 백스페이스 또는 삭제 키를 사용하여 다음을 사용하여 날짜를 삭제할 수 있습니다._clearDate기능.
시도해 보셨습니까?
$('selector').datepicker('setDate', null);
API 문서에 따라 작동해야 합니다.
옵션을 null로 다시 설정하면 됩니다.
dates.datepicker( "option" , {
minDate: null,
maxDate: null} );
jsfidle을 변경했습니다: http://jsfiddle.net/tF5MH/9/
$('.date').datepicker('setDate', null);
지우기 코드를 다음으로 변경해 보십시오.
$('#clearDates').on('click', function(){
dates.attr('value', '');
$("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "maxDate", null );
$("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "minDate", null );
});
이것을 사용해 보세요, 이것은 날짜를 지울 Jquery Calender에 지우기 버튼을 추가할 것입니다.
$("#DateField").datepicker({
showButtonPanel: true,
closeText: 'Clear',
onClose: function (dateText, inst) {
if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
{
document.getElementById(this.id).value = '';
}
}
});
너무 늦었다는 것은 알지만, 여기 제게 도움이 된 간단한 코드 평화가 있습니다.
$('#datepicker-input').val('').datepicker("refresh");
지우기를 클릭할 때 날짜 선택기의 최대 날짜 속성을 재설정합니다.
jquery 웹사이트에서
Get or set the maxDate option, after init.
//getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
//setter
$( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );
분명한 답은 저에게 효과가 있었던 것입니다.
$('#datepicker').val('');
여기서 $('#datepicker')는 입력 요소의 ID입니다.
텍스트 필드에 포커스가 없을 때(날짜 선택기가 열려 있을 때) IE8에서 백스페이스 키가 "페이지백" 바로 가기임을 설명하는 Leniel Macaferi 솔루션의 수정 버전입니다.
또한 다음을 사용합니다.val()이후로 필드를 정리하기 위해_clearDate(this)저한테는 안 통했어요.
$("#clearDates").datepicker().keyup(function (e) {
// allow delete key (46) to clear the field
if (e.keyCode == 46)
$(this).val("");
// backspace key (8) causes 'page back' in IE8 when text field
// does not have focus, Bad IE!!
if (e.keyCode == 8)
e.stopPropagation();
});
날짜 선택기 초기화는 다음과 같습니다.
dateOptions = {
changeYear: true,
changeMonth: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: true,
closeText: 'Clear',
};
따라서 기본 '완료' 버튼에는 '지우기' 텍스트가 표시됩니다.
이제 datepicker.js 내부에서 내부 함수 '_attachHandlers'를 찾습니다. 이 함수는 다음과 같습니다.
_attachHandlers: function (inst) {
var stepMonths = this._get(inst, "stepMonths"),
id = "#" + inst.id.replace(/\\\\/g, "\\");
inst.dpDiv.find("[data-handler]").map(function () {
var handler = {
prev: function () {...},
next: function () {...},
hide: function () {
$.datepicker._hideDatepicker();
},
today: function () {...}
...
숨김 기능을 다음과 같이 변경합니다.
...
hide: function () {
$.datepicker._clearDate(id);
$.datepicker._hideDatepicker();
},
...
필드와 모든 셰넌건을 클리어하기 위해 이 코드를 사용합니다.사용 사례를 위한 빈 필드가 필요했습니다.
jQuery.datepicker._clearDate(window.firstDay);
window.firstDay.datepicker('setDate',null);
window.firstDay[0].value = '';
이유에서인지..val('')하는 것이했습니다.하지만 jQuery를 우회한 것이 성공했습니다.제 생각에는 .datepicker('clear') 옵션이 없는 것이 흠입니다.
이 문제를 해결하는 나의 방법
ui.js에서 var 'controls' 변경
controls = (!inst.inline ? "<button type='button' class='ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
this._get(inst, "closeText") + "</button>" + "<button type='button' class='ui-datepicker-close ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
this._get(inst, "clearText") + "</button>" : "");
그런 다음 일반 텍스트 변수를 추가합니다.
this.regional[""] = { // Default regional settings
closeText: "Done", // Display text for close link
clearText: "Clear", // Display text for close link
prevText: "Prev", // Display text for previous month link
그리고 기능을 보여주기 전에.
$(".i_date").datepicker
(
{
beforeShow: function (input, inst)
{
setTimeout
(
function ()
{
$('.ui-datepicker-clear').bind('click', function() { $(input).val(''); });
},
0
);
}
}
);
$("#datepicker").datepicker({
showButtonPanel: true,
closeText: 'Clear',
onClose: function () {
var event = arguments.callee.caller.caller.arguments[0];
if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
$(this).val('');
}
}
});
Firefox에서는 날짜 선택기 제어가 기본적으로 비활성화된 형식(프로그래밍 방식)으로 작동합니다.
$("#txtDat2").prop('disabled', false); //temporary enable controls<br>
$("#txtDat2").val("YYYY-MM-DD"); //reset date to dd.mm.yyyyy
$("#txtDat2").prop('disabled', true); //back to default state
이 코드는 저에게 적합합니다.
onClose: () => $("#datepicker-id").multiDatesPicker("resetDate"),
이 솔루션을 사용해 보십시오. 제가 시도한 것처럼 제대로 작동할 것입니다.
$('selector').datepicker('setStartDate', 0);
$('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');
언급URL : https://stackoverflow.com/questions/9435086/how-do-i-clear-reset-the-selected-dates-on-the-jquery-ui-datepicker-calendar
'programing' 카테고리의 다른 글
| CSS 너비/높이 또는 HTML 콜/행 속성으로 텍스트 영역 크기를 지정해야 합니까? (0) | 2023.08.10 |
|---|---|
| vlookup에서 와일드카드를 사용할 수 있습니까? (0) | 2023.08.10 |
| 무료 GitHub 계정에 공동작업자를 추가하시겠습니까? (0) | 2023.08.10 |
| Excel VBAIDE를 TFS 2010과 함께 작동시킬 수 있는 방법이 있습니까? (0) | 2023.08.10 |
| 사용 방법사용 방법태그를 지정합니다.NET? (0) | 2023.08.10 |