jQuery তারিখ পিকার অন্বেষণ ইভেন্ট ইস্যু

Question

আমার একটি জেএস কোড রয়েছে যাতে আপনি যখন কোনও ক্ষেত্র পরিবর্তন করেন এটি অনুসন্ধান রুটিনকে কল করে। সমস্যাটি হ'ল ডেটপিকার ইনপুট ক্ষেত্রটি আপডেট করার সময় আমি এমন কোনও jQuery ইভেন্টগুলিতে আগত না fire

কোনও কারণে, ডেটপিকার ফিল্ড আপডেট করার সময় কোনও পরিবর্তন ইভেন্ট ডাকা হয় না। ক্যালেন্ডার যখন পপ আপ হয় তখন এটি ফোকাস পরিবর্তন করে তাই আমি সেগুলিও ব্যবহার করতে পারি না। কোন ধারনা?

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

@ ব্যবহারকারী 0076০০৯২: আমি এই উত্তরটি পোস্ট করেছি এবং পরে চলে গেলাম, এবং আক্ষরিকভাবে যখন আমি চলে যাচ্ছিলাম তখন আমি ভেবেছিলাম "আপনি জানেন, আপনি changeহ্যান্ডলার (গুলি) চালু করতে পারেন" এবং তাই আমি উত্তরটি আপডেট করেছি। :-)

— টিজে ক্রোডার

আমি সমস্ত দৃষ্টিকোণগুলিতে এটির কাজ করার চেষ্টা করার চেষ্টা করে চেনাশোনাগুলিতে ঘুরেছি এবং এটি এটি করেছে! অনেক প্রশংসিত!

— ক্রিস নেভিল

বিশ্বে কেন তারা এই আসল ঘটনা ঘটেনি?

— জে কে

এটি "নির্বাচন" করার জন্য এবং "পরিবর্তন" এর জন্য নয়। আপনি যদি একটি তারিখ নির্বাচন করেন এবং তারপরে এটি পুনরায় নির্বাচন করেন তবে এই ইভেন্টটি বরখাস্ত হয়ে যায়। কিছু ডেভলপাররা জানতে চাইবে যে ডেটাটি "নোংরা" এবং সংরক্ষণ করার দরকার আছে কিনা তা জানতে কোনও প্রাথমিক অবস্থা থেকে কখন তারিখ পরিবর্তন হয়েছিল। এই কারণে, আমি আপনাকে এই বিবেচনা করছি।

— অ্যানড্রয়েড ডেভ

@ অ্যান্ড্রয়েডদেব: আমি তা পরিষ্কার করে দিয়েছি। ( অবশ্যই আপনার কাছে থাকতে পারে; সাইটের লক্ষ্যটি ভাল উত্তর থাকতে পারে; এটি অর্জনের জন্য সম্মানজনক সম্পাদনা উত্সাহিত করা হয়)) ডেটপিকারের ক্ষেত্রে এটি ডিজাইনের ত্রুটি, উত্তরে নয়। (এটি যা করা উচিত তা হ'ল ইনপুটটিতে কোনও ধরণের পরিবর্তনের ঘটনা ঘটানো, যদি এবং কেবল তারিখ পরিবর্তন করা হয় তবে তা হয় না))

— টিজে ক্রাউডার

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 অপরিশোধিত ফেরত দেয় এবং এটি উপলব্ধ বৈশিষ্ট্যগুলির মধ্যে একটি বলে মনে হয় না।

— বিকে

আমি একেবারেই কোনও সমস্যা ছাড়াই এটি বাস্তবায়ন করেছি। একটি যাদুমন্ত্র মত কাজ করে.

— ডেভস্ক্লিক

এটি আর কাজ করে না, শেষের আর সংজ্ঞা দেওয়া হয় না

— luke_mclachlan

@ লিউক_ম্যাক্ল্যাচলান lastValতবে ;-)

— আলেকজান্ডার

lastValকমপক্ষে আমার পরীক্ষায় ডেটপিকারের অবজেক্টটিতে উপস্থিত নেই। সুতরাং এই সমাধানটি সর্বদা পরিবর্তনটিকে ট্রিগার করবে।

— নিকোলাস

Answer 3

তারিখ -চয়নকারী অবজেক্টে অনস लेक्ट ইভেন্টটির জন্য আপনার সন্ধান :

$('.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 ডেটপিকারের ক্ষেত্রগুলির সাথে আমার সমস্যাটি এখানে পোস্ট করা পোস্টের মত একই নয়। এটি পরিবর্তন অনুষ্ঠানের একাধিকবার গুলি চালানো সম্পর্কে about আমি বেশ কয়েকটি সমাধানের চেষ্টা করেছি এবং এটিই কেবলমাত্র আমার পরিস্থিতিতে কাজ করে।

— পতে গুটি

আমি এই সমাধান হিসাবে কমবেশি একই কাজ করেছি এবং আমি মনে করি এটি অবশ্যই সবচেয়ে ভাল কাজ করে। আমি যা করেছি তার একটি পৃথক উত্তরে পোস্ট করব ...

Answer 5

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

Comments

আমি ভেবেছিলাম এটি কাজ করা উচিত, তবে দুর্ভাগ্যজনকভাবে নয়। তারিখ-চয়নকারী থেকে নির্বাচন করার সময় নয়, কীবোর্ড ব্যবহার করে ক্ষেত্রটি পরিবর্তিত হলেই এটি ট্রিগার করা হয় । বিরক্তিকর।

— সাইমন পূর্ব

জিকুয়েরি ইউআই ডক্স থেকে: "এই উইজেটটি তার উপাদানটির মান প্রোগ্রামগতভাবে পরিচালনা করে, সুতরাং উপাদানটির মান পরিবর্তিত হলে কোনও নেটিভ চেঞ্জ ইভেন্টটি বরখাস্ত করা যায় না।"

— স্যাম কাউফম্যান

মজার বিষয় হ'ল আমি তার বিপরীতে পাচ্ছি - যখন আমি কীবোর্ডের মাধ্যমে হাত দিয়ে ইনপুট পরিবর্তন করি তখন কোনও ইভেন্টই ট্রিগার হয় না। তবে আমি যখন উইজেটের মাধ্যমে ক্ষেত্রের মান পরিবর্তন করি, পরিবর্তন ইভেন্টটি বরখাস্ত হয়। অস্বাভাবিক.

— রেনান

আমি কীবোর্ড দিয়ে পরিবর্তন করি এবং তারিখ পিকারের উইজেটটি পরিবর্তন করিলে এটি কার্যকর হয় fine

— স্যামি

একরকম এটি একাধিকবার কল করে।

— এনমাথুর

Answer 6

আমি বুটস্ট্র্যাপ-ডেটপিকার ব্যবহার করছি এবং উপরের সমাধানগুলির কোনওটিই আমার পক্ষে কার্যকর হয়নি। এই উত্তরটি আমাকে সাহায্য করেছে ..

বুটস্ট্র্যাপ ডেটপিকারের পরিবর্তনের তারিখ ইভেন্ট ম্যানুয়ালি তারিখ সম্পাদনা বা তারিখ সাফ করার সময় আগুন জ্বলে না

আমি প্রয়োগ করেছি তা এখানে:

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

আশা করি এটি অন্যকে সহায়তা করতে পারে।

Answer 7

JQueryUi 1.9 এ আমি এটি অতিরিক্ত ডেটা মান এবং পূর্ববর্তী শো এবং অন-নির্বাচন ফাংশনগুলির সংমিশ্রণের মাধ্যমে এটিকে কাজ করতে সক্ষম করেছিলাম:

$( ".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

আমি জানি এটি একটি পুরানো প্রশ্ন। তবে আমি jquery get (এটি)। পরিবর্তন () ইভেন্টটি সঠিকভাবে গুলি চালাতে চাইলে না নির্বাচন করতে পারি। সুতরাং আমি ভ্যানিলা জেএস এর মাধ্যমে পরিবর্তন ইভেন্টটি ফায়ার করতে নিম্নলিখিত পদ্ধতির সাথে গিয়েছিলাম।

$('.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

এই স্নিপেটের জন্য ত্রুটি "'$' অপরিজ্ঞাত"। আহ ওহ.

— মাইকেল 12345

আপনি অনসিলিট ইভেন্টে একটি পরিবর্তন ইভেন্ট প্রেরণ করছেন যা কোনও পছন্দসই প্রভাব নয়, কারণ নির্বাচনের সময় প্রতিটি তারিখ ক্লিক করলেই তা প্রকাশিত হবে তবে এর অর্থ এই নয় যে তারিখটি আসলে পরিবর্তিত হয়েছিল অর্থাৎ ব্যবহারকারী একই তারিখে ক্লিক করেছেন দুইবার।

— জ্যাকস 12

@ জ্যাকস আপনি নিখুঁত আমি বিশ্বাস করি আপনি স্ট্রিংয়ের তারিখ পাঠ্যকে এটির সাথে মূল্যায়ন করতে পারেন could মানটি কেবল আলাদা করুন যদি তারা আলাদা হয়।

— tstrand66

@ মাইকেল 12345 আমি আপনাকে বোঝাতে চাইছি। আমি এটি পরিবর্তন করেছি যাতে এটি আর একটি স্নিপেট না থাকে। আমার ক্ষমা

— 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

তারিখপিকারটি নীচে নীচে মান পরিবর্তনের ইভেন্ট কোডটি নির্বাচিত করেছেন

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

আপনি যদি ডাব্লুডিসিএলডিয়ার ব্যবহার করেন তবে এটি আপনাকে সাহায্য করবে

 $("#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

আমি মনে করি আপনার ডেটপিকারটি কীভাবে সেটআপ হয় তাতে আপনার সমস্যা থাকতে পারে। আপনি কেন ইনপুট সংযোগ বিচ্ছিন্ন করবেন না ... ওয়েলফিল্ড ব্যবহার করবেন না। পরিবর্তে স্পষ্টভাবে মানগুলি সেট করুন যখন অনসलेक्ट নির্বাচন হয়। এটি আপনাকে প্রতিটি মিথস্ক্রিয়া নিয়ন্ত্রণ করবে; ব্যবহারকারীর পাঠ্য ক্ষেত্র এবং তারিখ চয়নকারী।

দ্রষ্টব্য: কখনও কখনও আপনাকে। পরিবর্তন () এবং না .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
    });
});