primefaces 日历组件默认获取日期。我可以只得到没有日期的月份和年份吗？
如何只获得月份和年份
问问题
42251 次
12 回答
9
我只是用 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;
}
豆方法：
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）：
于 2013-04-24T14:07:38.580 回答
6
PrimeFaces 本身没有月份年份选择器组件。因此，如果您想使用基于 jQuery 的外部组件，请查看 jQuery.mtz.monthpicker
于 2013-03-25T12:46:17.433 回答
4
这是我如何实现一个简单的月份范围选择器，如下所示：
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>
为了防止显示日历日，您只需在活动的 css 文件中使用以下代码将其显示属性设置为无：
.ui-datepicker-calendar {
display: none;
}
正如上面 Daniel Slazlay 所指出的，使用月/年下拉菜单或箭头图标导航不会更改 p:calendar 控件的内部日期值。为了实现这一点，当触发«regenerate calendar» 按钮时，将为两个 p:calendar 读取所选月份和年份下拉列表的值。使用此信息，您可以构建格式为“yyyy-MM-dd”的日期字符串，并设置 p:calendar 控件的内部隐藏值 对于月份范围的起始月份，该月的第一天返回，而对于结束月份，则返回该月的最后一天。这是通过以下 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));
}
我希望这可以帮助其他人。
于 2014-11-05T04:40:22.837 回答
2
Primefaces 的最新版本（7.0 版）刚刚添加了您需要的内容：<p:datePicker />. 它的工作原理几乎完全一样，<p:calendar>但可以轻松配置为仅显示月份和年份：
<p:datePicker value="#{managedBean.date}" view="month"
pattern="MM/yyyy" yearNavigator="true" yearRange="1986:2025" />
For example, when a month is selected, its value is stored in a "Date" object, which will have the value:
(If April of 2019 is selected) Mon Apr 01 00:00:00 BRT 2019
In this case, you would只需忽略日、小时、分钟等值并使用所选的月份和年份。
有关更多信息，请阅读文档并查看展示
于 2019-07-03T02:32:32.677 回答
1
//<![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-01T14:07:08.783 回答
0
您可以在模式中设置它，在您的情况下，它将是：
<p:calendar id="test" value="#{bean.date}" pattern="MM.yyyy" />
于 2013-03-25T07:43:29.173 回答
0
我正在阅读，您无法从 Primefaces 的盒子中实现此功能。
https://code.google.com/p/primefaces/issues/detail?id=3453
这个问题很老，但是一个月前的最新评论。所以他们使用这种方法：
还有一种解决方案，只使用<p:selectOneMenu>和使用你需要的东西。
干杯
于 2013-03-25T08:06:42.043 回答
0
您必须添加此块才能使用箭头完成导航：
$(".ui-datepicker-next").click( function(){changeMonthYear(calendar);});
$(".ui-datepicker-prev").click( function(){changeMonthYear(calendar);});
于 2017-01-19T16:31:29.787 回答
0
现在，primeng 日历有一个月份选择器选项，在 p 日历中使用月份作为视图选项。
<p-calendar [(ngModel)]="dateValue" view="month" dateFormat="mm/yy" [yearNavigator]="true" yearRange="2000:2030"></p-calendar>
于 2019-02-14T17:54:05.993 回答
0
您可以使用 p:calendar 上的 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;}
于 2017-03-23T13:46:19.553 回答
0
利用 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基本上，更改或更改时的ajax触发器year是这里的主要功能。不幸的是，由于我无法检索org.primefaces.event.DateViewChangeEvent. 这似乎是一个错误，我刚刚在 Primefaces 论坛上发布了一份报告。当我在那里得到一些反馈时会更新这篇文章。
希望能帮助到你。
于 2017-06-14T08:29:50.910 回答
0
你可以这样做：
XHTML
<p:column>
<p:calendar id="data" locale="pt_BR" navigator="true" showOn="button"
pattern="yyyy-MM-dd" mode="inline" view="month"
maxdate="#{cadastroResumoPorUnidadeBean.dataAtual}"
styleClass="escolha-data"
value="#{cadastroResumoPorUnidadeBean.dataInicio}">
<p:ajax event="viewChange" process="@this"
listener="#{cadastroResumoPorUnidadeBean.onChangeDataInicio}"
update="calendario"/>
</p:calendar>
</p:column>
CSS
.ui-datepicker-calendar {
display: none;
}
豆
public void onChangeDataInicio(DateViewChangeEvent event) throws ParseException {
dataInicio = new Date();
SimpleDateFormat dateformat = new SimpleDateFormat("dd-M-yyyy");
String inicio = "01-"+event.getMonth() +"-" + event.getYear();
this.dataInicio = dateformat.parse(inicio);
}
它对我有用！
于 2019-05-08T14:16:44.007 回答