如何在我的 MVC 站点中制作 ExtJs DatePicker？

Posted 2023-05-07

【中文标题】如何在我的 MVC 站点中制作 ExtJs DatePicker？

【英文标题】：How to make ExtJs DatePicker in my MVC site?

【发布时间】：2011-04-11 00:41:30

【问题描述】：

我需要一个通过 ExtJs 在我的页面上使用 works like this 的日期选择器小部件。

我在 ExtJs 中找到的所有内容都是 DatePicker 和This sample with pickers

问题是标准的 DatePicker 看起来就像一个带有“今天”按钮的巨大日历。该示例提供了看起来像我想要的选择器（文本框字段和按需日历），但它在此处的面板中工作。我不想创建面板只是为了显示一个日期选择器。这个示例匹配得很好——我也需要 startdate 和 enddate，但是这个面板是 sux。我只想要两个没有任何面板的单独选择器。

据我所知，标准日期选择器的想法是您在页面上创建文本框，然后制作一个 ExtJs 脚本，在该脚本中在文本框点击或类似的东西上显示日期选择器。

我不是 ExtJs 方面的专家，谁能展示如何在 Asp Net MVC 中通过 ExtJs 处理日期的示例？

【问题讨论】：

你不能用 CSS 隐藏“面板”吗？

【参考方案1】：

如果您不想在日期选择器中使用Today 按钮，您只需在创建日期选择器时使用showToday config option。

对于不在面板内的 DatePickers，请不要在示例中使用 FormPanel 并创建定义 applyTo config option 的 datePickers：

var startdt = new Ext.form.DateField(
    applyTo: 'tbStartDt', // <-- here you say where it must be rendered
    fieldLabel: 'Start Date',
    name: 'startdt',
    id: 'startdt',
    vtype: 'daterange',
    endDateField: 'enddt', // id of the end date field
    showToday: false
);

var enddt = new Ext.form.DateField(
    applyTo: 'tbEndDt', // <-- here you say where it must be rendered
    fieldLabel: 'End Date',
    name: 'enddt',
    id: 'enddt',
    vtype: 'daterange',
    startDateField: 'startdt', // id of the start date field
    showToday: false
);

那么您的html 页面将需要具有我们上面定义的 id 的 2 个输入：tbStartDt 和 tbEndDt：

Start Date: <input id="tbStartDt"></input>
End Date: <input id="tbEndDt"></input>

你可以测试我在jsfiddle.net/CrfvC/26/做的例子。

【讨论】：

非常感谢。你的样本对我很有帮助。

我知道这已经晚了..但这在 Ext JS 4.2 中仍然有效吗？

@rahsta9 是的。只需检查我发布的 jsfiddle 并更改导入的 Ext JS 版本，您就会看到它与新的日期字段一起工作。