假日和周末的MVC Datepicker

时间:2015-11-19 06:48:09

标签: jquery datepicker

日期选择器

<script type="text/javascript">
        var array = ["2015-11-25", "2015-11-27", "2015-11-29"]

        $(function () {
            $(".datepicker").datepicker({ beforeShowDay: $.datepicker.noWeekends, minDate: 0 })
            //$("#startDate").datepicker({ minDate: new Date(), beforeShowDay: $datepicker.noWeekends });
            $("#startDate").datepicker();
        });

        $('input').datepicker({
            beforeShowDay: function (date) {
                var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                return [array.indexOf(string) == -1]
            }
        });

       $(function () { $('#startDate').datepicker({ beforeShowDay: $.datepicker.noWeekends }); });
    </script>

HTML

                <div class="form-group">
                    <div class="col-md-4 col-md-offset-4">
                        <label>Start Date</label>
                        @*<input type="date" class="form-control" id="startDate"/>*@
                        @Html.TextBox("datetime.now", String.Format("{0:d}", "Start date"), new { @class = "datepicker", type = "text" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-4 col-md-offset-4">
                        <br />
                        <label>End Date</label>
                        @*<input type="date" class="form-control" id="endDate" />*@
                        @Html.TextBox("01-01-2015", String.Format("{0:d}", "End date"), new { @class = "datepicker", type = "text" })
                    </div>
                </div>

尝试使用datepicker禁止选择阵列中的周末和特定日期。我如何结合两者?因为目前只有noWeekends正在运作。我在注释noWeekends部分时,不允许选择我的数组中的日期。

3 个答案:

答案 0 :(得分:6)

var holidays_dates = ["11-25-2015", "11-27-2015", "11-29-2015","10-9-2015"];
 $(function() {
 $( "#startDate" ).datepicker({
    beforeShowDay: function(date){
            // First convert the date in to the mm-dd-yyyy format 
            // Take note that we will increment the month count by 1 
             var current_date = (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getFullYear() ;
 //alert(current_date)
             // We will now check if the date belongs to    holidays_dates array 
             if ($.inArray(current_date, holidays_dates) != -1 ) {
                 return [false];
             } 
             // In case the date is not present in holidays_dates array, we will now check if it is a weekend. 
             // We will use the noWeekends function
             var weekend_dates = $.datepicker.noWeekends(date);
             return weekend_dates; 
         }
         });
 });

答案 1 :(得分:0)

<强>尝试:

var disableddates = ["11-25-2015", "11-27-2015", "11-29-2015"];

function DisableSpecificDates(date) {

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

    var currentdate = (m + 1) + '-' + d + '-' + y;
    for (var i = 0; i < disableddates.length; i++) {
        if ($.inArray(currentdate, disableddates) != -1) {
            return [false];
        }
    }

    var weekenddate = $.datepicker.noWeekends(date);
    return weekenddate;

}


$(function() {
    $('#startDate').datepicker({
        beforeShowDay: DisableSpecificDates
    });
});

来源: http://www.spiceforms.com/blog/how-to-disable-dates-in-jquery-datepicker-a-short-guide/

小提琴: http://jsfiddle.net/6yajfmk2/1/

答案 2 :(得分:0)

只需按照以下方式更改脚本标记即可。

 <script type="text/javascript">
    var array = ["2015-11-25", "2015-11-27", "2015-11-29"]
    $('.datepicker').datepicker({
        beforeShowDay: function (date) {
            var noWeekend = $.datepicker.noWeekends(date);
            if (noWeekend[0]) {
                return [array.indexOf(jQuery.datepicker.formatDate('yy-mm-dd', date)) == -1]
            } else {
                return noWeekend;
            }
        }, minDate: 0
    });
   $(function () { $('#startDate').datepicker({ beforeShowDay: $.datepicker.noWeekends }); });
</script>