क्या jQuery यूआई डेटपिकर शनिवार और रविवार (और छुट्टियों) को अक्षम करने के लिए बनाया जा सकता है?

Question

मैं नियुक्ति दिवस चुनने के लिए डेटपिकर का उपयोग करता हूं। मैंने पहले से ही अगले महीने के लिए तिथि सीमा निर्धारित की है। यह ठीक काम करता है। मैं उपलब्ध विकल्पों से शनिवार और रविवार को बाहर करना चाहता हूं। क्या यह किया जा सकता है? यदि हां, तो कैसे?

Answer 1

beforeShowDay विकल्प है, जो प्रत्येक तारीख के लिए एक फ़ंक्शन कहलाता है, यदि तारीख की अनुमति है या गलत है तो सत्य लौट रहा है। डॉक्स से:

---

beforeShowDay

समारोह एक पैरामीटर के रूप में एक तिथि लेता है और यह दर्शाता है या नहीं, इस तिथि चयन और 1 साथ [0] सही/गलत के बराबर एक सरणी लौटना चाहिए डिफ़ॉल्ट प्रस्तुति के लिए एक सीएसएस वर्ग नाम या '' के बराबर। इसे प्रदर्शित करने से पहले डेटपिकर में प्रत्येक दिन इसे बुलाया जाता है।

डेटपिकर में कुछ राष्ट्रीय छुट्टियों को प्रदर्शित करें।

$(".selector").datepicker({ beforeShowDay: nationalDays}) 

natDays = [ 
    [1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], 
    [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'], 
    [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'], 
    [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke'] 
]; 

function nationalDays(date) { 
    for (i = 0; i < natDays.length; i++) { 
     if (date.getMonth() == natDays[i][0] - 1 
      && date.getDate() == natDays[i][1]) { 
     return [false, natDays[i][2] + '_day']; 
     } 
    } 
    return [true, '']; 
} 

फ़ंक्शन में निर्मित कोई भी मौजूद नहीं है, जिसे नोवेकेंड कहा जाता है, जो सप्ताहांत के दिनों के चयन को रोकता है।

$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends }) 

---

(ऊपर से nationalDays समारोह कल्पना करते हुए) दो गठबंधन के लिए, आप की तरह कुछ कर सकता है:

$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays}) 

function noWeekendsOrHolidays(date) { 
    var noWeekend = $.datepicker.noWeekends(date); 
    if (noWeekend[0]) { 
     return nationalDays(date); 
    } else { 
     return noWeekend; 
    } 
} 

अद्यतन: ध्यान दें कि jQuery यूआई 1.8.19 के रूप में, beforeShowDay option एक वैकल्पिक तीसरे पैरामीटर को भी स्वीकार करता है, एक पॉपअप टूलटिप

Answer 2

यदि आप सप्ताहांत को बिल्कुल दिखाई नहीं देना चाहते हैं, तो si mply:

सीएसएस

th.ui-datepicker-week-end, 
td.ui-datepicker-week-end { 
    display: none; 
} 

Answer 3

इस संस्करण में, माह, दिन, और वर्ष में जो दिन कैलेंडर पर ब्लॉक करने के लिए निर्धारित करता है।

$(document).ready(function(){ 
    var d   = new Date(); 
    var natDays = [[1,1,2009],[1,1,2010],[12,31,2010],[1,19,2009]]; 

    function nationalDays(date) { 
    var m = date.getMonth(); 
    var d = date.getDate(); 
    var y = date.getFullYear(); 

    for (i = 0; i < natDays.length; i++) { 
     if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2])) 
     { 
     return [false]; 
     } 
    } 
    return [true]; 
    } 
    function noWeekendsOrHolidays(date) { 
    var noWeekend = $.datepicker.noWeekends(date); 
     if (noWeekend[0]) { 
     return nationalDays(date); 
     } else { 
     return noWeekend; 
    } 
    } 
    $(function() { 
    $(".datepicker").datepicker({ 

     minDate: new Date(d.getFullYear(), 1 - 1, 1), 
     maxDate: new Date(d.getFullYear()+1, 11, 31), 

     hideIfNoPrevNext: true, 
     beforeShowDay: noWeekendsOrHolidays, 
    }); 
    }); 
}); 

Answer 4

कोड यू एसक्यूएल डेटाबेस से छुट्टी दिनांकों हो और यूआई datepicker

$(document).ready(function(){ 
    var holiDays = (function() { 
    var val = null; 
    $.ajax({ 
     'async': false, 
     'global': false, 
     'url': 'getdate.php', 
     'success': function (data) { 
      val = data; 
     } 
    }); 
    return val; 
    })(); 
    var natDays = holiDays.split(''); 

    function nationalDays(date) { 
    var m = date.getMonth(); 
    var d = date.getDate(); 
    var y = date.getFullYear(); 

    for (var i = 0; i ‘ natDays.length-1; i++) { 
    var myDate = new Date(natDays[i]); 
     if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear()))) 
     { 
     return [false]; 
     } 
    } 
    return [true]; 
    } 

    function noWeekendsOrHolidays(date) { 
    var noWeekend = $.datepicker.noWeekends(date); 
     if (noWeekend[0]) { 
     return nationalDays(date); 
     } else { 
     return noWeekend; 
    } 
    } 
    $(function() { 
    $("#shipdate").datepicker({ 
     minDate: 0, 
     dateFormat: 'DD, d MM, yy', 
     beforeShowDay: noWeekendsOrHolidays, 
     showOn: 'button', 
     buttonImage: 'images/calendar.gif', 
     buttonImageOnly: true 
    }); 
    }); 
}); 

एसक्यूएल में एक डाटाबेस बनाने में निर्धारित तिथि को निष्क्रिय करने के बनाने के लिए और आप में दिनांक अवकाश रखा जाएगा के इस संस्करण एम.एम. Varchar के रूप में/DD/YYYY स्वरूप एक फ़ाइल getdate.php में नीचे दी गई सामग्री रखो

[php] 
$sql="SELECT dates FROM holidaydates"; 
$result = mysql_query($sql); 
$chkdate = $_POST['chkdate']; 
$str=''; 
while($row = mysql_fetch_array($result)) 
{ 
$str .=$row[0].''; 
} 
echo $str; 
[/php] 

मुबारक कोडिंग !!!! :-)

Answer 5

ये उत्तर बहुत उपयोगी थे। धन्यवाद।

नीचे मेरा योगदान एक सरणी जोड़ता है जहां कई दिन झूठी वापसी कर सकते हैं (हम हर मंगलवार, बुधवार और गुरुवार को बंद होते हैं)। और मैंने विशिष्ट तिथियों के साथ-साथ वर्षों और ब-सप्ताहांत कार्यों को बंडल किया।

यदि आप सप्ताहांत बंद करना चाहते हैं, तो [शनिवार], [रविवार] को बंद करें सरणी में जोड़ें।

$(document).ready(function(){ 

    $("#datepicker").datepicker({ 
     beforeShowDay: nonWorkingDates, 
     numberOfMonths: 1, 
     minDate: '05/01/09', 
     maxDate: '+2M', 
     firstDay: 1 
    }); 

    function nonWorkingDates(date){ 
     var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6; 
     var closedDates = [[7, 29, 2009], [8, 25, 2010]]; 
     var closedDays = [[Monday], [Tuesday]]; 
     for (var i = 0; i < closedDays.length; i++) { 
      if (day == closedDays[i][0]) { 
       return [false]; 
      } 

     } 

     for (i = 0; i < closedDates.length; i++) { 
      if (date.getMonth() == closedDates[i][0] - 1 && 
      date.getDate() == closedDates[i][1] && 
      date.getFullYear() == closedDates[i][2]) { 
       return [false]; 
      } 
     } 

     return [true]; 
    } 




}); 

Answer 6

$("#selector").datepicker({ beforeShowDay: highlightDays }); 

... 

var dates = [new Date("1/1/2011"), new Date("1/2/2011")]; 

function highlightDays(date) { 

    for (var i = 0; i < dates.length; i++) { 
     if (date - dates[i] == 0) { 
      return [true,'', 'TOOLTIP']; 
     } 
    } 
    return [false]; 

} 

Answer 7

यहाँ समाधान है कि हर कोई पसंद करता है बहुत तीव्र करने लगता है ... व्यक्तिगत रूप से मुझे लगता है कि यह कुछ इस तरह करने के लिए बहुत आसान है:

 var holidays = ["12/24/2012", "12/25/2012", "1/1/2013", 
      "5/27/2013", "7/4/2013", "9/2/2013", "11/28/2013", 
      "11/29/2013", "12/24/2013", "12/25/2013"]; 

     $("#requestShipDate").datepicker({ 
      beforeShowDay: function(date){ 
       show = true; 
       if(date.getDay() == 0 || date.getDay() == 6){show = false;}//No Weekends 
       for (var i = 0; i < holidays.length; i++) { 
        if (new Date(holidays[i]).toString() == date.toString()) {show = false;}//No Holidays 
       } 
       var display = [show,'',(show)?'':'No Weekends or Holidays'];//With Fancy hover tooltip! 
       return display; 
      } 
     }); 

इस तरह अपनी तिथियाँ मानव पठनीय हैं। यह वास्तव में इतना अलग नहीं है कि यह मुझे इस तरह से अधिक समझ में आता है।

Answer 8

डेटपिकर में यह कार्यक्षमता निर्मित है!

$("#datepicker").datepicker({ 
    beforeShowDay: $.datepicker.noWeekends 
}); 

http://api.jqueryui.com/datepicker/#utility-noWeekends

Answer 9

आप उपयोग कर सकते हैं noWeekends दिनों अक्षम करने आप कुछ इस तरह कर सकते हैं के लिए सप्ताह के अंत में चयन

$(function() { 
    $("#datepicker").datepicker({ 
    beforeShowDay: $.datepicker.noWeekends 
    }); 
    }); 

Answer 10

निष्क्रिय करने के लिए कार्य करते हैं।

{ enabled: false, classes: "class-name", tooltip: "Holiday!" } 

वैकल्पिक रूप से, अगर आप परवाह नहीं है: <input type="text" class="form-control datepicker" data-disabled-days="1,3"> जहां 1 सोमवार और 3 बुधवार

Answer 11

नवीनतम बूटस्ट्रैप 3 संस्करण में है (बूटस्ट्रैप-datepicker.js) beforeShowDay इस प्रारूप में एक परिणाम की उम्मीद सीएसएस और टूलटिप के बारे में तारीख को अचयनित करने के लिए बस एक बूलियन false वापस करें।

इसके अलावा, वहाँ कोई $.datepicker.noWeekends है, तो आप इस की तर्ज पर कुछ करने की जरूरत है:

var HOLIDAYS = { // Ontario, Canada holidays 
    2017: { 
     1: { 1: "New Year's Day"}, 
     2: { 20: "Family Day" }, 
     4: { 17: "Easter Monday" }, 
     5: { 22: "Victoria Day" }, 
     7: { 1: "Canada Day" }, 
     8: { 7: "Civic Holiday" }, 
     9: { 4: "Labour Day" }, 
     10: { 9: "Thanksgiving" }, 
     12: { 25: "Christmas", 26: "Boxing Day"} 
    } 
}; 

function filterNonWorkingDays(date) { 
    // Is it a weekend? 
    if ([ 0, 6 ].indexOf(date.getDay()) >= 0) 
     return { enabled: false, classes: "weekend" }; 
    // Is it a holiday? 
    var h = HOLIDAYS; 
    $.each(
     [ date.getYear() + 1900, date.getMonth() + 1, date.getDate() ], 
     function (i, x) { 
      h = h[x]; 
      if (typeof h === "undefined") 
       return false; 
     } 
    ); 
    if (h) 
     return { enabled: false, classes: "holiday", tooltip: h }; 
    // It's a regular work day. 
    return { enabled: true }; 
} 

$("#datePicker").datepicker({ beforeShowDay: filterNonWorkingDays });