Comment faire ExtJs DatePicker sur mon site MVC?

Question

J'ai besoin d'un widget datepicker via ExtJs sur mes pages works like this.

Tout ce que je trouve dans ExtJs sont DatePicker et This sample with pickers

Le problème est que standart DatePicker ressemble juste un calendrier énorme avec le bouton « aujourd'hui ». L'exemple donne un sélecteur qui ressemble à ce que je veux (champ de zone de texte et calendrier à la demande) mais cela fonctionne dans le panneau ici. Je ne veux pas créer de panneau juste pour montrer un datpicker. Cet exemple correspond très bien - j'ai besoin de startdate et enddate aussi, mais ce panneau est sux. Je veux juste deux sélecteurs séparés sans aucun panneau. Comme je sais que l'idée de standart datepicker est que vous créez une zone de texte sur votre page, puis vous créez un script ExtJs où vous affichez datepicker sur la zone de texte, cliquez sur ou quelque chose comme ça.

Je ne suis pas expert en ExtJs quelqu'un pourrait-il montrer à l'échantillon comment travailler avec des dates via ExtJs dans Asp Net MVC?

Answer 1

Si vous ne voulez pas le bouton Today dans votre datepickers, il vous suffit d'utiliser le showToday config option sur la création de datePicker.

Et pour les datepickers de ne pas être des panneaux à l'intérieur, il suffit de ne pas utiliser le FormPanel dans l'exemple et créer les datepickers définissant le 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 
}); 

Ensuite, votre html la page devra avoir les 2 entrées avec ids: tbStartDt et tbEndDt que nous avons défini ci-dessus:

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

Vous pouvez tester l'exemple que je fait dans jsfiddle.net/CrfvC/26/.