How to make ExtJs DatePicker on my MVC site?

Question

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

All I found in ExtJs is DatePicker and This picker example

The problem is that the standard DatePicker looks like a huge calendar with the Today button. The sample gives a picker that looks like I want (text box and calendar on request), but it works in the panel here. I do not want to create a panel to show a single date. This sample fits very well - I need to start and finish too, but this panel is sux. I just need two separate collectors without any panel.

As I know, the idea of ​​a standard datepicker is that you create a text field on your page and then create an ExtJs script where you show the datepicker on the text field or something like that.

I'm not an expert in ExtJs, can anyone show an example of working with dates through ExtJs in Asp Net MVC?

Answer 1

If you do not want the Today button on your datepickers, you just need to use the showToday option on datePicker.

And so that the DatePickers are not inside the panels, just do not use the FormPanel in this example and create datePickers that define applyTo config :

 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 should have 2 inputs with identifiers: tbStartDt and tbEndDt , which we defined above:

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

You can check the example that I did at jsfiddle.net/CrfvC/26/ .