13

私は必死にこの機能を使用して日付ピッカーの特定の日のみを有効にしようとしていますが、beforeShowDay関数がトリガーされることはありません:(

これでも機能していません：

$(document).ready(function(){
    /*initialisation des composants*/
    initComponent();
});


availableDates = new Array();

/* Fonction d'initialisation des composants */
function initComponent(){
    /* Date retrait */
    $("#dateRetrait").datepicker();

    $("#dateRetrait").datepicker({beforeShowDay: function(d) {
        console.log("bsd");
        alert("bsd");
    }});

    //$("#dateRetrait").datepicker({buttonImage: "../../../Images/boutons/btn_calendier.png"});
    //$("#dateRetrait").datepicker({showButtonPanel: true });
    //$("#dateRetrait").datepicker({beforeShow: function() {setTimeout(function() {$(".ui-datepicker").css("z-index", 9999999999);}, 10);}});

    $('#comboLieux').attr('disabled', 'disabled');
    $('#comboCreneau').attr('disabled', 'disabled');
    $('#dateRetrait').attr('disabled', 'disabled');
    $('#dateRetrait').datepicker('option', 'minDate', new Date());

    $("#dateRetrait").datepicker("option","dateFormat", 'dd-mm-yy');
}

何かアイデアがありましたら、よろしくお願いします！

実際、これでも機能していません。

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Restrict date range</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
      $(function() {
        $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
        $( "#datepicker" ).datepicker({beforeShowDay: function(d) {
          console.log(d);
          alert(d);
        }});
      });
    </script>
  </head>
  <body>
    <p>Date: <input type="text" id="datepicker" /></p>
  </body>
</html>
4

3 に答える 3

34

jQueryUI の Datepicker API によると、

ここに画像の説明を入力

これは理由を説明します

$("#dateRetrait").datepicker({beforeShowDay: function(d) {
        console.log("bsd");
        alert("bsd");
    }});

動作しません。

.datepicker()また、あなたが複数回呼び出しており、そのたびに異なるパラメーターを指定していることにも気付きました。

それ以外の：

$("#dateRetrait").datepicker();

$("#dateRetrait").datepicker({beforeShowDay: function(d) {
        console.log("bsd");
        alert("bsd");
    }});

$('#dateRetrait').datepicker('option', 'minDate', new Date());

$("#dateRetrait").datepicker("option","dateFormat", 'dd-mm-yy');

これを試してください：

$("#dateRetrait").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: new Date(), 
    beforeShowDay: function(d) {
        var dmy = (d.getMonth()+1); 
        if(d.getMonth()<9) 
            dmy="0"+dmy; 
        dmy+= "-"; 

        if(d.getDate()<10) dmy+="0"; 
            dmy+=d.getDate() + "-" + d.getFullYear(); 

        console.log(dmy+' : '+($.inArray(dmy, availableDates)));

        if ($.inArray(dmy, availableDates) != -1) {
            return [true, "","Available"]; 
        } else{
             return [false,"","unAvailable"]; 
        }
    }
    });

http://jsfiddle.net/yTMwu/18/のデモも提供しました。お役に立てれば！

于 2013-01-23T16:46:40.583 に答える
3

コールバック関数に渡される日付は、本格的な日付と時刻です。したがって、短い日付文字列と比較する場合は、そのうちの 1 つを変換する必要があります。datepicker の beforeShowDay 属性部分だけのこのスニペットは、変換が必要であることを示しています。ここでは、要点を証明するために、カレンダーの 1 つの日付を無効にするだけです。

                beforeShowDay: function(date) {
                var dd = date.getDate();
                var mm = date.getMonth()+1; //January is 0!
                var yyyy = date.getFullYear();
                var shortDate = mm+'/'+dd+'/'+yyyy;
                var test = "12/30/2014";
                if (shortDate == test) {
                    return [false, "" ];
                } else {
                    return [true, "" ];
                }
            }
于 2015-03-18T12:31:05.610 に答える
3

Dom はよく説明してくれました。さらに短縮コードを追加したいと思います。

availableDatesの配列が次の形式の場合: 0000-00-00 (yyyy-mm-dd)

var availableDates = ["2020-01-05", "2020-01-10", "2020-01-14"];

$("#dateRetrait").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: new Date(), 
    beforeShowDay: function(d) {        
        var year = d.getFullYear(),
            month = ("0" + (d.getMonth() + 1)).slice(-2),
            day = ("0" + (d.getDate())).slice(-2);

        var formatted = year + '-' + month + '-' + day;

        if ($.inArray(formatted, availableDates) != -1) {
            return [true, "","Available"]; 
        } else{
            return [false,"","unAvailable"]; 
        }
    }
});

beforeShowDay - レンダリング日の前に毎回動作します))

$.inArray - 配列内の値を検索 (値がない場合は -1)

このソリューションでは、次の行を変更するだけでstopDatesを作成できます。

if ($.inArray(formatted, availableDates) != -1) {

に

if ($.inArray(formatted, availableDates) == -1) {
于 2017-10-11T12:15:19.107 に答える