jQuery के डेटपिकर घटना मुद्दे पर परिवर्तन

Question

मेरे पास एक जेएस कोड है जिसमें जब आप किसी क्षेत्र को बदलते हैं तो उसे खोज रूटीन कहते हैं। समस्या यह है कि मुझे कोई jQuery ईवेंट नहीं मिल सकता है, जब Datepicker इनपुट फ़ील्ड को अपडेट करता है।

किसी कारण से, एक परिवर्तन ईवेंट तब नहीं कहा जाता है जब Datepicker फ़ील्ड को अपडेट करता है। जब कैलेंडर पॉप अप हो जाता है तो फोकस बदल जाता है इसलिए मैं उसका उपयोग नहीं कर सकता। कोई विचार?

Comments

मैंने stackoverflow.com/a/30132949/293792 का उपयोग करके समाप्त किया क्योंकि यह सीधे सवाल का जवाब देने के लिए दिखाई दिया

— twobob

Answer 1

आप दिनांक की onSelectघटना का उपयोग कर सकते हैं ।

$(".date").datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
    }
});

लाइव उदाहरण :

$(".date")
.datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
    }
})
.on("change", function() {
    console.log("Got change event from field");
});

<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

दुर्भाग्य से, onSelectजब भी कोई तिथि चुनी जाती है, तब भी आग लग जाती है, भले ही वह परिवर्तित न हुई हो। यह डेटपिकर में एक डिजाइन दोष है: यह हमेशा आग onSelect(भले ही कुछ भी नहीं बदला), और परिवर्तन के लिए अंतर्निहित इनपुट पर किसी भी घटना को आग नहीं देता है । (यदि आप उस उदाहरण के कोड को देखते हैं, तो हम बदलावों के बारे में सुन रहे हैं, लेकिन उन्हें उठाया नहीं जा रहा है।) यह संभवत: इनपुट पर एक घटना को आग देना चाहिए जब चीजें बदलती हैं (संभवतः सामान्य changeघटना, या संभवतः एक डेटपिकर- विशिष्ट एक)।

---

यदि आप पसंद करते हैं, तो निश्चित रूप से, आप आग changeपर घटना कर सकते हैं input:

$(".date").datepicker({
    onSelect: function() {
        $(this).change();
    }
});

यह jQuery के माध्यम से झुका किसी भी हैंडलर के लिए changeअंतर्निहित पर आग लग जाएगी input। लेकिन फिर, यह हमेशा यह आग। यदि आप केवल वास्तविक परिवर्तन पर आग लगाना चाहते हैं, तो आपको पिछले मूल्य (संभवतः के माध्यम से data) को बचाने और तुलना करना होगा।

लाइव उदाहरण :

$(".date")
.datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
        $(this).change();
    }
})
.on("change", function() {
    console.log("Got change event from field");
});

<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Comments

@ user760092: मैंने यह उत्तर पोस्ट किया और फिर बाहर चला गया, और जैसा कि मैंने सोचा था कि मैं जा रहा था "आप जानते हैं, आप changeहैंडलर (एस) को ट्रिगर कर सकते हैं " और इसलिए मैंने उस के साथ उत्तर को अपडेट किया है। :-)

— टीजे क्राउडर

मैं सभी परिदृश्यों में काम करने के लिए इसे प्राप्त करने की कोशिश कर रहा हूं और इसे हलकों में गोल-गोल कर चुका हूं और इसने ऐसा किया है! बहुत सराहना की!

— क्रिस नेविल

दुनिया में उन्होंने उन वास्तविक घटनाओं को क्यों नहीं बनाया?

— जे के

यह "चयन" के लिए है और "परिवर्तन" के लिए नहीं। यदि आप एक तारीख का चयन करते हैं और फिर उसे फिर से चुनते हैं, तो यह घटना निकाल दी जाती है। कुछ डेवलपर्स यह जानना चाहते हैं कि डेटा को "गंदा" करने के लिए किसी प्रारंभिक अवस्था से तारीख बदल गई है या नहीं और इसे सहेजने की आवश्यकता है। इस कारण से, मैं आपको इस पर नीचा दिखा रहा हूं।

— AndroidDev

@AndroidDev: मैंने स्पष्ट किया है कि। ( आप , निश्चित रूप से, साइट का लक्ष्य अच्छा जवाब हो सकता है ; जो हासिल करने के लिए सम्मानजनक संपादन है, वह प्रोत्साहित किया गया है।) यह उत्तर में नहीं, डेटपिकर में एक डिजाइन दोष है। (यह क्या करना चाहिए , इनपुट पर किसी प्रकार की परिवर्तन घटना है, अगर और केवल अगर तारीख बदल रही है, लेकिन यह नहीं है।)

— टीजे क्राउडर

Answer 2

टीजे क्राउडर का जवाब ( https://stackoverflow.com/a/6471992/481154 ) बहुत अच्छा है और अभी भी सटीक है। ऑनसेट फ़ंक्शन के भीतर परिवर्तन ईवेंट को ट्रिगर करना उतना ही निकट है जितना आप प्राप्त करने जा रहे हैं।

हालाँकि, डेटपिकर ऑब्जेक्ट ( lastVal) पर एक अच्छी प्रॉपर्टी है जो आपको वास्तविक बदलावों को केवल मूल्य (ओं) को स्टोर किए बिना ही सशर्त रूप से परिवर्तन की घटना को ट्रिगर करने की अनुमति देगा :

$('#dateInput').datepicker({
     onSelect: function(d,i){
          if(d !== i.lastVal){
              $(this).change();
          }
     }
});

फिर सामान्य की तरह परिवर्तन की घटनाओं को संभालें:

$('#dateInput').change(function(){
     //Change code!
});

Comments

क्या किसी ने हाल ही में इसका परीक्षण किया है? यह मेरे लिए काम नहीं करता है। i.lastVal अपरिभाषित रिटर्न देता है और यह उपलब्ध गुणों में से एक प्रतीत नहीं होता है।

— बीके

मैंने अभी इसे बिना किसी मुद्दे के लागू किया है। एक जादू की तरह काम करता है।

— DevSlick

यह अब काम नहीं करता है, अंतिम समय अब ​​परिभाषित नहीं है

— luke_mclachlan

@luke_mclachlan lastVal; ;-) है

— अलेक्जेंडर डर्क

lastValडेटपीकर ऑब्जेक्ट पर मौजूद नहीं है, कम से कम मेरे परीक्षण में। तो यह समाधान हमेशा परिवर्तन को ट्रिगर करेगा।

— निकोलस

Answer 3

डेटपिकर ऑब्जेक्ट में onSelect ईवेंट की आपकी तलाश :

$('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
});

Answer 4

मैंने इसे लिखा था क्योंकि मुझे एक घटना को ट्रिगर करने के लिए एक समाधान की आवश्यकता थी, अगर तारीख बदल गई।

यह एक सरल उपाय है। हर बार संवाद बॉक्स बंद होने पर हम यह देखने के लिए परीक्षण करते हैं कि क्या डेटा बदल गया है। यदि यह है, तो हम एक कस्टम इवेंट ट्रिगर करते हैं और संग्रहीत मान रीसेट करते हैं।

$('.datetime').datepicker({
    onClose: function(dateText,datePickerInstance) {
        var oldValue = $(this).data('oldValue') || "";
        if (dateText !== oldValue) {
            $(this).data('oldValue',dateText);
            $(this).trigger('dateupdated');
        }
    }
});

अब हम उस कस्टम इवेंट के लिए हैंडलर को हुक कर सकते हैं ...

$('body').on('dateupdated','.datetime', function(e) {
    // do something
});

Comments

मैं इसे नॉकआउट के साथ उपयोग कर रहा हूं, मैं इसे एक इवेंट को ट्रिगर करने के लिए नहीं प्राप्त कर सका जब उपयोगकर्ता ने हटा दिया या मैन्युअल रूप से तारीख को पिकर पर चयन किए बिना बदल दिया। बहुत मददगार।

— टोनी

JQuery के खजूर के खेतों के साथ मेरा मुद्दा बिल्कुल वैसा नहीं है, जैसा यहां पोस्ट किया गया है। यह कई बार परिवर्तन ईवेंट फायरिंग के बारे में है। मैंने कई समाधानों की कोशिश की और यह एकमात्र ऐसा है जो वास्तव में मेरी स्थिति में काम करता है।

— पाटे गुटी

मैंने इस समाधान को कमोबेश वैसा ही किया और मुझे लगता है कि यह निश्चित रूप से सबसे अच्छा काम करता है। मैं पोस्ट करूँगा कि मैंने एक अलग उत्तर में क्या किया ...

Answer 5

$('#inputfield').change(function() { 
    dosomething();
});

Comments

मैंने सोचा कि यह काम करना चाहिए, लेकिन दुर्भाग्य से नहीं। यह केवल तभी चालू हो जाता है जब फ़ील्ड कीबोर्ड का उपयोग करके बदल दिया जाता है , न कि तिथि-चयनकर्ता से चयन करते समय। कष्टप्रद।

— साइमन ईस्ट

JQuery के UI डॉक्स से: "यह विजेट प्रोग्रामेटिक रूप से अपने एलिमेंट की वैल्यू को मेनिपुलेट करता है, इसलिए हो सकता है कि एलिमेंट चेंज इवेंट को एलीमेन्ट नहीं किया जाए जब एलिमेंट की वैल्यू बदल जाए।"

— सैम कॉफ़मैन

मजेदार बात यह है कि मैं इसके विपरीत हो रहा हूं - जब मैं कीबोर्ड के माध्यम से हाथ से इनपुट बदलता हूं, तो कोई भी घटना ट्रिगर नहीं होती है। लेकिन जब मैं विजेट के माध्यम से फ़ील्ड का मान बदलता हूं, तो परिवर्तन ईवेंट निकाल दिया जाता है। अजीब।

— रेनान

जब मैं कीबोर्ड से बदलता हूं और जब मैं दिनांक पिकर विजेट के साथ बदलता हूं तो यह ठीक काम करता है।

— Sammie

किसी तरह यह कई बार कॉल करता है।

— NMathur

Answer 6

मैं बूटस्ट्रैप-डेटापिक का उपयोग कर रहा हूं और उपरोक्त किसी भी समाधान ने मेरे लिए काम नहीं किया। इस जवाब ने मेरी मदद की ..

बूटस्ट्रैप डेटपिकर परिवर्तन दिनांक ईवेंट मैन्युअल रूप से दिनांक या क्लियरिंग दिनांक संपादित करते समय आग नहीं लगाता है

यहाँ मैंने क्या लागू किया है:

 $('.date-picker').datepicker({
     endDate: new Date(),
     autoclose: true,
 }).on('changeDate', function(ev){
        //my work here
    });

आशा है कि यह दूसरों की मदद कर सकता है।

Answer 7

JQueryUi 1.9 पर मैं इसे अतिरिक्त डेटा मान और पहले के संयोजन और onSelect के संयोजन के माध्यम से काम करने में कामयाब रहा हूं:

$( ".datepicker" ).datepicker({
    beforeShow: function( el ){
        // set the current value before showing the widget
        $(this).data('previous', $(el).val() );
    },

    onSelect: function( newText ){
        // compare the new value to the previous one
        if( $(this).data('previous') != newText ){
            // do whatever has to be done, e.g. log it to console
            console.log( 'changed to: ' + newText );
        }
    }
});

मेरे लिये कार्य करता है :)

Answer 8

मैं जानता हूं कि यह एक पुराना सवाल है। लेकिन मैं सही ढंग से onSelect में आग लगाने के लिए jquery $ (यह) .change () घटना प्राप्त नहीं कर सका। इसलिए मैं निम्नलिखित दृष्टिकोण के साथ वेनिला जे एस के माध्यम से परिवर्तन की घटना को देखने के लिए गया।

$('.date').datepicker({
     showOn: 'focus',
     dateFormat: 'mm-dd-yy',
     changeMonth: true,
     changeYear: true,
     onSelect: function() {
         var event;
         if(typeof window.Event == "function"){
             event = new Event('change');
             this.dispatchEvent(event);
         }   else {
             event = document.createEvent('HTMLEvents');
             event.initEvent('change', false, false);
             this.dispatchEvent(event);
         }
     }
});

Comments

इस स्निपेट के लिए त्रुटि "'$' अपरिभाषित है।" उह ओह।

— Michael12345

आप onSelect ईवेंट में एक परिवर्तन ईवेंट भेज रहे हैं, जो कि वांछित प्रभाव नहीं है क्योंकि चयन पर क्लिक करने के बाद हर बार आग लग जाएगी, लेकिन इसका मतलब यह नहीं है कि तारीख वास्तव में बदल गई थी अर्थात उपयोगकर्ता ने उसी तारीख को क्लिक किया होगा दो बार।

— जैक्स

@ आप सही हैं। मेरा मानना ​​है कि आप स्ट्रिंग dateText की तुलना इस से कर सकते हैं। केवल यह अलग है और अगर यह अलग है तो आग लगा दें।

— tstrand66

@ Michael12345 मैं देख रहा हूं कि आपका क्या मतलब है। मैंने इसे संशोधित किया है ताकि अब यह एक स्निपेट न बने। मैं क्षमाप्रार्थी हूं।

— tstrand66

Answer 9

इसे इस्तेमाल करे

$('#dateInput').datepicker({
 onSelect: function(){
       $(this).trigger('change');
      }
 }});

उम्मीद है की यह मदद करेगा:)

Answer 10

प्रयत्न :

$('#idPicker').on('changeDate', function() {
    var date = $('#idPicker').datepicker('getFormattedDate');
});

Answer 11

मैनुअल कहता है:

apply.daterangepicker: Triggered when the apply button is clicked, or when a predefined range is clicked

इसलिए:

$('#daterange').daterangepicker({
  locale: { cancelLabel: 'Clear' }  
});

$('#daterange').on('apply.daterangepicker', function() {
  alert('worked!');
});

मेरे लिये कार्य करता है।

Answer 12

मेरा विलोचन:

var $dateInput = $('#dateInput');

$dateInput.datepicker({
    onSelect: function(f,d,i){
        if(d !== i.lastVal){
            $dateInput.trigger("change");
        }
    }
}).data('datepicker');

$dateInput.on("change", function () {
   //your code
});

Answer 13

मेरा समाधान है:

events: {
    'apply.daterangepicker #selector': 'function'
}

Answer 14

DatePicker नीचे दिए गए मान परिवर्तन इवेंट कोड का चयन करता है

/* HTML Part */
<p>Date: <input type="text" id="datepicker"></p>

/* jQuery Part */
$("#datepicker").change(function() {
                selectedDate= $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
                alert(selectedDate);        
            });

Answer 15

अगर आप wdcalendar का उपयोग कर रहे हैं तो यह आपकी मदद करने वाला है

 $("#PatientBirthday").datepicker({ 
        picker: "<button class='calpick'></button>",
        onReturn:function(d){
          var today = new Date();
          var birthDate = d;
          var age = today.getFullYear() - birthDate.getFullYear();
          var m = today.getMonth() - birthDate.getMonth();
          if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
            age--;
          }

          $('#ageshow')[0].innerHTML="Age: "+age;
          $("#PatientBirthday").val((d.getMonth() + 1) + '/' + d.getDate() + '/' +  d.getFullYear());
        }
      }); 

घटना onReturn मेरे लिए काम करता है

उममीद है कि इससे मदद मिलेगी

Answer 16

मुझे लगता है कि आपकी समस्या इस तरह से हो सकती है कि आपकी तारीख कैसे तय हो। आप इनपुट को डिस्कनेक्ट क्यों नहीं करते हैं ... altField का उपयोग न करें। इसके बजाय स्पष्ट रूप से मान सेट करें जब onSelect आग। यह आपको प्रत्येक बातचीत का नियंत्रण देगा; उपयोगकर्ता पाठ क्षेत्र, और तारीख।

नोट: कभी-कभी आपको रूट पर .change () और नहीं .onSelect () कॉल करना पड़ता है क्योंकि onSelect को विभिन्न इंटरैक्शन पर कॉल किया जा सकता है जिसकी आपको उम्मीद नहीं है।

छद्म कोड:

$('#date').datepicker({
    //altField: , //do not use
    onSelect: function(date){
        $('#date').val(date); //Set my textbox value
        //Do your search routine
    },
}).change(function(){
    //Or do it here...
});

$('#date').change(function(){
    var thisDate = $(this).val();
    if(isValidDate(thisDate)){
        $('#date').datepicker('setDate', thisDate); //Set my datepicker value
        //Do your search routine
    });
});