Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
70
DatepickerOptions in MVC View
posted

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

  • 1300
    Verified Answer
    Offline posted

    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

    4643.Home.zip

  • 0
    Offline posted

    @(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