回答
PrimeFaces没有月份选取器组件。所以,如果你想使用基于jQuery的外部组件,然后结账jQuery.mtz.monthpicker
链接已损坏。请确认更正的一个是否正确。 – gersonZaragocin 2016-11-10 21:56:01
您可以设置此的模式,在你的情况将是:
<p:calendar id="test" value="#{bean.date}" pattern="MM.yyyy" />
但是只显示数字,如何在标签中显示年份和月份? – 2013-08-29 20:07:45
@CristianChaparroA。我没有尝试过,但日历,但内脏,你可以尝试'pattern =“MMMMMMMM yyyy”' – leostiw 2013-08-30 08:23:53
谢谢!,但是当我尝试更改de date不起作用时,我不能选择其他日期,因为不显示日历。 – 2013-09-22 22:04:37
我读,你不能从包装盒中实现这一功能了来自Primefaces。
https://code.google.com/p/primefaces/issues/detail?id=3453
的问题是旧的,但由一个月的最新评论前。于是,他们用这种方式:
jQuery UI DatePicker to show month year only
也有只使用<p:selectOneMenu>
和画报,你需要在它外面什么解决方案。
干杯
谢谢AndresL.I会尝试 – Sagar 2013-03-25 09:02:26
我只是用CSS隐藏了日期选择器的表格。我还必须创建自己的箭头进行导航,因为标准箭头不会触发dateSelect
事件。
标记:
<p:commandButton actionListener="#{bean.decrementMonth}"
id="navLeft" update="[your components]" icon="ui-icon-triangle-1-w" />
<h:panelGroup class="tableView">
<p:calendar value="#{bean.selectedDate}" mode="inline" />
</h:panelGroup>
<p:commandButton actionListener="#{bean.incrementMonth}"
id="navRight" update="[your components]" icon="ui-icon-triangle-1-e" />
CSS:
.tableView table,
.tableView a.ui-datepicker-prev,
.tableView a.ui-datepicker-next {
display: none;
}
bean的方法:
public void decrementMonth() throws Exception {
Calendar c = Calendar.getInstance();
c.setTime(this.selectedDate);
c.add(Calendar.MONTH, -1);
//... business logic to update date dependent data
}
public void incrementMonth() throws Exception {
Calendar c = Calendar.getInstance();
c.setTime(this.selectedDate);
c.add(Calendar.MONTH, 1);
//... business logic to update date dependent data
}
结果(PrimeFaces 3.4.2):
这是我如何实现一个简单的一个月的范围选择看起来是这样的:
的VoirCalendrier.xhtml网页:
<h:form id="calendrierRegenererFormulaire">
<h2><h:outputText value="#{msgs.CalendrierPlageAafficher} "/></h2>
<h:panelGrid columns="6">
<h:outputLabel value="#{msgs.CalendrierDateDebut} : " for="calendrierDateDebut" />
<p:calendar id="calendrierDateDebut" value="#{locationsControleur.dateDebut}"
pattern="yyyy-MM-dd" effect="slideDown" navigator="true" mode="inline"
lang="#{sessionControleur.localeInterface}" locale="#{sessionControleur.langue}" style="moisAnSeul" />
<h:outputLabel value="#{msgs.CalendrierDateFin} : " for="calendrierDateFin" />
<p:calendar id="calendrierDateFin" value="#{locationsControleur.dateFin}"
pattern="yyyy-MM-dd" effect="slideDown" navigator="true" mode="inline"
lang="#{sessionControleur.localeInterface}" locale="#{sessionControleur.langue}" style="moisAnSeul" />
<p:commandButton value="#{msgs.CalendrierRegenerer}" update=":calendrierFormulaire"
onclick="regenererCal()"/>
</h:panelGrid>
</h:form>
要防止显示日历日,您只需要设置其dislay属性没有用下面的代码在您的活动css文件:
.ui-datepicker-calendar {
display: none;
}
正如丹尼尔Slazlay上面提到的,与月/年的下拉菜单或箭头图标导航不改变内部日期值的p:日历控件。为了达到这个目的,当“重新生成日历”按钮被触发时,为两个p:日历读取所选月份和年份的下拉值。通过这些信息,您可以构建格式为“yyyy-MM-dd”的日期字符串并设置p:日历控件的内部隐藏值。对于月份范围的开始月份,本月的第一天返回,而在结束的月份,它是返回的月份的最后一天。这与跟随着的JavaScript来完成:
function regenererCal() {
year = $("#calendrierRegenererFormulaire\\:calendrierDateDebut .ui-datepicker-year").val();
month = $("#calendrierRegenererFormulaire\\:calendrierDateDebut .ui-datepicker-month").val();
$('#calendrierRegenererFormulaire\\:calendrierDateDebut_input').val(year + '-' + ('0' + (++month)).slice(-2) + '-01');
year = $("#calendrierRegenererFormulaire\\:calendrierDateFin .ui-datepicker-year").val();
month = $("#calendrierRegenererFormulaire\\:calendrierDateFin .ui-datepicker-month").val();
lastDay = new Date(year, month + 1, 0); // To get last day of month, see http://stackoverflow.com/a/13572682/1431979
$('#calendrierRegenererFormulaire\\:calendrierDateFin_input').val(lastDay.getFullYear() + '-' + ('0' + (lastDay.getMonth()+1)).slice(-2) + '-' + lastDay.getDate());
// Check what is posted to your server
console.log("[voirCalendrier.js]regenererCal calendrierDateDebut_input = " + $('#calendrierRegenererFormulaire\\:calendrierDateDebut_input').val());
console.log("[voirCalendrier.js]regenererCal calendrierDateFin_input = " + $('#calendrierRegenererFormulaire\\:calendrierDateFin_input').val());
}
在服务器端,您可以检查正确的信息由setter方法获得:
...
formatAAAA_MM_JJ = new SimpleDateFormat("yyyy-MM-dd HH:mm", langue);
...
public void setDateDebut(Date dateDebut) {
this.dateDebut = dateDebut;
logger.info("{locationsContrôleur}setDateDebut dateDebut = " + formatAAAA_MM_JJ.format(dateDebut));
}
public void setDateFin(Date dateFin) {
this.dateFin = dateFin;
logger.info("{locationsContrôleur}setDateFin dateFin = " + formatAAAA_MM_JJ.format(dateFin));
}
我希望这可以帮助别人。
//<![CDATA[
function showMonthYear(calendar){
$('.ui-datepicker-calendar').css('display','none');
$('.ui-datepicker').css('top', $('.ui-datepicker').offset().top+250);
var month = '';
var year = '';
if($(calendar).val()){
month = $(calendar).val().split('/')[0];
year = $(calendar).val().split('/')[1];
} else {
month = $.datepicker.formatDate("mm", new Date());
year = $.datepicker.formatDate("yy", new Date());
}
var exists = 0 != $('.ui-datepicker-year option[value='+year+']').length;
if(!exists){
$(".ui-datepicker-year").empty();
var initYear = parseInt(year)-10;
var endYear = parseInt(year)+10;
while(initYear < endYear){
$(".ui-datepicker-year").append($('<option>', {value:initYear, text: initYear}));
initYear++;
}
}
$('.ui-datepicker-month').val(parseInt(month)-1);
$('.ui-datepicker-year').val(year);
$(".ui-datepicker-month").change(function(){changeMonthYear(calendar);});
$(".ui-datepicker-year").change(function(){changeMonthYear(calendar);});
}
function changeMonthYear(calendar){
console.log('changeMonthYear');
$('.ui-datepicker-calendar').css('display','none');
$(".ui-datepicker-month").change(function(){changeMonthYear(calendar);});
$(".ui-datepicker-year").change(function(){changeMonthYear(calendar);});
var month = parseInt($('.ui-datepicker-month').val())+1;
if(month < 10){ month = '0'+month; }
$(calendar).val(month+"/"+parseInt($('.ui-datepicker-year').val()));
}
// ]]>
</script>
<p:calendar size="5"
onclick="showMonthYear(this)"
maxlength="10" pattern="MM/yyyy" navigator="true" />
你可以添加一些上下文吗?也许解释代码? – 2015-12-01 14:33:09
你必须添加此块来完成导航箭头:
$(".ui-datepicker-next").click(function(){changeMonthYear(calendar);});
$(".ui-datepicker-prev").click(function(){changeMonthYear(calendar);});
你可以在p使用viewChange事件:日历捕捉下一个/上月的点击。然后,您可以通过单击该月的第一天来触发dateSelect事件。
JSF:
<p:calendar value="#{sampleBean.month}" styleClass="monthcal" mode="inline">
<p:ajax event="viewChange" onsuccess="$('.ui-calendar[id=\''+this.source+'\'] a.ui-state-default').filter(function(){return $(this).text()*1===1;}).click();" />
</p:calendar>
为了隐藏与天窗玻璃,添加以下的CSS
.monthcal .ui-datepicker-calendar {display: none;}
从Primefaces文档使用了该功能:
另一个方便的事件是viewChange在月份被触发并且 年的变化。将org.primefaces.event.DateViewChangeEvent 的实例传递给提供当前月份和年份 信息的事件侦听器。
作了如下代码: XHTML
<p:panelGrid styleClass="monthYearOnly">
<p:row>
<p:column>FROM:</p:column>
<p:column>
<p:calendar id="from" mode="inline" value="#{callEntryBean.from}" navigator="true">
<p:ajax event="viewChange" listener="#{callEntryBean.updateFrom()}"/>
</p:calendar>
</p:column>
<p:column>TO:</p:column>
<p:column>
<p:calendar id="to" mode="inline" value="#{callEntryBean.to}" navigator="true">
<p:ajax event="viewChange" listener="#{callEntryBean.updateTo()}"/>
</p:calendar>
</p:column>
<p:column>
<p:commandButton value="Filter"
action="#{callEntryBean.filterDisplay}" update=""/>
</p:column>
</p:row>
</p:panelGrid>
CSS
.monthYearOnly .ui-datepicker-calendar{
display: none;
}
豆
public void updateFrom(){
Map<String,String> requestParams = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
LOGGER.info("before: " + from);
Calendar c = Calendar.getInstance();
c.setTime(from);
c.set(Calendar.MONTH, Integer.parseInt(requestParams.get("form:from_month")) - 1);
c.set(Calendar.YEAR, Integer.parseInt(requestParams.get("form:from_year")));
from = c.getTime();
LOGGER.info("after: " + from);
}
public void updateTo(){
Map<String,String> requestParams = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
LOGGER.info("before: " + to);
Calendar c = Calendar.getInstance();
c.setTime(to);
c.set(Calendar.MONTH, Integer.parseInt(requestParams.get("form:to_month")) - 1);
c.set(Calendar.YEAR, Integer.parseInt(requestParams.get("form:to_year")));
c.set(Calendar.DATE,c.getActualMaximum(Calendar.DAY_OF_MONTH));
to = c.getTime();
Calendar now = Calendar.getInstance();
if(c.after(now)){
to = now.getTime();
}
LOGGER.info("after: " + to);
}
基本上,当month
或year
被更改时,ajax触发器是此处的主要功能。不幸的是,这是一个工作,因为我无法检索org.primefaces.event.DateViewChangeEvent
。这似乎是一个错误,我刚刚在Primefaces论坛上发布了一个报告。当我在那里得到一些反馈时,会更新这篇文章。
希望它有帮助。
- 1. RichFaces日历:仅显示月份和年份
- 2. 显示月份和年份
- 3. 月份和年份查看日历
- 4. Django DateField的日历只显示月份和年份?
- 5. 如何获取日历上显示的月份和年份
- 6. Plone 4:CalendarWidget仅显示年份,无日期和月份
- 7. 显示年份日历
- 8. 如何仅在daterangepicker插件中显示月份和年份?
- 9. 根据月份显示日历日历
- 10. Django SelectDateWidget只显示月份和年份
- 11. android:如何在android中的日历日期中显示月份和年份?
- 12. 显示日期,月份和年份代替当前的日期,月份和年份
- 13. 在JQuery日历中显示日期以及其他月份和月份和年份菜单
- 14. 使日历显示VHDL的月份和月份?
- 15. Excel - 仅显示特定月份和年份的列
- 16. Bootprap的Datepicker角度指令:仅显示月份和年份
- 17. Excel公式仅显示月份和年份?
- 18. 仅显示月份和年份不适用于jQuery-2.1.1
- 19. 如何仅在Datatable的DataColumn中显示月份和年份?
- 20. 如何在UIDatePicker中仅显示月份和年份?
- 21. 在Ajax日历扩展程序中仅显示和选择每年的月份
- 22. 带月份和年份的不带日期的日历
- 23. 展开Adam Shaw的完整日历以显示年份和月份
- 24. 如何按年份和月份排序和显示React数组?
- 25. Flex组件仅用于选择月份和年份
- 26. 仅在Xamarin表单中显示日期选取器中的月份和年份
- 27. 在SQL中显示当前日期的年份和月份
- 28. 如何设置datepicker的日期只显示月份和年份
- 29. 显示DateTimePicker上的年份,月份和日期iOS
- 30. 如何使用UIPickerView显示日期月份和年份(Upto 2015)?
您是否在谈论只能获取月份和年份的组件? – Jitesh 2013-03-25 07:24:04
是的确切Jitesh – Sagar 2013-03-25 07:28:11
你想拥有几年,而不是几天的月份列表?或者你在说什么行为? – 2013-03-25 07:33:48