最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Multiple jQuery UI date pickers with different styling - Stack Overflow

programmeradmin1浏览0评论

I have two jQuery date pickers on my page:

  • A regular one
  • A "special" one that can only pick years/months.

The special one uses some custom CSS (from here) to hide the calendar part, so only the month/years show up.

.ui-datepicker-calendar {
    display : none ;
}

However, since there is only one dialog instance on the page, the calendar is hidden for both pickers.

Is there a way to only apply this style to one of the instances? I've checked the docs to see if I could add a custom class to the dialog, but I couldn't find it.

I have two jQuery date pickers on my page:

  • A regular one
  • A "special" one that can only pick years/months.

The special one uses some custom CSS (from here) to hide the calendar part, so only the month/years show up.

.ui-datepicker-calendar {
    display : none ;
}

However, since there is only one dialog instance on the page, the calendar is hidden for both pickers.

Is there a way to only apply this style to one of the instances? I've checked the docs to see if I could add a custom class to the dialog, but I couldn't find it.

Share Improve this question edited May 23, 2017 at 12:04 CommunityBot 11 silver badge asked Jul 22, 2010 at 16:48 FrederikFrederik 14.6k10 gold badges47 silver badges54 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 5

I'm solving the same problem. The answer above doesn't work. What did work was the solution provided in this ment: http://www.filamentgroup./lab/using_multiple_jquery_ui_themes_on_a_single_page/#mentNumber16

I've modified it a bit and here's what I got:

$('#startDate').datepicker( {
    beforeShow: function(input, inst) {
        var newclass = 'calendar-base hideDates'; 
        var p = inst.dpDiv.parent();
        if (!p.hasClass('calendar-base'))
            inst.dpDiv.wrap('<div class="'+newclass+'"></div>');
        else
            p.removeClass('showDates').addClass('hideDates');
    }
});
$('#birthDate').datepicker( {
    beforeShow: function(input, inst) {
        var newclass = 'calendar-base showDates'; 
        var p = inst.dpDiv.parent();
        if (!p.hasClass('calendar-base')){ 
            inst.dpDiv.wrap('<div class="'+newclass+'"></div>');
        else
            p.removeClass('hideDates').addClass('showDates');
    }
});

I've checked it and it works.

You could run change the css manually in the beforeShow event, for each input. The code would look like this:

$("#regularInput").datepicker({
                   beforeShow: function(input, inst) {
                                    $(".ui-datepicker-calendar").show();
                                }
                   });

$("#specialInput").datepicker({
                   beforeShow: function(input, inst) {
                                    $(".ui-datepicker-calendar").hide();
                                }
                   });

I haven't tested that code, but you should get the jist. Hope that helps!

I suggest that instead of using CSS, you should follow https://stackoverflow./a/6013093 instead to create the same effect by hiding the calendar when the focus event is triggered for your "special" datepicker.

If you're set on using CSS, you can attach the datepickers to a div elements instead of input elements. That way each .ui-datepicker-calendar is inside of its own div and you can apply separate stylings. The disadvantages are that you have divs instead of inputs, which appear immediately when you load the page, and don't have an onClose event. Here's the bare minimum code to make it work.

HTML:

    <div id="startDate" class="date-picker" />
    <div id = "special-datepicker" class = "date-picker" </div>

Javascript:

    $(function() {
        $('.date-picker').datepicker( {});
    }); 

CSS:

    #special-datepicker .ui-datepicker-calendar {
        display: none;
    }
发布评论

评论列表(0)

  1. 暂无评论