KendoUI year and week picker - kendo-ui

I was wondering if is there any posibility to make a kendoDatePicker where you can select only the year ?
Also for weeks in a year is possible to make a kendoDatePicker ?
Thanks.

set both start and depth to "decade" and format to "yyyy"
Declaratively:
<input id="yearpicker" data-role="datepicker" data-start="decade" data-depth="decade" data-format="yyyy" />
Programably:
$("#yearpicker").kendoDatePicker({
start: "decade",
depth: "decade",
format: "yyyy"
});
For weeks, so far I don't see it's supported. Use user voice.

Related

Input mask with only past dates validation

I am using Input mask from this link. My input mask working correctly. But i want validation for past dates only from current date. But i don't get any condition for this.
You can use below yearrange hash for setting up the past date validation.
$("#date_of_birth").inputmask("mm/dd/yyyy", { yearrange: { minyear: 1900, maxyear: 2015, }});

How to set "n" years back date from present date in kendo datepicker?

I want to set 10 years back date from today date in kendo datepicker.
If you want to initialize your date picker with 10 years back date always, then in your HTML it would be something like this:
#(Html.Kendo().DatePicker().Name("myDatePicker").Value(DateTime.Today.AddYears(-10)))
For an example: When we are working with any Bank form applications, the applicant should have minimum 20 years from Today's Date to apply a particular Exam.
So It's Better to give Max-Date as the Day 20 years from Today's Date
It is very easy to set past 'n' number of years date from today date in kendo datepicker.
Find the small snippet below.
var toDate = new Date();
// Here 'n' Excludes number of years from today's Date.
var pastDate= new Date(toDate.setFullYear(toDate.getFullYear()- n));
$("#birthDayDate").kendoDatePicker({
max: pastDate
});

Kendo Datepicker shows wrong format when value is set past max date

I have a pair of Kendo Datepicker fields on a page for Start Date and End Date. The Start Date defaults to today's date and the End Date defaults to today's date a year from now. The user is allowed to pick a date from the Kendo Datepicker calender or enter a date manually.
The Datepicker calendar popup on the End Date field has a 'max' option set so it won't show dates greater than one year from now, but a user can enter a later date manually. If they do so and click Submit on my form, the server-side validation will catch the problem and display the form again with an error.
I want to leave the date the user manually entered in the Datepicker field intact so they can see the source of the problem, but keep the 'max' option in the calendar. But when I set the Datepicker options with a 'max' and a 'value' that's after the max, it shows the value in the wrong format.
Here's how to replicate:
HTML:
<!-- Note future date in 'value' attribute. -->
<input id='dateField' style="width: 100%;" type="text" value="20160618">
JS:
var dateField = $("#dateField");
// The DatePicker's value comes from the dateField's 'value' attribute.
var value = moment(dateField.val(), 'YYYYMMDD').toDate(); // moment().toDate() gives a JavaScript Date object.
// Initialize the date picker options object with some common settings.
datePickerOptions = {
format: 'MM/dd/yyyy',
value: value,
}
// Set the max to be one year from now.
datePickerOptions.max = new Date(moment(new Date()).add('years', 1).toDate());
// Initialize the DatePicker.
dateField.kendoDatePicker(datePickerOptions);
// Here's a workaround I found... After initializing the picker, manually set the value back to the correctly formatted string.
//dateField.val(moment(value).format('MM/DD/YYYY'));
jsFiddle with the above code.
Set the 'value' attribute of the input tag to be a date after the max date and the date will display like this:
Fri Jun 19 2015 00:00:00 GMT-0700 (Pacific Standard Time)
instead of how it should be:
06/15/2015
Is this a Kendo bug or is it broken by design? Or am I goofing up somewhere?
Yeah, it looks like the control is working fine. The issue is that the control fails fast on testing for max, which means it doesn't apply some other options (eg. format). I'd vote for broken by design.
try this...
datePickerOptions = {
format: 'MM/dd/yyyy',
value: moment(value).format('MM/DD/YYYY'),
max: new Date(moment(new Date()).add('years', 1).toDate())
}

How to set categoryAxis.weekStartDay in Line chart

I am using trial version of Kendo UI chart. I was set baseunit ster as "Week". But I have to set wekStartday as Monday. Because in KendoUI by default set to Sunday as start week.
In document suggest that Kendo UI has property categoryAxis.weekStartDay. But I am not able to find this. So, please help me how to set WeekStartDay as Monday instead of Sunday.
Thanks
Please set integer value from 0 to 6 in weekStartDay property.
For Ex:
categoryAxis: {
baseUnit: "weeks",
weekStartDay: 1,
categories: [
]
}
For more information please check below link.
http://docs.kendoui.com/api/dataviz/chart#configuration-categoryAxis.weekStartDay

How can I compare a date field with date.today and display the differance?

I have a table of accounts, each with an expiration date. The expiration date is saved in a date field (day, month and year).
How can I compare this to the current date and display the number of days until the expiration date is reached?
Thanks for any help it's much appreciated!
simple (Date.today - account.expiration_date).to_i will give you the integer number - the difference in days :)
You can convert your components into a target date and use some of the methods in DateHelper to display a human readable distance:
target_date = Date.new(model.year, model.month, model.day)
distance_of_time_in_words(target_date, Date.today)
=> "4 months"

Resources