日期选择器无法正常工作? [英] Date picker not workin properly?

问题描述

如何使用Tab键选择斑马线日期选择器?

How to select a zebra date picker using tab key?

    $('#datepicker').focus(function () 
    { 
        $(this).data('Zebra_DatePicker').show(); 
    )};

请给出解决方案

推荐答案

您需要先调用初始化所述元素上的日期选择器，然后调用该功能以将日期选择器显示为焦点.

You need to first invoke Initialize the date picker on the said element and then invoke the function to show datepicker on focus.

尽管有一个陷阱！当日历显示焦点时>您选择一个日期>元素将再次引发焦点"事件.因此它将一直弹出，直到您使用选项卡前进或在其他位置单击鼠标为止.

Although, there's a gotcha! When it shows the calendar on focus > you select a date > the element will raise 'focus' event again. So it will keep popping up until you move forward using a tab or clicking your mouse somewhere else.

这是为您提供的解决方案:

Here's a solution for you:

var calendarShown = false;
// Initialize the date picker first

$('#datepicker').Zebra_DatePicker({    
    onSelect:function(){        
        calendarShown=false;
        $(this).data('Zebra_DatePicker').hide();
    }
});

// add an event listener to focus

$(document).on('focus','#datepicker',function(){    
    if(!calendarShown){
      $(this).data('Zebra_DatePicker').show();        
        calendarShown=true;
    }    
});

为避免一次又一次弹出日历的问题，我添加了一个变量 calendarShown .在每个焦点上，它将检查变量是否为false并显示日历.在选择日历"上，再次显示"变为假，因此下次您聚焦时，它将弹出日期选择器.

To avoid the problem of popping up the calendar again and again, I've added a variable calendarShown. On every focus it will check if the variable is false and show the calendar. On Select calendarShown again becomes false hence next time you focus, it pops up the date picker.

这是一个小提琴样本:

http://jsfiddle.net/sunnykumar08/Trr7D/

希望有帮助！

这篇关于日期选择器无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！