正文 

当前位置： 首页 > 问答 >

如何创建年份选择器下拉菜单

     2023-02-16     116

关键词：

【中文标题】如何创建年份选择器下拉菜单【英文标题】：How to create year picker dropdown 【发布时间】：2020-09-24 12:01:53 【问题描述】：

我想知道如何在 Magnolia 中创建年份选择器下拉字段。

理想情况下，它会列出从当前年份到过去 10 年的年份。

我是 magnolia 的新手，我可以使用硬编码选项创建 Select 字段，但这不是很好的方法，我很难创建动态选项。见：

name: year
fieldType: select
multiselect: false
label: Year
options:
  - name: 2020
    label: 2020
    selected: true
    value: 2020
  - name: 2019
    label: 2019
    selected: false
    value: 2019

有人知道吗？

【问题讨论】：

【参考方案1】：

如果您使用最新版本的 Magnolia 6.2，您可以使用 Ducaz035 提到的数据源。请参阅此处的文档：https://documentation.magnolia-cms.com/display/DOCS62/Select+field

对于以前的版本，这种方式是不可能的。您只能创建自己的字段，注册它并在实现中做任何您想做的事情。在您的情况下，只需覆盖 getOptions 类。

public class YearSelectFieldFactory<D extends YearSelectFieldDefinition> extends SelectFieldFactory<D> 
    
    public YearSelectFieldFactory(D definition, Item relatedFieldItem, UiContext uiContext, I18NAuthoringSupport i18nAuthoringSupport) 
        super(definition, relatedFieldItem, uiContext, i18nAuthoringSupport);
    

    public YearSelectFieldFactory(D definition, Item relatedFieldItem) 
        super(definition, relatedFieldItem);
    

    @Override
    public List<SelectFieldOptionDefinition> getOptions() 
        List<SelectFieldOptionDefinition> res = new ArrayList<>();
        int currentYear = LocalDate.now().getYear();
        for (int i = currentYear - 10; i <= currentYear; i++) 
            SelectFieldOptionDefinition option = new SelectFieldOptionDefinition();
            option.setName(String.format("Year%s", i));
            option.setLabel(String.format("Year %s", i));
            option.setValue(String.valueOf(i));
            res.add(option);
        
        res.get(0).setSelected(true);
        return res;

YearSelectFieldDefinition 只是扩展了 SelectFieldDefinition 类。我们需要它来注册我们自己的字段类型。

要注册字段，请将新的 fieldType 添加到您的模块（或其他模块，没关系）。这是该字段的 YAML 定义：

your-module-name:
  fieldTypes:
    yearSelectField: 
      definitionClass: com.example.fields.YearSelectFieldDefinition
      factoryClass: com.example.fields.YearSelectFieldFactory

现在您可以在对话框定义中使用此字段。设置字段的类：

field:
  name: year
  class: com.example.fields.YearSelectFieldDefinition

【讨论】：

【参考方案2】：

您可以将数据源附加到该字段，并让数据源为您提供使用 Java 的月份。

文档中的一个示例：

listSelect:
  label: Contacts
  $type: listSelectField
  datasource:
    $type: jcrDatasource
    workspace: contacts
    describeByProperty: firstName
    allowedNodeTypes:
      - mgnl:contact

以及直接指向文档的链接： https://documentation.magnolia-cms.com/display/DOCS62/Select+field

【讨论】：

如何在 Jquery Date Picker 中添加请选择月份年份下拉菜单的选项？

】如何在JqueryDatePicker中添加请选择月份年份下拉菜单的选项？【英文标题】：HowtoaddpleaseselectoptionforthemonthyeardropdowninJqueryDatePicker?【发布时间】：2018-08-0607:15:13【问题描述】：我有一个J查询日期选择器，如下所示（单击链接查... 查看详情

如何将滚轮选择器菜单更改为 React Native with Expo 中的下拉菜单？

】如何将滚轮选择器菜单更改为ReactNativewithExpo中的下拉菜单？【英文标题】：HowcanIchangeascrollwheelPickermenutoadropdownmenuinReactNativewithExpo?【发布时间】：2020-11-0815:21:21【问题描述】：我正在尝试使用Expo和React-native-picker创建一个下拉... 查看详情

Bootstrap 日期选择器显示月份和年份菜单

】Bootstrap日期选择器显示月份和年份菜单【英文标题】：Bootstrapdatepickerdisplaymonth&yearmenus【发布时间】：2015-02-2609:16:15【问题描述】：在Bootstrap日期选择器中，我希望在jqueryUidatepicker中使用月份和年份菜单但在Bootstrapdatepicker... 查看详情

JQuery UI Datepicker，在下拉菜单中颠倒年份的顺序

】JQueryUIDatepicker，在下拉菜单中颠倒年份的顺序【英文标题】：JQueryUIDatepicker,reversetheorderoftheyearinthedropdowns【发布时间】：2010-12-0808:52:47【问题描述】：我有一个带有changeyear:true的日期选择器。“年份”下拉菜单将标题显示为200... 查看详情

如何在引导选择选择器中为选项（下拉菜单）设置固定宽度

】如何在引导选择选择器中为选项（下拉菜单）设置固定宽度【英文标题】：HowcanIsetfixedwidthforoptions(dropdown)inbootstrapselectpicker【发布时间】：2018-11-2807:29:35【问题描述】：这是代码<selectclass="selectpickerform-control"data-live-search="tru... 查看详情

在日期选择器中未显示月份和年份下拉列表中的数据

】在日期选择器中未显示月份和年份下拉列表中的数据【英文标题】：Notshowingdatainmonthandyeardropdownindatepicker【发布时间】：2015-09-0422:46:51【问题描述】：我正在使用带有月份和年份值的JQuery日期选择器。但问题是，在月份和年份... 查看详情

Odoo[12.0] : 如何创建下拉菜单并在下拉菜单中显示所有菜单以及选择多个菜单

】Odoo[12.0]:如何创建下拉菜单并在下拉菜单中显示所有菜单以及选择多个菜单【英文标题】：Odoo[12.0]:Howtocreatedropdownandshowallmenusindropdownandalsowillbeselectmultiplemenus【发布时间】：2019-11-0413:44:37【问题描述】：我想在用户创建表单中... 查看详情

如何创建基于另一个下拉菜单的答案出现的下拉菜单

】如何创建基于另一个下拉菜单的答案出现的下拉菜单【英文标题】：Howtocreatedropdownmenuthatappearsbasedonanswerfromanotherdropdownmenu【发布时间】：2012-08-0100:04:55【问题描述】：我正在尝试创建一个页面，您的用户必须在其中做出基于... 查看详情

EXTJS 5 - 仅日期选择器年份和月份

...多（因为我发现了一些关于它的主题），但我仍然不知道如何通过仅显示月份和年份来呈现日期选择器。我想我可以这样做：创建我自己的cuctom组件（但我认为我对Extjs的了解还不足以创建一个显示月份和年份的组件，并且在单... 查看详情

使用 AJAX 选择下拉菜单选择器时遇到问题

...时间】：2021-11-1905:15:08【问题描述】：目前，我正在尝试创建一个页面，在该页面中，我的数据库会在放置事件时更新。更具体地说，我有一个具有拖放功能的页面，我需要的是每当我将特定的div（交易卡）拖放到另一个div（阶... 查看详情

在 Android 中，如何按照材料设计文档的规定创建一个概述的下拉菜单（微调器）？ [关闭]

】在Android中，如何按照材料设计文档的规定创建一个概述的下拉菜单（微调器）？[关闭]【英文标题】：InAndroid,howtocreateanoutlineddropdownmenu(spinner)asspecifiedbythematerialdesigndocumentation?[closed]【发布时间】：2019-05-2900:29:45【问题描述】... 查看详情

如何使用 plotly express 创建线图，其中可以通过下拉菜单选择 pandas 数据框？

】如何使用plotlyexpress创建线图，其中可以通过下拉菜单选择pandas数据框？【英文标题】：HowcanIcreatealineplotwithplotly_express,whereapandasdataframecanbeselectedoveradropdownmenu?【发布时间】：2021-08-1914:31:59【问题描述】：我想创建一个线图，... 查看详情

使用ivx实现移动端单选功能的经验总结

...中值，我们就可以将该值赋给我们设定好的变量。3.循环创建第三种就是使用循环创建，循环创建需要数组来作为数据来源，我们先将数据写入一维数组之中，然后进行数据绑定。至此就可以把选项都创建出来，效果如图。接下... 查看详情

年份的 JQuery Datepicker 下拉列表仅显示单年

】年份的JQueryDatepicker下拉列表仅显示单年【英文标题】：JQueryDatepickerdropdownforyearonlyshowingsingleyear【发布时间】：2013-02-0706:21:20【问题描述】：我在2个字段上有一个日期选择器：开始日期和结束日期。选择开始日期后，结束日期... 查看详情

在下拉菜单中针对特定选择器 jquery 的问题

】在下拉菜单中针对特定选择器jquery的问题【英文标题】：Issuetargetingspecificselectorjqueryindropdwonmenu【发布时间】：2015-06-0508:06:56【问题描述】：我有一个带有jquery的下拉菜单，我想根据下拉菜单中选择的内容以不同的方式修改一... 查看详情

如何创建可搜索的下拉菜单？

】如何创建可搜索的下拉菜单？【英文标题】：Howtocreateasearchabledropdown?【发布时间】：2020-06-2309:48:23【问题描述】：我有一个很长的值列表，我希望通过一个下拉菜单来选择这些值，该下拉菜单可以通过将值键入为文本来搜索... 查看详情

如何在我的日期选择器上启用未来年份？

】如何在我的日期选择器上启用未来年份？【英文标题】：HowcanIenablefutureyearsonmydatepicker?【发布时间】：2021-03-0608:20:33【问题描述】：我在网络开发方面真的很菜鸟，我在我的项目中使用TailwindCSS和AlpineJS，我需要允许用户在我... 查看详情

jquery日期选择器，但日月和年在单独的下拉列表中

...独的下拉菜单。一个代表一天，一个代表月份，一个代表年份。这是我的jquery脚本。<scr 查看详情