एकाधिक उदाहरणों के लिए jQuery डेटपिकर लागू करें

मुझे एक jQuery दिनांक पिकर नियंत्रण मिला है जो एक बार उदाहरण के लिए ठीक काम करता है, लेकिन मुझे यकीन नहीं है कि इसे कई उदाहरणों के लिए कैसे काम करना है।एकाधिक उदाहरणों के लिए 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%>

प्रत्येक पाश के लिए बिना, यह ठीक काम करता है, लेकिन वहाँ "MyRecords" संकलन में एक से अधिक आइटम है, तो सिर्फ पहला पाठ बॉक्स एक दिनांक पिकर (क्योंकि यह से जुड़ा हुआ है जो समझ में आता है हो जाता है ID)। मैं पाठ बॉक्स में एक वर्ग के बताए और निर्दिष्ट करने की कोशिश की:

$('.my_class').datepicker();

लेकिन जब कि एक दिनांक पिकर हर जगह से पता चलता है, वे सभी अद्यतन पहले पाठ बॉक्स।

इस काम को करने का सही तरीका क्या है?

स्रोत

2009-04-01 gfrizzle

कौन-सी भाषा <% blah %> सामान है? –

कि वीबी एक ASP.NET पृष्ठ के अंदर नहीं है - केवल एक त्वरित तरीका प्रश्न के बिंदु को वर्णन। – gfrizzle

सुनिश्चित इनपुट फ़ील्ड नहीं 'disabled' हैं, datepicker नहीं ऊपर इनपुट फ़ील्ड के लिए' disabled' विशेषता – bobobobo

106

एचटीएमएल:

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

(छद्म अप करने के लिए एक बिट कोडित इसे आसान रखें)

स्रोत

2009-04-01 23:01:40 SeanJA

यह मेरी समस्या के दिल की तरह लग रहा है कि पाठ बॉक्स सभी एक ही आईडी है, तो हर दिनांक पिकर पहले पाठ बॉक्स अपडेट कर रहा है है। आपका उदाहरण उस से पीड़ित नहीं है, इसलिए यह काम करता है। मैं लूप में आईडी को अलग कैसे प्राप्त करूं? – gfrizzle

+14

डुह, टेक्स्ट बॉक्स में एक ही आईडी नहीं होने दें। कभी-कभी आपको बबल अप के स्पष्ट उत्तर के लिए थोड़ी देर के लिए किसी समस्या से दूर कदम उठाना पड़ता है। – gfrizzle

चाहेंगे नहीं '$ (" datepick। ") Datepicker();।' काम एक बार आप इनपुट फ़ील्ड पर अलग आईडी नहीं है? – rapcal

स्पष्ट जवाब अलग आईडी, प्रत्येक पाठ बॉक्स के लिए एक अलग आईडी, जैसे

[int i=0] 
<% Using Html.BeginForm()%> 
<% For Each item In Model.MyRecords%> 
[i++] 
<%=Html.TextBox("my_date[i]")%> <br/> 
<% Next%> 
<% End Using%>

कुछ मैं ASP.net पता नहीं है तो मैं बस कुछ सामान्य सी-तरह वाक्यविन्यास कोड जोड़ा उत्पन्न करने के लिए किया जाएगा वर्ग ब्रैकेट के भीतर। इसे वास्तविक एएसपीनेट कोड में अनुवाद करना कोई समस्या नहीं होनी चाहिए।

उसके बाद, आप एक तरह से अपने Model.MyRecords में के रूप में कई

$('#my_date[i]').datepicker();

आइटम के रूप में

उत्पन्न करने के लिए लगाना होगा। फिर, इस वर्गाकार कोष्ठक में, अपने काउंटर है तो अपने jQuery समारोह कुछ की तरह होगा:

<script type="text/javascript"> 
    $(function() { 
     $('#my_date1').datepicker(); 
     $('#my_date2').datepicker(); 
     $('#my_date3').datepicker(); 
     ... 
    }); 
</script>

स्रोत

2009-04-01 22:45:24 evilpenguin

के साथ दिखाई देगा या फिर आप जे एस सरल ... –

हां बनाने के लिए कक्षाओं में इस्तेमाल कर सकते हैं, जो वास्तव में स्पष्ट नहीं है जवाब देने के ... – SeanJA

यहां समाधान में से कई अलग-अलग आईडी हैं जिनके बारे में आपने कहा है। समस्या अभी भी डेटपिकर में गहरी है। कृपया मुझे सही करें, लेकिन डेटपिकर में एक रैपर आईडी नहीं है - "ui-datepicker-div।" यह थीमिंग में http://jqueryui.com/demos/datepicker/#option-showOptions पर देखा जाता है।

क्या कोई ऐसा विकल्प है जो इस आईडी को कक्षा के रूप में बदल सकता है? मैं सिर्फ एक स्पष्ट फिक्स के लिए इस स्क्रिप्ट को फोर्क नहीं करना चाहता हूं !!

स्रोत

2009-11-10 17:44:49

यह नमूना कोड का "नमूना" हिस्सा हो सकता है।मुझे नहीं लगता कि यह वास्तव में उस आईडी के साथ एक div उत्पन्न करता है। यह सुनिश्चित करना कि मेरी प्रत्येक लक्षित ऑब्जेक्ट में अद्वितीय आईडी की सभी चीजें अपेक्षित रूप से काम करती हैं। – gfrizzle

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

स्रोत

2010-01-15 16:16:32 codeguru

आईडी

<script type="text/javascript"> 
    $(function() { 
     $('.my_date1').datepicker(); 
     $('.my_date2').datepicker(); 
     $('.my_date3').datepicker(); 
     ... 
    }); 
</script>

स्रोत

2010-11-01 06:54:56 Aehandasa

यह उत्तर पहले से ही शू – Gowri

द्वारा प्रदान किया गया है और निश्चित रूप से हम वैकल्पिक दृष्टिकोण नहीं चाहते हैं ... हालांकि मैं मानता हूं कि यह काम करेगा, लेकिन मैं इसका उपयोग नहीं करूंगा। खासकर स्वीकार किए गए उत्तर को देखने के बाद - लेकिन प्रत्येक के लिए। – brichins

के वर्ग का उपयोग बदलने के लिए बजाय मैं सिर्फ एक ही समस्या थी।

दिनांक चुनने का सही तरीका $('.my_class').datepicker(); है लेकिन आपको यह सुनिश्चित करना होगा कि आप एक ही आईडी को कई डेटपिकर्स को असाइन न करें।

स्रोत

2010-12-06 21:46:10 Shuo

मुझे एक ही समस्या थी, लेकिन आखिर में पता चला कि यह एक एएसपी वेब उपयोगकर्ता नियंत्रण से स्क्रिप्ट का आविष्कार करने के तरीके के साथ एक मुद्दा था। मैं ClientScript.RegisterStartupScript() का उपयोग कर रहा था, लेकिन स्क्रिप्ट को एक अद्वितीय कुंजी (दूसरा तर्क) देने के लिए भूल गया। दोनों स्क्रिप्ट को एक ही कुंजी असाइन करने के साथ, केवल पहला बॉक्स वास्तव में डेटपिकर में परिवर्तित किया जा रहा था।इसलिए मैं कुंजी को पाठ बॉक्स के आईडी संलग्न करने के लिए यह अनूठा बनाने का फैसला किया:

Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);

स्रोत

2012-01-12 23:18:16 kad81

मैं गतिशील datepicker वर्गों को जोड़ने के साथ एक ऐसी ही समस्या थी। समाधान मैंने पाया लाइन 46 datepicker.js

// this.element.on('click', $.proxy(this.show, this));

स्रोत

2013-07-30 06:46:51 mozgras

जब क्रम उत्पन्न इनपुट बक्सें आप यदि वह पहले से datepicker तो पहले उसे हटा वर्ग hasDatepicker तो यह करने के लिए datepicker लागू होता है की जाँच करने के लिए है पर datepicker जोड़ने से बाहर टिप्पणी करने के लिए किया गया था।

function convertTxtToDate() { 
     $('.dateTxt').each(function() { 
      if ($(this).hasClass('hasDatepicker')) { 
       $(this).removeClass('hasDatepicker'); 
      } 
      $(this).datepicker(); 
     }); 
    }

स्रोत

2013-10-08 08:54:20

एक आसान समाधान है।

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

स्रोत

2014-02-19 09:34:56

सीनजेए उत्तर के लिए एक छोटा सा नोट।

दिलचस्प बात यह है कि अगर आप एक साथ भिन्न आईडी साथ निम्नलिखित आदानों , लेकिन साथ KnockoutJS और jQuery का उपयोग एक ही डेटा-बाँध नमूदार:

<data-bind="value: first_dt" id="date_1" class="datepick" /> <data-bind="value: first_dt" id="date_2" class="datepick" />

नहीं बांध जाएगा (समान) दोनों इनपुट के लिए डेटपिकर (भले ही उनके पास अलग-अलग आईडी या नाम हों)।
अपने ViewModel में
उपयोग अलग observables प्रत्येक इनपुट के लिए एक अलग datepicker बाध्य करने के लिए:

<data-bind="value: first_dt" id="date_1" class="datepick" /> <data-bind="value: second_dt" id="date_2" class="datepick" />

प्रारंभ:

$('.datepick').each(function(){ $(this).datepicker(); });

स्रोत

2014-11-23 11:06:21 user1572418

आपको नॉकआउटजेएस के साथ संयोजन में इस तरह से काम नहीं करना चाहिए। यदि आप बाध्यकारी हैंडलर का उपयोग करके अपने डेटपिकर को बांधते हैं तो यह बेहतर और क्लीनर है। – Gigi2m02

मेरे मामले में, मैं अपने <input> तत्वों नहीं दिया था किसी भी आईडी , और डेटपिकर के जवाब में डेटपिकर को लागू करने के लिए कक्षा का उपयोग कर रहा था, लेकिन डेटपिकर केवल पहले को लागू किया जा रहा था। मैंने पाया कि JQuery स्वचालित रूप से एक आईडी जोड़ रहा था और यह सभी तत्वों में वही था, जिसने समझाया कि केवल पहली बार डेटपिकर क्यों हो रहा था।

स्रोत

2015-09-07 01:23:10 jamsandwich

एकाधिक उदाहरणों के लिए jQuery डेटपिकर लागू करें

उत्तर

संबंधित मुद्दे