jQuery यूआई: डेटपिकर - दाएं शीर्ष पर करीबी बटन (छवि!) कैसे जोड़ें?

Question

मैं दाएं शीर्ष पर एक बंद बटन जोड़ना चाहता हूं।

मैं बटन पैनल के साथ नीचे के बंद बटन का उपयोग नहीं करना चाहता हूं।

मैं यह कैसे कर सकता हूं?

मैं "एक्स" की तरह कुछ हैं: यह करने के लिए एक onclick हैंडलर कि .datepicker("hide") फोन करेगा संलग्न

Answer 1

आपको मार्क-अप और यह शैली में लिंक सम्मिलित रूप में आप चाहते हैं कर सकते हैं, एक built-in method datepicker की:

$("#datepicker").datepicker({ 
    beforeShow: function(input) { 
     setTimeout(function() { 
      var headerPane = $(input) 
      .datepicker("widget") 
      .find(".ui-datepicker-header"); 

      $("<button>", { 
       text: "Close", 
       click: function() { 
        $.datepicker.hide(); 
       } 
      }).appendTo(headerPane); 
     }, 1); 
    } 
}); 

इसके अलावा, बंद करें बटन के लिए जगह बनाने के लिए, तो आप शायद क्रम बाईं ओर से अधिक 'अगले महीने' बटन को स्थानांतरित करने और के लिए 'बंद' जगह बनाने के लिए में इन शैलियों को समायोजित करना होगा परंतु टन:

.ui-datepicker .ui-datepicker-next { right:2px; } 
.ui-datepicker .ui-datepicker-next-hover { right:1px; } 

नोट: मैं this proof of concept से ऊपर जे एस कोड लिया और यह तदनुसार समायोजित कर दिया है। हालांकि इसका परीक्षण नहीं किया है।

$("#id_from_date").datepicker({ 
     closeText: "X", 
     showButtonPanel: true, 
    }); 
    $('#id_from_date').click(function() { 
     $(this).datepicker("show"); 
     var button = $(".ui-datepicker-close"); 
     $(".ui-datepicker-buttonpane").remove(); 
     $("#ui-datepicker-div").children().first().before(button); 
     button.css("margin-left", button.parent().width() - 30 + "px"); 
    }); 

आशा है कि यह मदद करता है:

Answer 2

आप बटन का स्थान इस तरह से बदल सकते हैं। यदि नहीं, तो मुझे बताएं।

$.datepicker.hide() is not a function 

@ dalbaeb के समाधान का उपयोग कर फ़ायरबग के माध्यम से

: :)

Answer 3

मैं इस त्रुटि हो रही है। यह सही था लेकिन मुझे डेटपिकर को बंद करने के लिए इसे थोड़ा सा ट्विक करना पड़ा।

यह वह जगह है मैं इसे कैसे बदलाव और यह मेरे लिए काम किया:

$("#datepicker").datepicker({ 
beforeShow: function(input) { 
    setTimeout(function() { 
     var headerPane = $(input) 
     .datepicker("widget") 
     .find(".ui-datepicker-header"); 
     $("<button>", { 
      text: "Close", 
      click: function() { 

      $('#ui-datepicker-div').hide();   

      } 
     }).appendTo(headerPane); 
    }, 1); 
} 
}); 

मैं बस की जगह:

$.datepicker.hide(); 

इस के साथ

:

$('#ui-datepicker-div').hide(); 

... और यह बंद कर देता है डेटपिकर अब! आशा करता हूँ की ये काम करेगा!

Answer 4

मैंने बटनपैन को शीर्ष पर ले जाया और फिर बाकी सीएसएस में किया।इस datepicker को छिपाने के लिए

$("[data-date-picker]") 
    .datepicker({ 
    showButtonPanel: true, 
    closeText: "X" 
    }) 
    .on('click', function() { 
    var datepicker = $('#ui-datepicker-div') 
    datepicker.prepend(datepicker.find(".ui-datepicker-buttonpane")); 
    }); 

Answer 5

उपयोग:

$("#datepicker").datepicker('hide'); 

Answer 6

मैं Done बटन

प्रथम स्टाइल से यह किया है, showButtonPanel विकल्प तो सक्षम बदल यह पाठ है:

$(".calendar").datepicker({ 
    showButtonPanel: true, 
    closeText: '×' 
}); 

फिर Today बटन और स्टाइल वें छुपाएं ई बंद बटन:

#ui-datepicker-div .ui-datepicker-current { 
    display: none; 
} 
#ui-datepicker-div .ui-datepicker-close { 
    position: absolute; 
    top: 0; 
    right: 0; 
    border: none; 
    background: transparent; 
    box-shadow: none; 
    text-shadow: none; 
    font-size: 26px; 
    line-height: 1; 
    padding: 3px 8px; 
    color: #cc6a6a; 
    font-weight: 600; 
    opacity: 0.8; 
} 
#ui-datepicker-div .ui-datepicker-close:focus { 
    outline: none; 
} 
#ui-datepicker-div .ui-datepicker-close:hover { 
    opacity: 1; 
}