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 {
</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