여러 인스턴스에 jQuery datepicker 적용
한 번의 인스턴스에 대해 잘 작동하는 jQuery 날짜 선택 컨트롤이 있지만 여러 인스턴스에서 작동하도록하는 방법을 모르겠습니다.
<script type="text/javascript">
$(function() {
$('#my_date').datepicker();
});
</script>
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
<%=Html.TextBox("my_date")%> <br/>
<% Next%>
<% End Using%>
For Each 루프가 없으면 잘 작동하지만 "MyRecords"컬렉션에 항목이 두 개 이상 있으면 첫 번째 텍스트 상자에만 날짜 선택기가 표시됩니다 (ID에 연결되어 있으므로 의미가 있음). 텍스트 상자에 클래스를 할당하고 다음을 지정해 보았습니다.
$('.my_class').datepicker();
그러나 모든 곳에서 날짜 선택기가 표시되지만 모두 첫 번째 텍스트 상자를 업데이트합니다.
이 작업을 수행하는 올바른 방법은 무엇입니까?
html :
<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />
스크립트:
$('.datepick').each(function(){
$(this).datepicker();
});
(간단하게 유지하기 위해 의사가 약간 코딩 됨)
나는 단지 같은 문제가 있었다.
날짜 선택을 사용하는 올바른 방법은 $('.my_class').datepicker();여러 날짜 선택기에 동일한 ID를 할당하지 않는 것입니다.
분명한 대답은 다음과 같이 다른 ID, 각 텍스트 상자에 대해 별도의 ID를 생성하는 것입니다.
[int i=0]
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
[i++]
<%=Html.TextBox("my_date[i]")%> <br/>
<% Next%>
<% End Using%>
ASP.net을 모르기 때문에 대괄호 안에 일반적인 C와 유사한 구문 코드를 추가했습니다. 실제 ASP.net 코드로 변환하는 것은 문제가되지 않습니다.
그런 다음 생성 할 수있는 방법을 찾아야합니다.
$('#my_date[i]').datepicker();
귀하의 Model.MyRecords. 다시 말하지만 대괄호 안에 카운터가 있으므로 jQuery 함수는 다음과 같습니다.
<script type="text/javascript">
$(function() {
$('#my_date1').datepicker();
$('#my_date2').datepicker();
$('#my_date3').datepicker();
...
});
</script>
<html>
<head>
<!-- jQuery JS Includes -->
<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/ui.datepicker.js"></script>
<!-- jQuery CSS Includes -->
<link type="text/css" href="jquery/themes/base/ui.core.css" rel="stylesheet" />
<link type="text/css" href="jquery/themes/base/ui.datepicker.css" rel="stylesheet" />
<link type="text/css" href="jquery/themes/base/ui.theme.css" rel="stylesheet" />
<!-- Setup Datepicker -->
<script type="text/javascript"><!--
$(function() {
$('input').filter('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: 'jquery/images/calendar.gif',
buttonImageOnly: true
});
});
--></script>
</head>
<body>
<!-- Each input field needs a unique id, but all need to be datepicker -->
<p>Date 1: <input id="one" class="datepicker" type="text" readonly="true"></p>
<p>Date 2: <input id="two" class="datepicker" type="text" readonly="true"></p>
<p>Date 3: <input id="three" class="datepicker" type="text" readonly="true"></p>
</body>
</html>
간단한 해결책이 있습니다.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/flexcroll.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="../js/JScript.js"></script>
<title>calendar</title>
<script type="text/javascript">
$(function(){$('.dateTxt').datepicker(); });
</script>
</head>
<body>
<p>Date 1: <input id="one" class="dateTxt" type="text" ></p>
<p>Date 2: <input id="two" class="dateTxt" type="text" ></p>
<p>Date 3: <input id="three" class="dateTxt" type="text" ></p>
</body>
</html>
런타임 생성 입력 텍스트 상자에 datepicker를 추가 할 때 datepicker가 이미 포함되어 있는지 확인한 다음 먼저 hasDatepicker 클래스를 제거한 다음 datePicker를 적용해야합니다.
function convertTxtToDate() {
$('.dateTxt').each(function () {
if ($(this).hasClass('hasDatepicker')) {
$(this).removeClass('hasDatepicker');
}
$(this).datepicker();
});
}
SeanJA 답변에 대한 약간의 메모.
Interestingly, if you use KnockoutJS and jQuery together the following inputs with different IDs, but with the same data-bind observable:
<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: first_dt" id="date_2" class="datepick" />
will bind one (the same) datepicker to both of the inputs (even though they have different ids or names).
Use separate observables in your ViewModel to bind a separate datepicker to each input:
<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: second_dt" id="date_2" class="datepick" />
Initialization:
$('.datepick').each(function(){
$(this).datepicker();
});
The solution here is to have different IDs as many of you have stated. The problem still lies deeper in datepicker. Please correct me, but doesn't the datepicker have one wrapper ID - "ui-datepicker-div." This is seen on http://jqueryui.com/demos/datepicker/#option-showOptions in the theming.
Is there an option that can change this ID to be a class? I don't want to have to fork this script just for this one obvious fix!!
To change use of class instead of ID
<script type="text/javascript">
$(function() {
$('.my_date1').datepicker();
$('.my_date2').datepicker();
$('.my_date3').datepicker();
...
});
</script>
I had the same problem, but finally discovered that it was an issue with the way I was invoking the script from an ASP web user control. I was using ClientScript.RegisterStartupScript(), but forgot to give the script a unique key (the second argument). With both scripts being assigned the same key, only the first box was actually being converted into a datepicker. So I decided to append the textbox's ID to the key to make it unique:
Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);
I had a similar problem with dynamically adding datepicker classes. The solution I found was to comment out line 46 of datepicker.js
// this.element.on('click', $.proxy(this.show, this));
In my case, I had not given my <input> elements any ID, and was using a class to apply the datepicker as in SeanJA's answer, but the datepicker was only being applied to the first one. I discovered that JQuery was automatically adding an ID and it was the same one in all of the elements, which explained why only the first was getting datepickered.
참고URL : https://stackoverflow.com/questions/707603/apply-jquery-datepicker-to-multiple-instances
'developer tip' 카테고리의 다른 글
| What is web.xml file and what are all things can I do with it? (0) | 2020.11.01 |
|---|---|
| 레일스 rspec 전과 각 전 (0) | 2020.11.01 |
| __stdcall의 의미와 사용법은 무엇입니까? (0) | 2020.11.01 |
| $ (ProjectDir)의 값을 어떻게 알 수 있습니까? (0) | 2020.11.01 |
| jQuery는 div를 특정 인덱스로 삽입 (0) | 2020.11.01 |