jQuery UI ডেট পিকার পরিবর্তন ইভেন্টটি নকআউটজেএস দ্বারা ধরা পড়ে না

Question

আমি jQuery UI সহ নকআউটজেএস ব্যবহার করার চেষ্টা করছি। আমার একটি ইনপুট উপাদান রয়েছে যার সাথে ডেটপিকার যুক্ত থাকে। আমি বর্তমানে দৌড়াচ্ছি knockout.debug.1.2.1.jsএবং মনে হচ্ছে পরিবর্তনের ঘটনাটি নক আউটের হাতে ধরা পড়েনি। উপাদানটি দেখতে এরকম দেখাচ্ছে:

<input type="text" class="date" data-bind="value: RedemptionExpiration"/>

এমনকি আমি valueUpdateইভেন্টের ধরণের পরিবর্তন করার চেষ্টা করেছি কিন্তু কোনও ফলসই হয়নি। দেখে মনে হচ্ছে ক্রোমের focusমান পরিবর্তন করার ঠিক আগে কোনও ইভেন্ট ঘটায় , তবে আইআই তা করেন না।

এমন কোনও নকআউট পদ্ধতি আছে যা "সমস্ত বাঁধাই পুনরায় প্রত্যাবর্তন করে"? সার্ভারে ফেরত পাঠানোর আগে আমার প্রযুক্তিগতভাবে কেবল মানটির পরিবর্তন প্রয়োজন। তাই আমি এই ধরণের কাজের সাথে বেঁচে থাকতে পারি।

আমি মনে করি সমস্যাটি ডেটপিকারের ত্রুটি, তবে কীভাবে এটি ঠিক করা যায় তা আমি বুঝতে পারি না।

কোন ধারনা?

Answer 1

আমি মনে করি যে jQuery UI তারিখ-পিকারের জন্য এটি একটি পছন্দসই বাঁধাই ব্যবহার করা পছন্দনীয় যা ডেটপিকারের সরবরাহিত এপিআই ব্যবহার করে তারিখের বিষয়গুলি সহ / পড়বে।

বাঁধাইয়ের মতো দেখতে পাওয়া যাবে (আমার উত্তরটি এখানে ):

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {},
            $el = $(element);

        $el.datepicker(options);

        //handle the field changing by registering datepicker's changeDate event
        ko.utils.registerEventHandler(element, "changeDate", function () {
            var observable = valueAccessor();
            observable($el.datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $el.datepicker("destroy");
        });

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element);

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        var current = $el.datepicker("getDate");

        if (value - current !== 0) {
            $el.datepicker("setDate", value);
        }
    }
};

আপনি এটি ব্যবহার করুন:

<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" />

এখানে জেফিডালে নমুনা: http://jsfiddle.net/rniemeyer/NAgNV/

Comments

আমি যা পছন্দ করি তা হ'ল আপনি এই বাইন্ডারের কোণগুলি কাটেন নি, যেমন নিষ্পত্তি কলব্যাকের মতো। নকআউটজেএস মাস্টার্সের পথে অনুসরণ করার একটি দুর্দান্ত উদাহরণ!

— ডেভ

এবং ডেটপিকারটি কী এমন একটি উপাদানকে আবদ্ধ করে যা ডায়নামিকভাবে তৈরি করা হয় ... মানে, লাইভ হ্যান্ডলারের সাথে ডেটপিকার।

— ফিনিক্স_উই

ফিনিক্স_ই: ডেটপিকারটি গতিশীলভাবে তৈরি বস্তুর সাথে কাজ করার জন্য, আইডি বা ইনপুটটির নাম সেট না করে নিশ্চিত হন be

— জেমস রেটেগুয়ে

আমি এটি ব্যবহার করছি এবং এটি একটি ছোট জিনিস ব্যতীত নিখুঁতভাবে কাজ করছে - যদি আমি পর্যবেক্ষণযোগ্যের সমান মিনিটেট বা ম্যাক্সেট তারিখটি সেট করি তবে এটি পর্যবেক্ষণযোগ্য পরিবর্তন করা থাকলে তা আপডেট হয় না (উদাহরণস্বরূপ, আমার কাছে দুটি ডেটপিকার রয়েছে যেখানে সর্বোচ্চের তারিখ প্রথমটি দ্বিতীয়টির মান, আমি যদি দ্বিতীয়টি আপডেট করি তবে এটি প্রথমটির সর্বাধিক তারিখ আপডেট করে না) stackoverflow.com/questions/14732204/…

— পিডাব্লু কাদ

দেখে মনে হচ্ছে ইভেন্টের নামটি ভুল, ko.utils.registerEventHandler (উপাদান, "চেঞ্জডেট", ফাংশন () - হওয়া উচিত ko.utils.registerEventHandler (উপাদান, "পরিবর্তন", ফাংশন ()

— অ্যাডাম বিলিনস্কি

Answer 2

এখানে আরপি নিমিরের উত্তরের একটি সংস্করণ যা এখানে পাওয়া নকআউট বৈধতা স্ক্রিপ্টগুলির সাথে কাজ করবে: http://github.com/ericmbarnard/Knockout- Vmittedation

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).val());
            if (observable.isValid()) {
                observable($(element).datepicker("getDate"));

                $(element).blur();
            }
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datepicker("destroy");
        });

        ko.bindingHandlers.validationCore.init(element, valueAccessor, allBindingsAccessor);

    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        current = $(element).datepicker("getDate");

        if (value - current !== 0) {
            $(element).datepicker("setDate", value);
        }
    }
};

পরিবর্তনগুলি হ'ল পরিবর্তনের ইভেন্ট হ্যান্ডলারকে প্রবেশমূল্যটি পাস করার জন্য হয় এবং বৈধতা স্ক্রিপ্টগুলিতে প্রথমে তারিখ নয়, তবে যদি বৈধ হয় তবে কেবলমাত্র পর্যবেক্ষণে তারিখ নির্ধারণ করুন। আমি এখানে আলোচিত কাস্টম বাইন্ডিংগুলির জন্য প্রয়োজনীয় যাচাইকরণ কোড.ইনাইটটিও যুক্ত করেছি:

http://github.com/ericmbarnard/Knockout-Validation/issues/69

কিছু উপায়ের দিকে ঝুঁকির সাথে ডেটপিকারের দৃশ্যধারণের পরিস্থিতি দূর করার জন্য আমি পরিবর্তনের বিষয়ে অস্পষ্টতার জন্য আরপেনরোজের পরামর্শও যুক্ত করেছি।

Comments

আমার জন্য কাজ করছে বলে মনে হচ্ছে না, আমি টাইপ এরির পেয়েছি: পর্যবেক্ষণযোগ্য.আইস মোডাইফাইড নকআউট.অলয়েডেশন.জেএস এর 313 লাইনে কোনও ফাংশন নয়। ছোট উদাহরণ এখানে: frikod.se/~capitol/fel/test.html

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

বৈধতা পাঠাগারটির সাথে এটির কাজ করার জন্য গুরুত্বপূর্ণ লাইনটি হ'ল: ko.b ਬਾਈিংহ্যান্ডার্স.অলুয়েডেশনকোর.ইন.ইইটিটি (উপাদান, মানআ্যাকসেসর, অলবাইন্ডিংস অ্যাকসেসর);

— ক্রিস

Answer 3

আমি একটি ভিন্ন পদ্ধতির ব্যবহার করেছি। নকআউট.জেএস যেহেতু পরিবর্তনের ফলে ইভেন্টটিকে আগুন ধরিয়ে দেবে বলে মনে হচ্ছে না, তাই ডেটপিককে একবার তার ইনপুটটির জন্য পরিবর্তন () পরিবর্তন করতে বাধ্য করেছিলাম।

$(".date").datepicker({
    onClose: function() {
        $(this).change(); // Forces re-validation
    }
});

Comments

'('। ডেটপিকার ')। তারিখপিকার ({onSelect: ফাংশন (তারিখ পাঠ)) {$ ("# তারিখ_ইন")

— এলসাদেক

Answer 4

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

ko.bindingHandlers.datepicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            //initialize datepicker with some optional options
            var options = allBindingsAccessor().datepickerOptions || {};

            var funcOnSelectdate = function () {
                var observable = valueAccessor();
                observable($(element).datepicker("getDate"));
            }

            options.onSelect = funcOnSelectdate;

            $(element).datepicker(options);

            //handle the field changing
            ko.utils.registerEventHandler(element, "change", funcOnSelectdate);

            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).datepicker("destroy");
            });

        },
        update: function (element, valueAccessor) {

            var value = ko.utils.unwrapObservable(valueAccessor());
            if (typeof(value) === "string") { // JSON string from server
                value = value.split("T")[0]; // Removes time
            }

            var current = $(element).datepicker("getDate");

            if (value - current !== 0) {
                var parsedDate = $.datepicker.parseDate('yy-mm-dd', value);
                $(element).datepicker("setDate", parsedDate);
            }
        }
    };

আমি পর্যবেক্ষণযোগ্য ($ (উপাদান) .ডেটপিকার ("getDate")) লাগানোর সন্দেহ করি; নিজস্ব ফাংশনে বিবৃতি দেওয়া এবং বিকল্পগুলির সাথে নিবন্ধন করা? কৌশলটি নির্বাচন করুন নির্বাচন করুন?

Comments

অসংখ্য ধন্যবাদ! আমি প্রতিটি উদাহরণ চেষ্টা করেছিলাম এবং তারপরে পৃষ্ঠার নীচে এটি খুঁজে পেয়েছি এবং এটি শেষ পর্যন্ত কাজ করে। আমার কেবলমাত্র একটি ছোট টুইট আছে যাতে সীমাবদ্ধ মানটি যে "সার্ভার বান্ধব" বিন্যাসে নেমে আসে সেই একই স্থানে থাকে your , $ (উপাদান)। তারিখপিকার ('getDate')));

— নিষ্ঠুরদেব

আমি মনে করি আপনি যদি onSelectফাংশনটি ওভাররাইড করেন তবে এটি changeইভেন্টটি উত্থাপন করবে না ...

— নিকল

Answer 5

এই নিবন্ধটির জন্য ধন্যবাদ আমি এটি খুব দরকারী বলে মনে করি।

আপনি যদি ডেটপিকারটি জিকুয়ারি ইউআই ডিফল্ট আচরণের মতো ঠিক আচরণ করতে চান তবে আমি পরিবর্তন ইভেন্ট হ্যান্ডলারের উপাদানটিতে একটি ঝাপসা যুক্ত করার পরামর্শ দিই:

অর্থাত

    //handle the field changing
    ko.utils.registerEventHandler(element, "change", function () {
        var observable = valueAccessor();
        observable($(element).datepicker("getDate"));

        $(element).blur();

    });

Comments

এই উত্তর সম্পূর্ণ দেখাচ্ছে না? এটি কি আরপিএনমিয়ারের উত্তর, বা অন্য কারও মন্তব্য?

— rjmunro

Answer 6

আমি আমার অন্তর্ভুক্ত স্ক্রিপ্ট ফাইলগুলির ক্রম পরিবর্তন করে এই সমস্যার সমাধান করেছি:

<script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.custom.js")"></script>
<script src="@Url.Content("~/Scripts/knockout-2.2.1.js")"></script>

Comments

ডেটপিকারের কাছ থেকে ইনপুটটি সঠিকভাবে নির্বাচিত তারিখটি উপস্থাপন করা সত্ত্বেও মডেলটির সাথে আপডেট হওয়ার অনুরূপ সমস্যা ছিল। পরামর্শের তালিকাটি শুরু করে দিয়েছিল .. তবে .. এটি অবশ্যই আমার সমস্যা ছিল। হুমম .. আমার এমভিসি প্রকল্পটিতে দীর্ঘ সময়ের জন্য জ্যাকোয়ারি এবং জ্যাকুরি ইউআই স্ক্রিপ্টগুলির আগে KO স্ক্রিপ্ট রয়েছে - পুরোপুরি পরীক্ষা করতে হবে।

— bkwdesign

Answer 7

আরপি নিমিয়ার হিসাবে একই, তবে ডাব্লুসিএফ ডেটটাইম, টাইমজোনস এবং ডেটপিকার ব্যবহার করে সিলেক্ট জিকুয়েরি প্রোপার্টি আরও ভাল সমর্থন।

        ko.bindingHandlers.datepicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            //initialize datepicker with some optional options
            var options = allBindingsAccessor().datepickerOptions || {};

            var funcOnSelectdate = function () {
                var observable = valueAccessor();
                var d = $(element).datepicker("getDate");
                var timeInTicks = d.getTime() + (-1 * (d.getTimezoneOffset() * 60 * 1000));

                observable("/Date(" + timeInTicks + ")/");
            }
            options.onSelect = funcOnSelectdate;

            $(element).datepicker(options);

            //handle the field changing
            ko.utils.registerEventHandler(element, "change", funcOnSelectdate);

            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).datepicker("destroy");
            });

        },
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());

            //handle date data coming via json from Microsoft
            if (String(value).indexOf('/Date(') == 0) {
                value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
            }

            current = $(element).datepicker("getDate");

            if (value - current !== 0) {
                $(element).datepicker("setDate", value);
            }
        }
    };

উপভোগ করুন :)

http://jsfiddle.net/yechezkelbr/nUdYH/

Answer 8

আমি মনে করি এটি আরও সহজভাবে করা যায়: <input data-bind="value: myDate, datepicker: myDate, datepickerOptions: {}" />

সুতরাং আপনার ডিএন ফাংশনে ম্যানুয়াল পরিবর্তন হ্যান্ডলিংয়ের দরকার নেই।

তবে এক্ষেত্রে আপনার 'মাইডেট' ভেরিয়েবলটি কেবল দৃশ্যমান মান পাবে, তারিখ অবজেক্ট নয়।

Answer 9

বিকল্পভাবে, আপনি এটি বাধ্যতামূলকভাবে নির্দিষ্ট করতে পারেন:

হালনাগাদ:

 function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor()),
        current = $(element).datepicker("getDate");

    if (typeof value === "string") {            
       var dateValue = new Date(value);
       if (dateValue - current !== 0)
           $(element).datepicker("setDate", dateValue);
    }               
}

Comments

প্রত্যাবর্তিত তারিখের মান স্ট্রিং ফর্ম্যাটে থাকে যখন এটি একটি সমস্যার সমাধান করে। "2013-01-20T05: 00: 00" তারিখের অবজেক্টের পরিবর্তে। ওয়েব এপিআই থেকে ডেটা লোড করার সময় আমি এতে ছুটে এসেছি।

— জেমস রেটেগই

Answer 10

রায়ানের সমাধানের ভিত্তিতে, মাইডেট স্ট্যান্ডার্ড তারিখের স্ট্রিং দেয়, যা আমার ক্ষেত্রে আদর্শ নয়। আমি মানটি বিশ্লেষণের জন্য ডেট.জেএস ব্যবহার করেছি যাতে এটি সর্বদা আপনার চান তারিখের ফর্ম্যাটটি ফিরিয়ে দেয়। এই উদাহরণটি দেখুন ফ্রিডাল উদাহরণ ।

update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor()),
        current = $(element).datepicker("getDate");
    var d = Date.parse(value);
    if (value - current !== 0) {
        $(element).datepicker("setDate", d.toString("MM/dd/yyyy"));   
    }
}

Answer 11

আমার বারবার সার্ভার থেকে আমার ডেটা আপডেট করার দরকার পড়েছিল তবে নীচে আমার প্রয়োজনগুলি ভাগ করার জন্য কাজটি পুরোপুরি শেষ করতে পারেনি (আমার তারিখের ফর্ম্যাট / তারিখ (1224043200000) /):

//Object Model
function Document(data) {
        if (String(data.RedemptionExpiration).indexOf('/Date(') == 0) {
            var newDate = new Date(parseInt(data.BDate.replace(/\/Date\((.*?)\)\//gi, "$1")));
            data.RedemptionExpiration = (newDate.getMonth()+1) +
                "/" + newDate.getDate() +
                "/" + newDate.getFullYear();
        }
        this.RedemptionExpiration = ko.observable(data.RedemptionExpiration);
}
//View Model
function DocumentViewModel(){
    ///additional code removed
    self.afterRenderLogic = function (elements) {
        $("#documentsContainer .datepicker").each(function () {
            $(this).datepicker();                   
        });
    };
}

আউটপুটটির জন্য মডেলটি সঠিকভাবে ফর্ম্যাট হওয়ার পরে আমি ডকুমেন্টেশন নকআউটজগুলির সাথে একটি টেম্পলেট যুক্ত করেছি :

<div id="documentsContainer">
    <div data-bind="template: { name: 'document-template', foreach: documents, afterRender: afterRenderLogic }, visible: documents().length > 0"></div>
</div>

//Inline template
<script type="text/html" id="document-template">
  <input data-bind="value: RedemptionExpiration" class="datepicker" />
</script>

Answer 12

খুব কম লোক গতিশীল ডেটপিকারের বিকল্পগুলির জন্য জিজ্ঞাসা করেছিল। আমার ক্ষেত্রে আমার একটি গতিশীল তারিখের পরিসর দরকার - সুতরাং প্রথম ইনপুট দ্বিতীয়টির ন্যূনতম মান নির্ধারণ করে এবং দ্বিতীয়টি প্রথমটির জন্য সর্বোচ্চ মান নির্ধারণ করে। আমি আরপি নিমিমিয়ার হ্যান্ডলারটি প্রসারিত করে এটি সমাধান করেছি। সুতরাং তার মূল:

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {},
            $el = $(element);

        $el.datepicker(options);

        //handle the field changing by registering datepicker's changeDate event
        ko.utils.registerEventHandler(element, "change", function() {
            var observable = valueAccessor();
            observable($el.datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $el.datepicker("destroy");
        });

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element);

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        var current = $el.datepicker("getDate");

        if (value - current !== 0) {
            $el.datepicker("setDate", value);
        }
    }
};

আমি যে বিকল্পগুলি সংশোধন করতে চেয়েছি তার সাথে মিল রেখে আমি আরও দুটি হ্যান্ডলার যুক্ত করেছি:

ko.bindingHandlers.minDate = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datepicker("option", "minDate", value);
    }
};

ko.bindingHandlers.maxDate = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datepicker("option", "maxDate", value);
    }
};

এবং এগুলি আমার টেম্পলেটে তাদের মতো ব্যবহার করেছে:

<input data-bind="datepicker: selectedLowerValue, datepickerOptions: { minDate: minValue()}, maxDate: selectedUpperValue" />       
<input data-bind="datepicker: selectedUpperValue, datepickerOptions: { maxDate: maxValue()}, minDate: selectedLowerValue" />

Answer 13

পূর্ববর্তী উত্তরে প্রদত্ত কাস্টম বাইন্ডিং ব্যবহার করা সর্বদা সম্ভব নয়। কল করা হচ্ছে$(element).datepicker(...) কিছুটা সময় ব্যয় হয়, এবং উদাহরণস্বরূপ, যদি কয়েক ডজন, বা এমনকি শত শত উপাদান এই পদ্ধতিটি কল করে, আপনার এটি প্রয়োজন "অলস", অর্থাৎ চাহিদা অনুযায়ী on

উদাহরণস্বরূপ, ভিউ মডেলটি আরম্ভ করা যেতে পারে, input ডিওমে beingোকানো হচ্ছে তবে সংশ্লিষ্ট ডেটপিকারগুলি কেবল তখনই শুরু করা হবে যখন কোনও ব্যবহারকারী তাদের ক্লিক করে।

সুতরাং, এখানে আমার সমাধান:

একটি কাস্টম বাইন্ডিং যুক্ত করুন যা নোডের সাথে স্বেচ্ছাসেবী ডেটা সংযুক্ত করতে দেয়:

KO.bindingHandlers.boundData = {
  init: function(element, __, allBindings) {
    element.boundData = allBindings.get('boundData');
  }
};

inputএর মানটির জন্য ব্যবহৃত পর্যবেক্ষণযোগ্যকে আকাআ করতে বাধ্যতামূলক ব্যবহার করুন :

<input type='text' class='my-date-input'
       data-bind='textInput: myObservable, boundData: myObservable' />

এবং অবশেষে, ডেটপিকারটি শুরু করার সময়, এটি onSelectবিকল্পটি ব্যবহার করুন :

$('.my-date-input').datepicker({
  onSelect: function(dateText) {
    this.myObservable(dateText);
  }
  //Other options
});

এই উপায়ে, ব্যবহারকারী যখনই ডেটপিকারের সাথে তারিখ পরিবর্তন করেন, ততক্ষণে সংশ্লিষ্ট নকআউট পর্যবেক্ষণযোগ্যও আপডেট করা হয়।