7

चुनने के बाद बूटस्ट्रैप-डेटपिकर खाली क्षेत्र फ़ील्ड यदि मेरे पास ऑटोक्लोज़ सक्षम है, और मैं पहले से चुने गए कैलेंडर से फ़ील्ड का चयन करता हूं, तो यह फ़ील्ड खाली करता है और फिर अपेक्षित के रूप में डेटपिकर को बंद कर देता है। मैं अभी भी ऑटोक्लोज़ सुविधा कैसे प्राप्त कर सकता हूं, लेकिन क्या यह फ़ील्ड खाली नहीं है?वर्तमान दिनांक

एक उदाहरण के लिए डेमो पर देखो, http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&autoclose=on&keyboardNavigation=on&forceParse=on#sandbox

  1. सुनिश्चित करें कि स्वतः पर
  2. एक तिथि का चयन है।
  3. फिर से डेटपिकर खोलें, वर्तमान में चयनित तिथि का चयन करें।
  4. क्षेत्र फिर से

धन्यवाद

उत्तर

11

बूटस्ट्रैप datepicker events है कि आप अपने लक्ष्य को पूरा करने के लिए लाभ उठा सकते हैं प्रदान करता है खाली है।

यहाँ एक तरीका यह करना है:

$('#sandbox-container input').datepicker({ 
    autoclose: true 
}); 

$('#sandbox-container input').on('show', function(e){ 
    if (e.date) { 
     $(this).data('stickyDate', e.date); 
    } 
    else { 
     $(this).data('stickyDate', null); 
    } 
}); 

$('#sandbox-container input').on('hide', function(e){ 
    var stickyDate = $(this).data('stickyDate'); 

    if (!e.date && stickyDate) { 
     $(this).datepicker('setDate', stickyDate); 
     $(this).data('stickyDate', null); 
    } 
}); 

नहीं आवश्यक रूप से सबसे सुंदर, लेकिन जैसा कि आप यहाँ देख सकते हैं, यह काम कर देता है:

http://jsfiddle.net/klenwell/LcqM7/ (क्रोम में परीक्षण)

+0

यह डिफ़ॉल्ट व्यवहार होना चाहिए। धन्यवाद! – maxbeaudoin

+0

एक समस्या है कि डेटपिकर बहुत चिपचिपा हो जाता है। इसे पहली बार कैसे काम करें? –

+0

बढ़िया, धन्यवाद! –

1

बस अगर कोई "एक पंक्ति" में सभी घटनाओं को लागू करना चाहता है तो मैं यहां एएसपी.नेट एमवीसी प्रोजेक्ट में उपयोग किया गया कोड साझा कर रहा हूं।

और आपके समाधान के लिए @ क्लेनवेल के लिए धन्यवाद!

$('#ExpectedEndingTimeDataPicker').datepicker({ 
    startDate: "@Model.ExpectedEndingTimeAsString", 
    language: "@Model.CurrentCultere2Letters", 
    autoclose: true, 
    todayHighlight: true, 
    format: "@Model.CurrentDateFormat" 
}).on('changeDate', function (e) {   
    RecalculateEstimationDate(); 
}).on('show', function (e) { 
    if (e.date) { 
     $(this).data('stickyDate', e.date); 
    } 
    else { 
     $(this).data('stickyDate', null); 
    } 
}).on('hide', function (e) { 
    var stickyDate = $(this).data('stickyDate'); 
    if (!e.date && stickyDate) { 
     $(this).datepicker('setDate', stickyDate); 
     $(this).data('stickyDate', null); 
    } 
}); 

सूचना है कि ModelASP.NET MVC मॉडल है।

आप उन घटना यहाँ http://bootstrap-datepicker.readthedocs.org/en/release/events.html

और के बारे में बूटस्ट्रैप-datepicker के बारे में अधिक पढ़ सकते हैं।js

+1

मैं एमवीसी का उपयोग कर रहा हूं, यह मेरे लिए अच्छा काम करता है। धन्यवाद =) –

1

त्वरित फिक्स काँटेदार: चूक @ लाइन 1394 में, एक नया विकल्प जोड़ने , अनुमति दें

var defaults = $.fn.datepicker.defaults = { 
    allowDeselection: false, 
    ... 
}; 

_toggle_multidate समारोह @ लाइन 1015 में, करने के लिए "else if (ix !== -1)" कथन को संशोधित:

else if (ix !== -1 && this.o.allowDeselection){ 
      this.dates.remove(ix); 
     } 

संदर्भ: https://github.com/eternicode/bootstrap-datepicker/issues/816

1

यह वहाँ के रूप में मुद्दा था जब हम इनपुट पाठ पर क्लिक करें सबसे सामान्य समाधान लगता है और दिनांक चयन के अलावा वेबपृष्ठ पर कुछ अन्य घटक पर क्लिक करें:

//Date picker 
$('#datepickerInputId').datepicker({ 
    autoclose : true, 
}).on('show', function(e){ 
    if (e.date) { 
     $(this).data('stickyDate', e.date); 
    } else if($(this).val()){ 
     /**auto-populate existing selection*/ 
     $(this).data('stickyDate', new Date($(this).val())); 
     $(this).datepicker('setDate', new Date($(this).val())); 
    } else { 
     $(this).data('stickyDate', null); 
    } 
}).on('hide', function(e){ 
    var stickyDate = $(this).data('stickyDate'); 
    if (!e.date && stickyDate) { 
     $(this).datepicker('setDate', stickyDate); 
     $(this).data('stickyDate', null); 
    } 
}); 

कृपया सुझाव दें कि क्या कोई संशोधन

संबंधित मुद्दे