Question

当我尝试隐藏包含用户选择日期的输入时：

style = "display:none"

选择器再次显示。我绝对需要隐藏此输入，因为用户必须看到的唯一内容是他点击打开选择器的按钮。

HTML：

<input type="button" value="Répercuter" class="button" id="btnRepercute"/>
<input type="text" name="dateMultiCalendar_1" id="dateMultiCalendar_1" class="dateMultiCalendar_1"/>

JS：

$('#dateMultiCalendar_1').multiDatesPicker($.datepicker.regional[ "fr" ]);
$('#btnRepercute').click(function() {
$("#dateMultiCalendar_1").datepicker( "destroy" );
$('#dateMultiCalendar_1').multiDatesPicker
({

           // $.datepicker.regional[ "fr" ]
           //beforeShowDay: $.datepicker.noWeekends
        beforeShowDay: function (date) {
         var today = new Date();
           if (date.getDay() === 1 || date.getDay() === 2 || date.getDay() === 3
           || date.getDay() === 4 || date.getDay() === 5)

           {
            if (date.getMonth() === today.getMonth())
                {
                    return [true, ''];
                }
           }
        return [false, ''];
        }

});
 $('#dateMultiCalendar_1').focus();
});

我刚注意到，当我点击按钮显示选择器时，日历始终显示在输入下方，而不是在按钮下方。也许是为什么当我隐藏输入时，日历不再出现。

Answer 1

您的代码不起作用，因为您无法将焦点放在未显示的字段上。但是，您可以使用datepicker('show')从javascript显示日期选择器。（在这种情况下，我们不使用datepicker而不是multiDatesPicker）

试试这个：

//Attach the date picker to you text field
$('#dateMultiCalendar_1').multiDatesPicker({
           beforeShowDay: function (date) {
                var today = new Date();
                if (date.getDay() >= 1 && date.getDay() <= 5){
                   if (date.getMonth() === today.getMonth(){
                      return [true, ''];
                   }
                }
                return [false, ''];
           }
 });

//Make the button display the date picker on cick
$('#btnRepercute').click(function() {
         $('#dateMultiCalendar_1').datepicker('show');
});

Answer 2

[更新]

$('#dateMultiCalendar_1').hide();
$('#dateMultiCalendar_1').datepicker({
           // $.datepicker.regional[ "fr" ]
           //beforeShowDay: $.datepicker.noWeekends
    beforeShowDay: function (date) {
    var today = new Date();
    if (date.getDay() >= 1 && date.getDay() <= 5)
    {
       if (date.getMonth() === today.getMonth())
          {
              return [true, ''];
          }
       }
       return [false, ''];
     },
  showOn: "button"
});
$('.ui-datepicker-trigger').text('whatever');

抱歉，我无法及时回复你，但似乎你已经得到了你的答案，无论如何这里都是我的：

$('#dateMultiCalendar_1').hide();
$('#dateMultiCalendar_1').multiDatesPicker({
    beforeShowDay: function (date) {
        if (date.getDay() >= 1 && date.getDay() <= 5)
            return [true, ''];
        else
            return [false, ''];
     }
});

$('#btnRepercute').click(function(){
    $('#dateMultiCalendar_1').toggle('show');
});

这里是小提琴：click me

单击按钮打开Multidatepicker

2 个答案: