怎样在同一个页面使用Jequery datapicker控件时，一部分只显示年月，一部分完整显示年月日

Question

给每个datapicker加id，通过css控制一下。

Answer 1

加了id，并加下了如下所示样式
#caldron.ui-datepicker-calendar {
     display:none;
}
不起作用

Answer 2

弹出的calander的div并不在textbox下面，因此前面加入ID也不行。可以使用下面的方法1. 定义两个空的div，最好在form外。    <div id="normalDatePicker"></div>
    <div id="HiddenSomthingDatePicker"></div>2.定义两个div中是否只显示年月
 
 <style type="text/css" >
        #HiddenSomthingDatePicker .ui-datepicker-calendar {
            display: none;
        }        #normalDatePicker .ui-datepicker-calendar {
            display: block;
        }
        
    </style>
3. 弹出calender的时候，移动calender的div到相应的自建div中。       $(function() {
            $("#datepicker").datepicker();
            $("#datepicker1").datepicker();            $("#datepicker").click(function () {
                $("#ui-datepicker-div").appendTo($("#normalDatePicker"));
            });
            
            $("#datepicker1").click(function () {
                $("#ui-datepicker-div").appendTo($("#HiddenSomthingDatePicker"));
            });        });datepicker和datepicker1的定义:
       <p>Date: <input type="text" id="datepicker"></p>
        <p>Date: <input type="text" id="datepicker1"></p>

Answer 3

还是不行，谢谢findcaiyzh的回复

Answer 4

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.1/themes/blitzer/jquery-ui.css" /> <style>
.year-month-picker .ui-datepicker-calendar { display: none; }
</style> <label>Year & Month Picker:</label>
<input id="date1" /> <br>
<label>Normal Date Picker:</label>
<input id="date2" /> <script>
$(function() {
$('#date1').datepicker( {
changeMonth: true,
changeYear: true,
dateFormat: 'yy/m',
beforeShow: function(_, inst){ inst.dpDiv.addClass('year-month-picker') },
onClose: function(_, c) { 
$(this).datepicker('setDate', new Date(c.selectedYear, c.selectedMonth, 1));
}
}); $('#date2').datepicker({
beforeShow: function(_, inst){ inst.dpDiv.removeClass('year-month-picker')}
});
});
</script>

Answer 5

第二个问题是日期中不包含日的情况下，jq ui认为该日期非法，可以修改datepicker的ParseDate方法来绕过这个错误。
在script的前面加上下面这段： var _parseDate = $.datepicker.parseDate;
$.datepicker.parseDate = function(format, value, settings) {
if (format == 'yy/m')
return _parseDate.apply(this, ['yy/m/d', value+'/1', settings]);
else
return _parseDate.apply(this, arguments);
};

Answer 6

我这里可以，可能是我们用的jquery版本不同。。你需要把css改成你的.ui-date picker-calender{display:none;}<style type="text/css" >
        #HiddenSomthingDatePicker .ui-date picker-calender {
            display: none;
        }
 
        #normalDatePicker .ui-date picker-calender {
            display: block;
        }
         
    </style>

Answer 7

To jshi123
你好，你对第一个问题的解决办法很好用。伹第二个好像不起作用。麻烦你再指点一下

Answer 8

To jshi123
不好意思，有用，是我搞错了，谢谢