डेटपिकर फ़ंक्शन गतिशील रूप से

Question

हटाएं मैं ड्रॉपडाउन सूची चयनित मूल्य के आधार पर डेटपिकर फ़ंक्शन को हटाना चाहता हूं। मैं निम्नलिखित कोड आज़माता हूं, लेकिन जब भी मैं कर्सर को टेक्स्ट बॉक्स में डालता हूं तब भी यह कैलेंडर दिखाता है। कृपया मुझे एक सुझाव दें।

$("#ddlSearchType").change(function() { 
    if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date") { 
     $("#txtSearch").datepicker(); 
    } else { 
     $("#txtSearch").datepicker("option", "disabled", true); 
    } 
}); 

Answer 1

आप के बजाय विकल्प विधि का उपयोग कर के सक्षम/अक्षम तरीकों की कोशिश कर सकते हैं:

$("#txtSearch").datepicker("enable"); 
$("#txtSearch").datepicker("disable"); 

इस पूरी पाठ बॉक्स अक्षम करता है। तो हो सकता है आप datepicker.destroy() बजाय का उपयोग कर सकते हैं:

$(document).ready(function() { 
    $("#ddlSearchType").change(function() { 
     if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date") { 
      $("#txtSearch").datepicker(); 
     } 
     else { 
      $("#txtSearch").datepicker("destroy"); 
     } 
    }).change(); 
}); 

Demo here।

Answer 2

बस बल्कि आईडी पर यह बाध्यकारी की तुलना में एक वर्ग के लिए datepicker बाँध। वर्ग निकालें जब आप datepicker रद्द करना चाहते हैं ...

$("#ddlSearchType").change(function() { 
    if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date")     { 
    $("#txtSearch").addClass("mydate"); 
    $(".mydate").datepicker() 
    } else { 
    $("#txtSearch").removeClass("mydate"); 
    } 
}); 

Answer 3

डेटपिकर के उदाहरण को नष्ट करें जब आप इसे नहीं चाहते हैं और जब भी आवश्यक हो तो नया उदाहरण बनाएं।

मैं जानता हूँ कि यह बदसूरत है, लेकिन केवल इस काम कर रहा है ...

Check this out

$("#ddlSearchType").change(function() { 
     if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date") { 
       $("#txtSearch").datepicker(); 

     } 
      else { 
       $("#txtSearch").datepicker("destroy");      
     } 
}); 

Answer 4

यह समाधान मैं का उपयोग करें। इसमें अधिक लाइनें हैं लेकिन यह केवल एक बार डेटपिकर बनायेगी।

$('#txtSearch').datepicker({ 
    constrainInput:false, 
    beforeShow: function(){ 
     var t = $('#ddlSearchType').val(); 
     if(['Required Date', 'Submitted Date'].indexOf(t)) { 
      $('#txtSearch').prop('readonly', false); 
      return false; 
     } 
     else $('#txtSearch').prop('readonly', true); 
    } 
}); 

datepicker नहीं दिखाया जाएगा, जब तक कि ddlSearchType का मान न तो "आवश्यक तिथि" या "सबमिट करने की तिथि"

Answer 5

खैर मैं एक ही मुद्दा था और "नष्ट" लेकिन यह मेरे लिए काम नहीं करने की कोशिश की है। तब मैं के संबंध में निम्न काम मिल गया मेरे एचटीएमएल था:

<input placeholder="Select Date" id="MyControlId" class="form-control datepicker" type="text" /> 

Jquery मेरे लिए यही काम:

लेबल

$('#MyControlId').data('datepicker').remove();