Enable Month & Year Selection in MVC igGrid DatePicker

Hello Infragistics community,

I’m using an ASP.Net MVC igGrid. I want my grid to have following behavior

I have a date column in the mvc iggrid to select the start date of a company

column.For(x => x.dtDate).Format(“dd-MMM-yyyy”).HeaderText(“Date”).Width(“15%”); //Date

For the column settings I have this code:

cs.ColumnSetting().ColumnKey(“dtDate”).EditorType(ColumnEditorType.DatePicker).Required(true)

This displays a calendar to select the date but it doesn’t have an option to select the month and year. Otherwise it will be difficult to navigate to particular year and month.

How to achieve this in the my MVC grid.

Any assistance would be greatly appreciated, thanks

Hello Kumar,

In order to be able to select month and year from the datepicker, you should define the following editor options:

datepickerOptions: {
                		changeYear: true,
                    changeMonth: true,
                    }

In your case you should define datepickerOptions for the MVC wrapper.

Please let me know if you need further assistance.

Regards,

Tsanna

Hi Tsanna,

Thanks for the reply.

Could you please provide a sample code for setting the datePickerOptions for MVC Wrapper.

I am unable to set it.

Thanks,

Uday

Hello Kumar,

Here is the piece of code that sets the datepicker options in MVC, for your reference:

features.Updating().ColumnSettings(cs =>
			{
				cs.ColumnSetting().ColumnKey("StartDate").EditorType(ColumnEditorType.DatePicker).Required(true).EditorOptions("datepickerOptions: {changeYear: true, changeMonth: true}");
			});

Hi Tsanna,

Is it Possible to specify minDate and maxDate as part of datePickerOptions. How can i specify minDate and maxDate along with change Year and Month functionality.

Thanks,

Kumar G

Hi Tsanna,
 Is it Possible to specify minDate and maxDate as part of datePickerOptions.

Hello Kumar,

I believe you can, because datepickerOptions extend the jQuery datepicker options. Please note that our igDatePicker can use all jQuery datepicker options except those for date formatting.