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

Parents
No Data
Reply
  • 1320
    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

Children
No Data