When I open the DatePicker with a Month picker on the left navigation, there is no January option, you have to select the year which represents JAN; this is confusing to my users. I'd like to see the year when I scroll down, and see a JAN below 2020, 2021, etc.
You can use the kendoCalendarNavigationItemTemplate template to customize the way the navigation entries are shown.
Here's a simple example that adds " Jan" after the year number:
#Component({
selector: 'my-app',
styles: ['/deep/ .k-calendar-navigation .k-content li { padding: 0; }'],
template: `
<kendo-calendar>
<ng-template kendoCalendarNavigationItemTemplate let-title>
{{isNaN(title) ? title : title + " Jan"}}
</ng-template>
</kendo-calendar>
`
})
class AppComponent {
public isNaN = isNaN;
}
Related
I have a requirement to set default Month and Year in multiple mat calendars using Angular.
Created Result :
Expected Result :
As Material Documenation suggets you can provide value to a startDate and startView.
In your situation you might use following:
import { Component } from '#angular/core';
/** #title Datepicker start date */
#Component({
selector: 'datepicker-start-view-example',
templateUrl: 'datepicker-start-view-example.html'
})
export class DatepickerStartViewExample {
startDate = new Date(2021, 0, 1);
}
Initializing startDate in your component
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="month" [startAt]="startDate"></mat-datepicker>
</mat-form-field>
And adding startAt property to your HTML, and giving startView property value of month to open up DatePicker with a month selection.
I have to make a select menu in react but there is an extra couple functions it needs to have that I haven’t been able to find on the first 50 links of google. (I’m not googling the right thing obviously cause idk what it’s called).
Details:
A select menu that, once an item is selected, carries the item far below the select menu so that the item can be manipulated further. For example, I want to select multiple ingredients and then have them displayed on the same page, in order of selection, and then be able to enter an amount in a text field that is next to the ingredient that has been selected.
Process:
Select paprika (remove paprika from select menu because there is no need to select it again) > see paprika appear far below select menu > enter amount of paprika in text field tied to back end > repeat for other ingredients.
Any help would be greatly appreciated. Even if you just tell me what to google.
Thank you all,
Matt
I tried to write this up in JSFiddle but it was tripping out on me.... Here should be an Almost working example with the same approach that Joss mentioned. I think you'll be able to get the idea from it
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
selected: [],
};
}
select(e) {
const { value } = e.currentTarget;
let { selected } = this.state;
if(selected.contains(value)) {
selected = selected.filter((val) => val !== value);
} else {
selected.push(value);
}
this.setState({
selected,
});
}
render() {
const ret = []; //Just using this to map over to create options
for(i = 0; i < 5; i++) {
ret.push(i);
}
return (
<div className="container">
{ ret.map((i)=>(
<div
onclick={this.select}
value={i}
className={this.state.selected.contains(i) ? 'selected' : null}>
{i}
</div>
)}
</div>
);
}
}
ReactDOM.render(
<Demo />,
document.getElementById('container')
);
I would have an array stored in state that would contain all selected ingredients, which would be updated each time a new ingredient is selected (using onChange). I would then simply use this array to influence what is displayed on the rest of the page.
is there any configuration in the control to show 5% on focus too instead of 0.05,
for percentage its right to show 0.05 as value and on focus out it displays 5% but if there is a configurable switch to do the show 5% both times other than writing custom focus and blur events
The built-in number formatting allows to escape the '%' symbol, thus skipping the default value * 100 behavior.
Here is how you can do this:
#Component({
selector: 'my-app',
template: `
<kendo-numerictextbox
[value]="value"
[format]="format"
></kendo-numerictextbox>
`
})
export class AppComponent {
public value: number = 5;
public format: string = "#.# \\%";
constructor(public intl: IntlService) {}
}
Runnable demo: http://plnkr.co/edit/Ba05nP4LCgjuKjssSJzE?p=preview
More details about the formats can be found in the kendo-intl repo:
https://github.com/telerik/kendo-intl/blob/master/docs/num-formatting/index.md#custom
I want to bind the kendo-dropdownlist to a specific class. Essentially I need to change the appearance of the control based on certain state of the form (e.g. error, required, etc). The logic in the model determines which classes are applied to the control.
If the model is 'error-state' then add CSS to put a box around it, if required, change border to a different state, and other business rules.
How do I programmatically bind CSS classes to a kendo-dropdownlist?
I have tried
[ngClass]="class_list_in_model"
-- and --
class="class_list_in_model"
For my text box input controls I am using [ngClass]="someproperty_in_model" and that works.
You can use an [ngClass] binding for the <kendo-dropdownlist> component:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<kendo-dropdownlist [ngClass]="ddl_state" [data]="listItems">
</kendo-dropdownlist>
`,
styles: [".error-state { box-shadow: 0 0 3px 3px red; }"]
})
export class AppComponent {
public ddl_state: string = "error-state";
public listItems: Array<string> = ["Item 1", "Item 2", "Item 3"];
}
Here is a plunkr demo that shows this in action.
Problem: scroll to a specific location in a jQuery dialog
I have a datepicker inline on my site which shows the present month calendar.
If the user clicks on any of the dates I am showing a list of calendar events coming from a Feed.
The code is as below:
<div id="datepicker" style="font: 80% 'Trebuchet MS', sans-serif;"></div>
<script type="text/javascript">
var caldate;
$("#datepicker").datepicker();
$("#datepicker").change(function() {
caldate = $(this).val();
$("#dialog").dialog({
bgiframe: true,
maxHeight: 450,
width: 600,
modal: true,
draggable: true,
resizable: false,
position: 'center',
show: { effect: "fade", duration: 600 },
hide: { effect: "fade", duration: 600 }
});
});
</script>
<div id="dialog" title="Calendar Events">DisplayFeed("Calendar Events")</div>
DisplayFeed retrieves data from a html helper class and the data is show properly.
Now the hurdle is when the user selects a particular date in datepicker inline.
I need to scroll to the events occurring on a selected date from the list in dialog.
I tried to get the html inside the div dialog. Where as I am getting the error as undefined when I try document.getElementByID("#dialog").innerHTML to compare the dater with caldate captured during the selection.
Any idea's to put me in the correct direction would be of a great help.
Thank you.
Solved the issue by adding a special div ID generated by event date (Convert date to Linux time stamp and added to div as ID), For each event.
Then scrolling to the event occurring on the selected date, by converting the selected date to Linux time stamp and using document.getElementById(linuxtimestamp.toString()).scrollIntoView() in javascript.