JQuery दिनांक पिकर दिनांक रीसेट

Question

मैं कैलेंडर के निचले हिस्से में डेटपिकर पर "रीसेट" नियंत्रण जोड़ना चाहता हूं - जहां "बंद" नियंत्रण जाता है। यह उपयोगकर्ता को डेटपिकर से जुड़ी इनपुट को रिक्त करने के लिए सक्षम करेगा (कोई तारीख नहीं)।

मैं यह नहीं समझ सकता कि बाइंड फ़ंक्शन कैसे लिखना है, विशेष रूप से, मैं नियंत्रण के लिए बाध्य तत्व को कैसे पकड़ूं?

 if (this.displayClear) { 
      $pop.append(
       $('<a href="#" id="dp-clear">' + $.dpText.TEXT_CLEAR + '</a>') 
       .bind(
        'click', 
        function() 
        { 
          c.clearSelected(); 
          //help! reset the value to '': $(this.something).val('') 
          c._closeCalendar(); 
        } 
       ) 
      ); 
     } 

Answer 1

यहां समाधान समाधान है, बस डेटपिकर को किसी भी कॉल से पहले क्लीनडिएटिकर() पर कॉल करें।

function cleanDatepicker() { 
    var old_fn = $.datepicker._updateDatepicker; 

    $.datepicker._updateDatepicker = function(inst) { 
     old_fn.call(this, inst); 

     var buttonPane = $(this).datepicker("widget").find(".ui-datepicker-buttonpane"); 

     $("<button type='button' class='ui-datepicker-clean ui-state-default ui-priority-primary ui-corner-all'>Delete</button>").appendTo(buttonPane).click(function(ev) { 
      $.datepicker._clearDate(inst.input); 
     }) ; 
    } 
} 

Answer 2

मैं इस एक ही समस्या के माध्यम से जा रहा था, कि है, कोई विकल्प उपलब्ध datepicker खाली करने के लिए। मैं तो कोड के मिठाई टुकड़े के साथ इस सुपर उपयोगी टिप्पणी पोस्ट की here:

एक त्वरित तरीका है कि आप भी केवल पढ़ने के लिए खेतों पर स्पष्ट सुविधा जोड़ सकते हैं अपने मौजूदा datepicker नियंत्रण के लिए निम्न कोड जोड़ने के लिए है:

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

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

Answer 3

1. बदलें गया लेबल

   $(document).ready(function() { 
       $("#startdate").datepicker({ 
        showOn: 'both', 
        buttonImageOnly: true, 
        buttonImage: "css/images/calendar.gif", 
        showButtonPanel: true, 
        closeText: 'Clear', 
        onClose: function (dateText, inst) { 
         $(this).val(''); 
        } 
       }); 
   }); 
   

2. जोड़े बटन रद्द कैलेंडर

   $("#termdate").datepicker({ 
       showOn: 'both', 
       buttonImageOnly: true, 
       buttonImage: "css/images/calendar.gif", 
       showButtonPanel: true, 
       beforeShow: function (input) { 
        setTimeout(function() { 
         var buttonPane = $(input).datepicker("widget") 
          .find(".ui-datepicker-buttonpane"); 
         var btn = $('<button class="ui-datepicker-current' 
          + ' ui-state-default ui-priority-secondary ui-corner-all"' 
          + ' type="button">Clear</button>'); 
         btn.unbind("click").bind("click", function() { 
          $.datepicker._clearDate(input); 
         }); 
         btn.appendTo(buttonPane); 
        }, 1); 
       } 
   }); 
   

Answer 4

मैं एक अच्छे समाधान के लिए:

$(document).ready(function() { 
    $(".datepicker").datepicker({ 
      showOn: 'focus', 
      showButtonPanel: true, 
      closeText: 'Clear', // Text to show for "close" button 
      onClose: function() { 
       var event = arguments.callee.caller.caller.arguments[0]; 
       // If "Clear" gets clicked, then really clear it 
       if ($(event.delegateTarget).hasClass('ui-datepicker-close')) { 
        $(this).val(''); 
       } 
      } 
    }); 
}); 

http://jsfiddle.net/swjw5w7q/1/

Answer 5

यहाँ स्कूप

हम एक कस्टम स्पष्ट समारोह बाध्य करने के लिए डिफ़ॉल्ट किया बटन का उपयोग कर सकते है।

$("#date_picker").datepicker({minDate:myDate,dateFormat: 'yy-mm-dd',showButtonPanel:true,closeText:'Clear', 
    beforeShow: function(input) { 
     setTimeout(function() { 
     var clearButton = $(input) 
      .datepicker("widget") 
      .find(".ui-datepicker-close"); 
     clearButton.unbind("click").bind("click",function(){$.datepicker._clearDate(input);}); 
     }, 1); 
    } 
}); 

एक आकर्षण की तरह काम करता है। चीयर्स :);)

क्रेडिट: सेबेस्तियन Renauld और Behrang बीना

Answer 6

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

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