How to make ExtJs DatePicker in my MVC site ?

Question

Hi. 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 proper Config Option on the datePicker creation.

And for the DatePickers not be inside panels then instead of creating the FormPanel like in the example you can first create the datePickers and then use the applyToMarkup method to render them in your page:

var startdt = new Ext.form.DateField({
    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({
    fieldLabel: 'End Date',
    name: 'enddt',
    id: 'enddt',
    vtype: 'daterange',
    startDateField: 'startdt', // id of the start date field
    showToday: false
});

startdt.applyToMarkup('tbStartDt');
enddt.applyToMarkup('tbEndDt');

Your html page will have to have the 2 inputs with ids: tbStartDt and tbEndDt:

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

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