JQuery DatePicker 和 beforeShowDay [英] JQuery DatePicker and beforeShowDay

查看:20
本文介绍了JQuery DatePicker 和 beforeShowDay的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我拼命地尝试使用此功能在我的日期选择器中仅启用特定日期,但是 beforeShowDay 函数从未被触发 :(

I am desperately trying to use this feature to enable only specific days in my datepicker, but the beforeShowDay function is never triggered :(

即使这样也行不通:

$(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');
}

如果您有任何想法,我将不胜感激!

If you have any ideas, I would greatly appreciate it!

事实上,即使这样也行不通:

in fact, even this is not working:

<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>

推荐答案

根据 jQueryUI 的 Datepicker API,

这就解释了为什么

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

不起作用.

我还注意到您多次调用 .datepicker() 并且每次都给它不同的参数.

Also I noticed you are calling .datepicker() multiple times and each time you are giving it different parameters.

代替:

$("#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/.希望这会有所帮助!

I have also provided you with a demo: http://jsfiddle.net/yTMwu/18/ . Hope this helps!

这篇关于JQuery DatePicker 和 beforeShowDay的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆