猿问

日期选择器上的 Jquery 日期禁用不起作用

我知道关于它的主题很多,但在解决这个问题几天后我决定发布。我需要在我的引导日期选择器中禁用日期,这里是 html 代码:


<head>

<!-- Required meta tags -->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">

<link rel="stylesheet" href="../Css/css.css">

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

<input type="text"  class="form-control" id="txt_dateDebut" value="<?php 

    echo $uneLocation->getDateDebut(); ?>" name="txt_dateDebut" required>

所以我在 Jquery 中尝试了很多解决方案,但没有任何反应,这是一个:


    //disable these dates

var datesForDisable = ["25-01-2019", "26-01-2019", "27-01-2019"];


$("#txt_dateDebut").datepicker({

    format: 'dd/mm/yyyy',

    autoclose: true,

    weekStart: 1,

    calendarWeeks: true,

    todayHighlight: true,

    beforeShowDay: function(date){

        //format date in datepicker to dd-mm-yy

        var date1 = $.datepicker.formatDate('dd-mm-yy', date);

        //disable dates

        return [ datesForDisable.indexOf(date1) == -1 ]

    }

});

(一旦测试成功完成,目标是动态填充 PHP 的日期表以禁用)


catspeake
浏览 148回答 2
2回答

qq_花开花谢_0

您可以使用datepicker 的 beforeShowDay来禁用日期。即://disable these datesvar datesForDisable = ["25.01.2019", "26.01.2019", "27.01.2019"]$("#txt_dateDebut").datepicker({&nbsp; &nbsp; &nbsp; format: 'dd/mm/yyyy',&nbsp; &nbsp; &nbsp; autoclose: true,&nbsp; &nbsp; &nbsp; weekStart: 1,&nbsp; &nbsp; &nbsp; calendarWeeks: true,&nbsp; &nbsp; &nbsp; todayHighlight: true,&nbsp; &nbsp; &nbsp; beforeShowDay: function(date){&nbsp; &nbsp; &nbsp; &nbsp;//format date in datepicker to dd-mm-yy&nbsp; &nbsp; &nbsp; &nbsp; var date1 = $.datepicker.formatDate('dd.mm.yy', date);&nbsp; &nbsp; &nbsp; &nbsp; //disable dates&nbsp; &nbsp; &nbsp; &nbsp; return [ datesForDisable.indexOf(date1) == -1 ]&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; });<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" /><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script><input&nbsp; type="text" class="form-control" id="txt_dateDebut" value="<?php echo $uneLocation->getDateDebut(); ?>" name="txt_dateDebut" required>

交互式爱情

如果您使用引导日期选择器使用,$('.#txt_dateDebut').datepicker({beforeShowDay:function(Date){var curr_date = Date.getDate();var curr_month = Date.getMonth()+1;var curr_year = Date.getFullYear();&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;var curr_date=curr_month+'/'+curr_date+'/'+curr_year;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;if (datesForDisable.indexOf(curr_date)>-1) return false;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;}});
随时随地看视频慕课网APP
我要回答