Как сделать ExtJs DatePicker на моем сайте MVC?

Question

Мне нужен виджет выбора даты через ExtJs на моих страницах, который работает следующим образом .

Все, что я нашел в ExtJ, это DatePicker и Этот образец со сборщиками

Проблема в том, что стандартный DatePicker выглядит просто как огромный календарь с кнопкой «сегодня». Образец дает средство выбора, которое выглядит так, как я хочу (поле текстового поля и календарь по запросу), но оно работает на панели здесь. Я не хочу создавать панель, чтобы показать только один DatePicker. Этот пример очень хорошо подходит - мне тоже нужны startdate и enddate, но эта панель достаточно проста. Я просто хочу два отдельных сборщика без панели.

Насколько мне известно, идея стандартного средства выбора даты заключается в том, что вы создаете текстовое поле на своей странице, а затем создаете сценарий ExtJs, в котором показывается средство выбора даты при нажатии на текстовое поле или что-то в этом роде.

Я не специалист по ExtJ, может кто-нибудь показать пример работы с датами через ExtJ в Asp Net MVC?

Answer 1

Если вам не нужна кнопка Today в ваших средствах выбора даты, вам просто нужно использовать опцию конфигурации showToday при создании DatePicker.

И чтобы DatePickers не находились внутри панелей, просто не используйте FormPanel в примере и создайте datePickers, определяющие параметр конфигурации applyTo :

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 входа с идентификаторами: tbStartDt и tbEndDt, которые мы определили выше:

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

Вы можете проверить пример, который я сделал в jsfiddle.net / CrfvC / 26 / .