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

Question

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

我在 ExtJs 中找到的是DatePicker 和 This sample with pickers

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

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

我不是 ExtJs 方面的专家，任何人都可以向示例展示如何在 Asp Net MVC 中通过 ExtJs 处理日期吗？

Answer 1

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

对于不在面板内的 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 页面将需要具有 2 个带有 id 的输入:我们在上面定义的 tbStartDt 和 tbEndDt:

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

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