मैं jQuery UI Datepicker कैलेंडर पर चयनित तिथियों को कैसे स्पष्ट / रीसेट कर सकता हूं?

Question

मैं दिनांक कैलेंडर मूल्यों को कैसे रीसेट करूं? .. न्यूनतम और अधिकतम दिनांक प्रतिबंध?

समस्या यह है कि जब मैं तिथियों को हटाता हूं (पाठ मानों को हटाकर), तो पिछली तारीख के प्रतिबंध अभी भी लागू हैं।

मैं प्रलेखन के माध्यम से हल कर रहा हूँ और कुछ भी नहीं एक समाधान के रूप में बाहर कूद गया। मैं SO / google खोज पर त्वरित फ़िक्स नहीं ढूंढ सका

http://jsfiddle.net/CoryDanielson/tF5MH/

---

समाधान:

// from & to input textboxes with datepicker enabled
var dates = $("input[id$='dpFrom'], input[id$='dpTo']");

// #clearDates is a button to clear the datepickers
$('#clearDates').on('click', function(){
    dates.attr('value', '');
    dates.each(function(){
        $.datepicker._clearDate(this);
    });
});​​

_.clearDate () DatePicker ऑब्जेक्ट का एक निजी तरीका है। आप इसे jQuery UI की वेबसाइट पर सार्वजनिक एपीआई में नहीं पाएंगे, लेकिन यह एक आकर्षण की तरह काम करता है।

Answer 1

मैं इस बात को पूरा करने की कोशिश कर रहा था, यानी डेटापिक को खाली कर दें ताकि उपयोगकर्ता द्वारा दर्ज किए गए फिल्टर को हटाया जा सके। एक सा गुगुलिंग मुझे कोड का यह मीठा टुकड़ा मिला:

आप केवल फ़ील्ड पढ़ने पर भी स्पष्ट सुविधा जोड़ सकते हैं। बस निम्नलिखित कोड को अपनी तिथि सूची में जोड़ें:

}).keyup(function(e) {
    if(e.keyCode == 8 || e.keyCode == 46) {
        $.datepicker._clearDate(this);
    }
});

लोग _clearDateफ़ंक्शन का उपयोग करके दिनांक को निकालने के लिए बैकस्पेस (यहां तक ​​कि केवल फ़ील्ड पढ़ें) और फिर बैकस्पेस का उपयोग करने या कुंजी को हटाने में सक्षम होंगे ।

स्रोत

Comments

वाह। क्यों प्रचार नहीं किया जाएगा ?! यह jQuery UI पर एपीआई से बाहर रखा गया है .... कोई मतलब नहीं है। ---- मैंने आपकी पोस्ट को संपादित किया ताकि समाधान मेरे प्रश्न से बेहतर तरीके से मेल खाए। बहुत अच्छा लगता है

— कोरी डेनियलसन

मेरा संपादन स्वीकार करें, मैंने अधूरे कोड की कॉपी / पेस्ट डंप होने के बजाय अपने प्रश्न का मिलान करने के लिए आपके उत्तर को

— टाल दिया

क्या आपका संपादन पहले से सक्रिय नहीं है? मैं आपके संपादन को स्वीकार करने का विकल्प नहीं देख सकता ... :)

— लेनियल मैकाफेर्री

नहीं, यह ठीक है। मुझे लगता है कि दोनों समाधान मेरे मूल पद में शामिल हैं और आपकी मदद लगभग किसी को भी होगी जो इस पृष्ठ पर अपना रास्ता खोजती है। हो सकता है कि कीकोड 8 और 46 के बारे में कुछ टिप्पणियां हों या जो thisवास्तव में _clearDates () के अंदर हो

— Cory Danielson

वास्तव में आप इसे कहाँ रखते हैं?

— w0051977

Answer 2

क्या आप ने कोशिश की:

$('selector').datepicker('setDate', null);

यह एपीआई प्रलेखन के अनुसार काम करना चाहिए

Comments

मेरे पास कुछ डेटपिकर इनपुट के साथ एक फॉर्म है जिसका उपयोग मैं कुछ तारीख को संपादित करने के लिए करता हूं जिसे मैं वर्तमान तिथि के अनुसार भरना चाहता हूं। मुझे वर्तमान तिथि के साथ "सेटडेट" का उपयोग करने से पहले अपने संपादन फ़ॉर्म को रीसेट करने के लिए यह समाधान मिल गया है, लेकिन मुझे एक प्रारूप समस्या है: ('setDate', null)मेरे बिना मुझे जो प्रारूप चाहिए वह है (DD / MM / YYYY) , लेकिन जब मैं इसका उपयोग करता हूं तो मेरे पास MM है / डीडी / YYYY ... अंतर केवल उपयोग का है ('setDate', null), किसी भी विचार क्यों?

— मिकाल लेगर

क्षमा करें मिकेल - मुझे इसके बारे में पता नहीं है। क्या आपने stackoverflow.com/questions/1328025/… के अनुसार तिथि निर्धारित करने के बाद प्रारूप को रीसेट करने की कोशिश की है ?

— डेविडवैनटाइट

Answer 3

आपको बस विकल्प को फिर से अशक्त करने की आवश्यकता है:

dates.datepicker( "option" , {
    minDate: null,
    maxDate: null} );

मैंने आपका jsfiddle बदल दिया है: http://jsfiddle.net/tF5MH/9/

Comments

हां, धन्यवाद। तुम सही हो। यह मज़ेदार है, यह मुद्दा jQuery UI Datepicker डेमो पेज पर भी मौजूद है। jqueryui.com/demos/datepicker/#date-range तारीख पर सेट करें, फिर टेक्स्टबॉक्स खाली करें और समस्या मौजूद हो

— Cory Danielson

यह सुनिश्चित करने के लिए सबसे साफ तरीका है। date.datepicker( "option" , {setDate: null, minDate: null, maxDate: null} );

— AL3X

Answer 4

$('.date').datepicker('setDate', null);

Answer 5

क्लियरिंग कोड को बदलने की कोशिश करें:

$('#clearDates').on('click', function(){
    dates.attr('value', '');
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "maxDate", null );
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "minDate", null );
});

Answer 6

यह कोशिश करो, यह स्पष्ट कैलेंडर पर स्पष्ट बटन जोड़ देगा कि यह स्पष्ट तिथि होगी।

$("#DateField").datepicker({
    showButtonPanel: true,
    closeText: 'Clear',
         onClose: function (dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
        {
            document.getElementById(this.id).value = '';
        }
    }
});

Comments

यह उत्तर संभवतः फ़ायरफ़ॉक्स में काम न करने के बावजूद दूसरों की तुलना में बेहतर है। और इसके document.getElementById(this.id).value = '';साथ बदलने $(this).val('').change();से यह और भी बेहतर हो जाता है क्योंकि तब किसी भी स्थापित परिवर्तन हैंडलर को भी बुलाया जाता है।

— रेयान

Answer 7

जब आप स्पष्ट क्लिक करते हैं, तो अपनी दिनांक पर अधिकतम तिथि विशेषताओं को रीसेट करें।

Jquery वेबसाइट से

Get or set the maxDate option, after init.

    //getter
    var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
    //setter
    $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );

Comments

हां, आप सही हैं। मैंने j08691 को सबसे अच्छे उत्तर के रूप में चिह्नित किया क्योंकि उसने मुझे कुछ कोड दिया था जो मुझे काम करने वाले फ़ेडल में थप्पड़ मार सकता था। दुर्भाग्य से मैं उन दोनों को सर्वश्रेष्ठ के रूप में चिह्नित नहीं कर सका:

— Cory Danielson

हां मुझे पता है, मैं आपकी समस्या के सापेक्ष कुछ कोड के साथ इसे थोड़ा बेहतर बताने जा रहा था, लेकिन उसने मुझे इसे हरा दिया। :)

— मार्क डब्ल्यू

Answer 8

मुझे पता है कि यह बहुत देर हो चुकी है, लेकिन यहाँ कोड की एक सरल शांति है जो उसने मेरे लिए किया है:

$('#datepicker-input').val('').datepicker("refresh");

Comments

मैं देख नहीं सकता कि रिफ्रेश कोई अतिरिक्त करता है। आप केवल मान को साफ कर सकते हैं।

— ओमार्जेबरी

मुझे पसंद है कि आप नियंत्रण हटाने के लिए एक सार्वजनिक कॉल बनाम निजी फ़ंक्शन का उपयोग कर रहे हैं।

— स्नैयिटिस

@ मिग्वेल बिनपार, मैं जानता हूं कि यह पद पुराना है लेकिन आपका उत्तर एकमात्र ऐसा उत्तर है जिसने मुझे यह पता लगाने की कोशिश करने के 3 दिनों के बाद काम किया। धन्यवाद!

— कीजो

Answer 9

स्पष्ट उत्तर वही था जो मेरे लिए काम करता था।

$('#datepicker').val('');

जहां $ ('# डेटपिकर') इनपुट एलिमेंट की आईडी है।

Comments

मैं JSFiddle में उस समाधान की कोशिश की, और यह काम नहीं किया। jsfiddle.net/tF5MH/407 इनपुट के नीचे प्रजनन चरण देखें। उपयोग .val('')करने से इनपुट खाली हो जाएंगे, लेकिन कैलेंडरों में डेटपीक प्रतिबंधों को स्पष्ट नहीं करेंगे।

— कोरी डेनियलसन

मैंने jQuery UI (v1.12.0) के नवीनतम संस्करण के साथ भी प्रयास किया, और यह काम नहीं किया।

— कोरी डेनियलसन

एक टन omar धन्यवाद। मैं पिछले 20 मिनट से इस कार्य समाधान को खोज रहा हूं। आप एक जीवन रक्षक आदमी हैं! ..

— महेश

Answer 10

जब एक पाठ क्षेत्र में फ़ोकस नहीं होता है (जो कि डेटपेकर के खुले होने पर होता है) तो लेन-देन की कुंजी का एक संशोधित संस्करण बैकस्पेस कुंजी के लिए IE8 में "पेज बैक" शॉर्टकट के रूप में होता है।

यह val()क्षेत्र को खाली करने के लिए भी उपयोग करता है क्योंकि _clearDate(this)मेरे लिए काम नहीं किया।

$("#clearDates").datepicker().keyup(function (e) {
    // allow delete key (46) to clear the field
    if (e.keyCode == 46)
        $(this).val("");

    // backspace key (8) causes 'page back' in IE8 when text field
    // does not have focus, Bad IE!!
    if (e.keyCode == 8)
        e.stopPropagation();
});

Answer 11

मेरा डेटपिकर इनिशियलाइज़ेशन इस तरह दिखता है:

    dateOptions = {
                changeYear: true,
                changeMonth: true,
                dateFormat: 'dd/mm/yy',
                showButtonPanel: true,
                closeText: 'Clear',
            };

तो, डिफ़ॉल्ट 'डन' बटन में 'क्लियर' टेक्स्ट होगा।

अब, datepicker.js के अंदर आंतरिक फ़ंक्शन '_attachHandlers' लगता है:

 _attachHandlers: function (inst) {
            var stepMonths = this._get(inst, "stepMonths"),
                id = "#" + inst.id.replace(/\\\\/g, "\\");
            inst.dpDiv.find("[data-handler]").map(function () {
                var handler = {
                    prev: function () {...},
                    next: function () {...},
                    hide: function () {
                        $.datepicker._hideDatepicker();
                    },
                    today: function () {...}
                    ... 

और छिपाने के लिए फ़ंक्शन को बदलें :

                   ...
                   hide: function () {
                        $.datepicker._clearDate(id);
                        $.datepicker._hideDatepicker();
                    },
                    ...

Answer 12

मैं इस कोड का उपयोग फ़ील्ड और सभी शेंनिगन्स को खाली करने के लिए करता हूं। मुझे अपने उपयोग के मामले के लिए एक खाली क्षेत्र चाहिए था

jQuery.datepicker._clearDate(window.firstDay);
window.firstDay.datepicker('setDate',null);
window.firstDay[0].value = '';

किसी कारण से .val('')मेरे लिए काम नहीं करेगा। लेकिन jQuery को दरकिनार कर दिया। मेरी राय में इसका दोष यह है कि कोई .datepicker ('स्पष्ट') विकल्प नहीं है।

Answer 13

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

Ui.js पर var 'नियंत्रण' बदलें

controls = (!inst.inline ? "<button type='button' class='ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "closeText") + "</button>" + "<button type='button' class='ui-datepicker-close ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "clearText") + "</button>" : "");

फिर एक क्लीयरटेक्स्ट वैर जोड़ें

    this.regional[""] = { // Default regional settings
    closeText: "Done", // Display text for close link
    clearText: "Clear", // Display text for close link
    prevText: "Prev", // Display text for previous month link

और शो फंक्शन से पहले

$(".i_date").datepicker
(
    {
        beforeShow: function (input, inst)
        {
            setTimeout
            (
                function () 
                { 
                    $('.ui-datepicker-clear').bind('click', function() { $(input).val(''); });
                }, 
                0
            );
        }
    }
);

Answer 14

$("#datepicker").datepicker({            
        showButtonPanel: true,
        closeText: 'Clear', 
        onClose: function () {
            var event = arguments.callee.caller.caller.arguments[0];                
            if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
                $(this).val('');
            }
        }
    });

Answer 15

फ़ायरफ़ॉक्स में यह मेरे लिए फॉर्म (प्रोग्रामिक रूप से) में काम करता है, जहाँ डेटपिकर नियंत्रण डिफ़ॉल्ट रूप से अक्षम होता है:

$("#txtDat2").prop('disabled', false); //temporary enable controls<br>
$("#txtDat2").val("YYYY-MM-DD"); //reset date to dd.mm.yyyyy
$("#txtDat2").prop('disabled', true); //back to default state

Answer 16

कृपया इस समाधान को आज़माएं, यह ठीक से काम करेगा जैसा मैंने कोशिश की है

$('selector').datepicker('setStartDate', 0);

 $('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');