2012-03-16 13 views
11

मैं JQuery Ui का उपयोग करके विशिष्ट तिथियों को अक्षम करने का प्रयास कर रहा हूं।JQuery ui - दिनांक पिकर, विशिष्ट तिथियों को अक्षम करना

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css"> 
<style type="text/css"> 
.ui-datepicker .preBooked_class { background:#111111; } 
.ui-datepicker .preBooked_class span { color:#999999; } 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jQuery UI Datepicker</title> 
<script type="text/javascript" src="development-bundle/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script> 

का दृष्टांत datepicker वस्तु

<script type="text/javascript"> 

    $(function() { 
    $("#iDate").datepicker({ 

    dateFormat: 'dd MM yy', 
    beforeShowDay: checkAvailability 
    }); 

    }) 

दिनांक कैलेंडर के भीतर अक्षम होने जाओ

var unavailableDates = ["9-3-2012","14-3-2012","15-3-2012"]; 

function unavailable(date) { 
    dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear(); 
    if ($.inArray(dmy, unavailableDates) == -1) { 
    return [true, ""]; 
    } else { 
    return [false,"","Unavailable"]; 
    } 
} 

$('#iDate').datepicker({ beforeShowDay: unavailable }); 

</script> 
</head> 
<body> 
<input id="iDate"> 
</body> 
</html> 

यह नहीं करता है: हालांकि, मैं कोई भाग्य कर रहा हूँ, यहाँ मेरी कोड है प्रतीत होता है, कोई विचार है कि मैं इसे कैसे हल कर सकता हूं। खुश होती है।

उत्तर

27

ऐसा लगता है कि आप एक इनपुट पर दो बार datepicker पर कॉल कर रहे हैं। मुश्किल की अपनी तरह अपने कोड का पालन करने की है, लेकिन यह अगर तुम फिर से संगठित और दूसरा datepicker कॉल निकालने के लिए, सब कुछ काम करना चाहिए:

<script type="text/javascript"> 
    var unavailableDates = ["9-3-2012", "14-3-2012", "15-3-2012"]; 

    function unavailable(date) { 
     dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear(); 
     if ($.inArray(dmy, unavailableDates) == -1) { 
      return [true, ""]; 
     } else { 
      return [false, "", "Unavailable"]; 
     } 
    } 

    $(function() { 
     $("#iDate").datepicker({ 
      dateFormat: 'dd MM yy', 
      beforeShowDay: unavailable 
     }); 

    }); 
</script> 

उदाहरण:http://jsfiddle.net/daCrosby/JjPrU/334/

+0

पूरी तरह से काम करता है, एक त्वरित प्रश्न एंड्रू। मैं इसे कैसे अनुकूलित कर सकता हूं ताकि अनुपलब्ध तिथियों को सरणी के भीतर हार्ड कोड किया जा सके, तिथियों को डेटाबेस तालिका से पुनर्प्राप्त किया जाता है। खुश होती है। – bobo2000

+0

@ bobo2000: यह आपके सर्वर-साइड तकनीक पर निर्भर करता है। लेकिन मुझे लगता है कि आप जावास्क्रिप्ट में हार्ड कोडिंग के बजाय पेज लोड पर पृष्ठ पर बहिष्कृत तिथियों की सरणी एम्बेड करेंगे। PHP का उपयोग कर –

+0

। क्या मुझे डीबी से पूछताछ करने की आवश्यकता होगी, फिर परिणाम सेट के साथ सरणी को पॉप्युलेट करें? – bobo2000

0

सहायक answer..If आप एक perticular दिन अक्षम करना चाहते हैं, तो आप नीचे के रूप में कर सकते हैं:

  $scope.dateOptions = { 
      beforeShowDay: unavailable 
      }; 

      function unavailable(date) { 
       if (date.getDay() === 0) { 
        return [true, ""]; 
       } else { 
        return [false, "", "Unavailable"]; 
       } 
      }  

ऊपर केवल रविवार सक्षम हो जाएगा और अन्य सभी दिन अक्षम हो जाएगा। उम्मीद है की यह मदद करेगा।

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