javascript - JQuery Datepicker hide dates from one calendar on a page - Stack Overflow

admin管理员组

文章数量:1341686

I have several datepickers on the same page and need one to only display the month and year, while others should show plete calendar with days. I know that to hide days from a lone datepicker I can do something like:

<style>
 .ui-datepicker-calendar {
   display: none;
 }
</style>

But that hides the dates from all calendars. How can I make sure the other datepicker keeps the calendar view?

Edit I did try nesting CSS but am still missing something. For HTML part I have roughly:

<div id="monthOnly"><input type="text" class="monthly-picker" name="mdate"></div>

And JS code $('.monthly-picker').datepicker();

Still, doing something like

<style>
#monthOnly .ui-datepicker-calendar {
   display: none;
 }
</style>

Does not produce desired results.

I have several datepickers on the same page and need one to only display the month and year, while others should show plete calendar with days. I know that to hide days from a lone datepicker I can do something like:

<style>
 .ui-datepicker-calendar {
   display: none;
 }
</style>

But that hides the dates from all calendars. How can I make sure the other datepicker keeps the calendar view?

Edit I did try nesting CSS but am still missing something. For HTML part I have roughly:

<div id="monthOnly"><input type="text" class="monthly-picker" name="mdate"></div>

And JS code $('.monthly-picker').datepicker();

Still, doing something like

<style>
#monthOnly .ui-datepicker-calendar {
   display: none;
 }
</style>

Does not produce desired results.

• javascript
• jquery
• datepicker

Share Improve this question Follow edited Apr 27, 2012 at 15:03 SaltyNuts asked Apr 27, 2012 at 14:43 SaltyNutsSaltyNuts 5,17899 gold badges4949 silver badges8181 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

give the use an id on a container element.

<style>
 #monthOnly .ui-datepicker-calendar {
   display: none;
 }
</style>

EDIT: http://jsfiddle/h8DWR/ is a solution to deal with the idiosyncrasies of datepicker. The idea is use a style element to add the style when the specific datepicker is chosen and then remove it when it is closed.

I did a little different ...

HTML

<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />

CSS

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

jQuery

$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        yearRange: '1980:' + new Date().getFullYear(),
        beforeShow: function(el, dp) { 
            $('#ui-datepicker-div').addClass('hide-calendar');
        },
        onClose: function(dateText, inst) { 
            $('#ui-datepicker-div').removeClass('hide-calendar');
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});

Fiddle

Slightly different way

$('.year').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy',
  beforeShow: function(input) {
    $(this).datepicker('widget').addClass('hide-calendar');
  },
  onClose: function(input, inst) {
    $(this).datepicker('widget').removeClass('hide-calendar');
    $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
  }
});

$('.datepicker').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy dd',
  onClose: function(input, inst) {
    $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
  }
});

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

<script src="//ajax.googleapis./ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis./ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis./ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" />

<input class="year" type="text" id="" />
<input class="datepicker" type="text" id="" />

本文标签： javascriptJQuery Datepicker hide dates from one calendar on a pageStack Overflow