DatepickerOptions in MVC View

I am trying to add the code to make a datepicker into just a month and/or year picker in a MVC View, not via javascript. I have code that looks like this:

@(Html.Infragistics().DatePicker()
.ID(EndMonthId)
.Width(“100px”)
.Height(24)
.Value(month != null ? month : DateTime.Now.Month)
.DateDisplayFormat(“MMMM”)
.DateInputFormat(“MMMM”)
.HtmlAttributes(new System.Collections.Generic.Dictionary<string, object>() { { “class”, “financialDashboardDatePicker” } })
.TextAlignment(TextEditorTextAlignment.Left)
.DataMode(DateEditorDataMode.DisplayModeText)
.MinValue(new DateTime(1753, 1, 1))
.ValidatorOptions(options =>
{
options.Required(true, “*”);
options.Date(true, “*”);
options.OnBlur(false);
options.OnChange(false);
options.OnSubmit(false);
}
)
.Render()
)

I have tried .Datepickeroptions(x) but can find nowhere how I define x for month/date only. I have tried adding code you supplied elsewhere for this issue:

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

However, it won’t accept featires, .Features. or any other variation on that like it would in an iggrid. Please help me on the proper syntax.

– John Cannon

Hello John,

After investigating this further, I determined that year and month selection could be enabled by setting the datePicker options “changeYear” and “changeMonth” as follows:

@(Html.Infragistics().DatePicker()

                    .ID("EndMonthId")

                    . . .

                    .DatePickerOptions(options =>

                    {

                        options.ChangeMonth(true);

                        options.ChangeYear(true);

   options.AddClientEvent("onChangeMonthYear", "onChangeMonthYear");

                    })

Additionally, the color of the dropdown items should be set to black:

<style>

        .ui-datepicker-month {

            color: black;

        }

        .ui-datepicker-year {

            color: black;

        }

</style>

However, new date is not selected only by changing the month or the year, this is why I have bound a method to the onChangeMonthYear event, where new Date is selected programmatically:

function onChangeMonthYear(year, month) {

            $("#EndMonthId").igDatePicker("selectDate", new Date(year, month, 1));

 

        }

Additionally, if the calendar should not be displayed, what I could suggest is setting the display to none:

.ui-datepicker table {

            display: none;

        }

Below I am attaching a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.

Regards,
Monika Kirkova,
Infragistics

@(Html.Infragistics().DatePicker()

.ID("EndMonthId")

. . .

.DatePickerOptions(options =>

{

options.ChangeMonth(true);

options.ChangeYear(true);

options.AddClientEvent("onChangeMonthYear", "onChangeMonthYear");

})

Additionally, the color of the dropdown items should be set to black:

Replaced these codes and working fine for me

thanks