Question

I need a datepicker widget via ExtJs on my pages that works like this.

All I found in ExtJs are
DatePicker and This sample with pickers

The problem is that standart DatePicker looks like just a huge calendar with “today” button. The sample gives picker that looks like i want(textbox field and calendar on demand) but it works in the panel here. I don’t want to create panel just to show one datepicker. This sample match very well – i need startdate and enddate too, but this panel is sux. I just want two separate pickers without any panel.

As I know the idea of standart datepicker is that you create textbox on your page and then you make a ExtJs script where you show datepicker on textbox click or something like this.

I’m not expert in ExtJs could anybody show the sample how to work with dates via ExtJs in Asp Net MVC ?

Answer 1

If you don’t want the Today button in your datepickers you just have to use the showToday config option on the datePicker creation.

And for the DatePickers not to be inside panels, just don’t use the FormPanel in the example and create the datePickers defining the applyTo config option:

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
});

Then your html page will need to have the 2 inputs with ids: tbStartDt and tbEndDt that we defined above:

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

You can test the example I made in jsfiddle.net/CrfvC/26/.