jQuery datePicker의 오늘 버튼은 작동하지 않습니다
https://stackoverflow.com/questions/1073410
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
jqueryui datepicker를 사용하고 "오늘"버튼을 표시하고 있습니다. 그러나 그것은 작동하지 않습니다. 또한 데모에서도 작동하지 않습니다. http://www.jqueryui.com/demos/datepicker/#buttonbar
이 버튼을 누를 때 오늘 입력을 채우고 싶습니다.
작동하게 할 수 있습니까?
해결책
그들의 코드는 실제로 깨지지 않았습니다. 그것은 대부분의 사람들이 기대하는 일을하지 않습니다. 오늘 날짜를 입력 상자에 입력하는 것입니다. 그것이하는 일은 사용자가 오늘의 날짜를 캘린더에서 볼 수 있도록 하이라이트입니다. 그들이 한 달이나 다른 해에 쉬면, 캘린더는 사용자가 이미 선택한 날짜를 선택하지 않고 오늘의 시야로 돌아갑니다.
보다 직관적이 되려면 필요에 맞게 플러그인 코드를 업데이트해야합니다. 어떻게 진행되는지 알려주세요.
jQuery-UI JavaScript의 압축되지 않은 버전을 가져와야합니다. 버전 1.7.2를보고 있는데 "_gototoday"기능은 6760 행에 있습니다. 6831 행에서 _SelectDate () 함수를 발사하는 _GOTOTODAY에 호출을 추가하십시오. :) 행복 코딩.
다른 팁
jQuery 소스 코드를 수정하는 솔루션이 마음에 들지 않습니다. 대신이 코드를 포함하여 _gototoday 함수를 재 할 수 있습니다. @MeesterJeeves 답변 페이지의 JavaScrip Scope 파일 어딘가에 :
$.datepicker._gotoToday = function(id) {
var target = $(id);
var inst = this._getInst(target[0]);
if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
inst.selectedDay = inst.currentDay;
inst.drawMonth = inst.selectedMonth = inst.currentMonth;
inst.drawYear = inst.selectedYear = inst.currentYear;
}
else {
var date = new Date();
inst.selectedDay = date.getDate();
inst.drawMonth = inst.selectedMonth = date.getMonth();
inst.drawYear = inst.selectedYear = date.getFullYear();
// the below two lines are new
this._setDateDatepicker(target, date);
this._selectDate(id, this._getDateDatepicker(target));
}
this._notifyChange(inst);
this._adjustDate(target);
}
위의 코드는 본질적으로 위에 표시된 두 줄을 제외하고 버전 1.10.1의 jQuery UI DatePicker와 동일합니다. 전체 중얼 거림 gotoCurrent 그 옵션이 "오늘"의 새로운 의미로 이해되지 않기 때문에 실제로 제거 할 수 있습니다.
이것을 처리하는 가장 좋은 방법은 라이브러리 자체 외부의 _gototoday 방법을 무시하는 것입니다. 이것은 나에게 문제를 해결했다.
var old_goToToday = $.datepicker._gotoToday
$.datepicker._gotoToday = function(id) {
old_goToToday.call(this,id)
this._selectDate(id)
}
간단하고 이벤트를 해킹하거나 기본 기능을 변경할 필요가 없습니다.
다음 두 줄의 코드를 _gototoday 함수에 추가하십시오 ...
/* Action for current link. */
_gotoToday: function(id) {
var target = $(id);
var inst = this._getInst(target[0]);
if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
inst.selectedDay = inst.currentDay;
inst.drawMonth = inst.selectedMonth = inst.currentMonth;
inst.drawYear = inst.selectedYear = inst.currentYear;
}
else {
var date = new Date();
inst.selectedDay = date.getDate();
inst.drawMonth = inst.selectedMonth = date.getMonth();
inst.drawYear = inst.selectedYear = date.getFullYear();
}
this._notifyChange(inst);
this._adjustDate(target);
/* ### CUSTOMIZATION: Actually select the current date, don't just show it ### */
this._setDateDatepicker(target, new Date());
this._selectDate(id, this._getDateDatepicker(target));
},
나는 이것이 이미 받아 들여 졌다는 것을 알고 있지만, 여기에 기반한 확장 된 솔루션이 있습니다. Samy Zine의 아이디어. 이것은 jQuery 1.6.3과 jQuery UI 1.8.16을 사용했으며 Firefox 6에서 저를 위해 일했습니다.
$('.ui-datepicker-current').live('click', function() {
// extract the unique ID assigned to the text input the datepicker is for
// from the onclick attribute of the button
var associatedInputSelector = $(this).attr('onclick').replace(/^.*'(#[^']+)'.*/gi, '$1');
// set the date for that input to today's date
var $associatedInput = $(associatedInputSelector).datepicker("setDate", new Date());
// (optional) close the datepicker once done
$associatedInput.datepicker("hide");
});
당신도 원할 수도 있습니다 blur() 그만큼 $associatedInput 그리고 페이지에서 다음 입력/선택에 초점을 맞추지 만 일반적으로 수행하기 위해서는 사소하거나 구현별로 초점을 맞추십시오.
예를 들어, 나는 레이아웃을 위해 중고 테이블에서 작업하고 있던 페이지에서 이것을했습니다 (시작하지 마십시오.
$associatedInput.closest('tr').next('tr').find('input,select').first().focus();
jQuery 소스 코드에 추가 코드를 추가한다는 아이디어가 마음에 들지 않습니다. 그리고 나는 무시하고 싶지 않습니다 _gotoToday JavaScript 코드 어딘가에서 구현을 복사하고 하단에 추가 라인을 추가하여 메소드.
그래서이 코드를 사용하여 조정했습니다.
(function(){
var original_gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(id) {
var target = $(id),
inst = this._getInst(target[0]);
original_gotoToday.call(this, id);
this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
}
})();
당신은 사용해야합니다 todayBtn 옵션:
$("...").datepicker({
todayBtn: "linked"
})
(대신에 todayBtn: true).
Todaybtn
부울, "링크". 기본값 : False
true 또는 "linked"인 경우 DatePicker 하단에 "오늘"버튼을 표시하여 현재 날짜를 선택하십시오. 사실이라면 "오늘"버튼은 현재 날짜를보기 만 옮깁니다. "링크 된"경우 현재 날짜도 선택됩니다.
자세한 내용은 다음 링크를 참조하십시오.http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn
문서화는 어떤 "오늘"버튼을 통해 어떤 제목을 변경할 수 있는지에 대해 설명합니다.
.datepicker('option', 'currentText', 'New Title')
변경 한 달만 현재까지 변경되었습니다. 이 동작도 구성 할 수 있습니다
.datepicker('option', 'gotoCurrent', true);
그 후 버튼을 누르면 표시된 월이 선택된 날짜로 변경됩니다.
이 버튼으로 날짜를 제출하는 것은 디자인으로 불가능한 것 같습니다.
해당 목적을 위해 DatePicker에 옵션을 추가했습니다. SelectCurrent.
동일한 작업을 수행하려면 압축되지 않은 JS 파일에 다음을 추가하면됩니다.
1) 함수의 끝을 향해 DatePicker ()를 추가하십시오.
selectCurrent: false // True to select the date automatically when the current button is clicked
2) _GOTOTODAY 함수의 끝에 다음을 추가하십시오.
if (this._get(inst, 'selectCurrent'))
this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
방금 제거했습니다.
페이지의 일부인 일부 CSS 파일에서
.ui-datepicker-current {
visibility:hidden
}
오늘 버튼의 클릭시 입력 상자의 현재 날짜를 채우기 위해 아래 코드를 사용해 볼 수 있습니다. 아래 코드를 _gotoToday 함수 (함수 끝에) jquery.ui.datepicker.js.
this._selectDate(id, this._formatDate(inst,
inst.selectedDay, inst.drawMonth, inst.drawYear));
jQuery DatePicker의 1.8.5 버전을 사용하고 있습니다.
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur();
});
$.datepicker._gotoToday = function(id) {
var inst = this._getInst($(id)[0]);
var date = new Date();
this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
}
$.datepicker.setDefaults({
changeMonth: true,
maxDate: 'today',
numberOfMonths: 1,
showButtonPanel: true
});<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<input type="text" id="id">DatePicker는 적어도 10 배 더 굉장히 굉장히 재현되고 있습니다. 새 버전은이 문제를 해결합니다.
스크립트에 이것을 추가 할 수도 있습니다.
$('.ui-datepicker-current').live('click', function() {
$(".datepicker").datepicker("setDate", date);
});
(.live function을 사용하고 클릭하지 않음)
이것은 Live () 접근 방식과는 달리 DatePicker의 Beforeshow 콜백 기능을 사용하는 해킹입니다.
,beforeShow: function(input, datepicker) {
setTimeout(function() {
datepicker.dpDiv.find('.ui-datepicker-current')
.text('Select Today')
.click(function() {
$(input)
.datepicker('setDate', new Date())
.datepicker('hide');
});
}, 1);
return {};
}
이것은 간단한 해킹입니다
$(function() {
var _gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(a){
var target = $(a);
var inst = this._getInst(target[0]);
_gotoToday.call(this, a);
$.datepicker._selectDate(a, $.datepicker._formatDate(inst,inst.selectedDay, inst.selectedMonth, inst.selectedYear));
target.blur();
}
$( “#datepicker” ).datepicker({
showButtonPanel: true
});
});
나는 그것을 다른 방식으로 해결했다.
날짜로 탐색하는 데 짜증을 내고 이미 선택된 경우 (다음/이전 월을 클릭 한 후) 하루를 클릭해야합니다.
여기에서는 몇 달/년을 이동할 때 입력 필드를 직접 업데이트합니다. 오늘 버튼을 클릭하면 발사됩니다. 또한 선택이 변경 될 때마다 발사 할 변경 이벤트가 필요합니다.
$input.datepicker({
...
onChangeMonthYear: function (year, month, inst)
{
var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
if (!isNaN(date))
{
input.value = $.datepicker.formatDate("dd M yy", date);
$input.change();
}
}
}
(이것은 의문의 여지가 없습니다. 다른 솔루션이 저에게 효과가 없기 때문에 솔루션을 제공하여 도움을 주려고 노력하고 있습니다.)
나는 DatePicker가 다른 답변에 숨겨져 있도록 할 수 없었습니다. 달력이 닫히고 다시 열립니다. 아래 코드는 오늘 날짜를 설정하고 캘린더를 닫기 위해 오늘 버튼을 변경하기 위해 제가 작동했습니다.
JQuery UI -V1.11.4 JQuery JavaScript 라이브러리 v1.11.1 IE 11.0.28
완전성을 위해 기본값을 포함 시켰습니다.
$.datepicker._gotoToday = function(id) {
var inst = this._getInst($(id)[0]);
var date = new Date();
this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
}
$.datepicker.setDefaults({
changeMonth: true,
maxDate: 'today',
numberOfMonths: 1,
showButtonPanel: true
});