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
Replaced these codes and working fine for me
thanks