Could any one please help me to restrict Sencha Touch datepicker not displaying / allowing future dates in the desired datepicker field.
Please
It can be implemented as follows,
{
xtype : 'datepickerfield',
label : 'date',
picker : {
yearFrom : 2000
}
}
I usually use an override for changes like this. Otherwise you need to change it for all date pickers across the app.
Ext.define('App.override.picker.Date', {
override: 'Ext.picker.Date',
config: {
yearFrom: 1970,
yearTo: 2070, // you can use a fixed number or: new Date().getFullYear() + 10,
monthText: 'Month',
dayText: 'Day',
yearText: 'Year',
slotOrder: ['month', 'day', 'year'],
doneButton: true
}
});
You can use the following configurations to restrict year input.
Ext.create('Ext.picker.Date', {
yearFrom: 2000,
yearTo : 2015,
//or you can use
minValue: new Date(1980,1,20),
maxValue: new Date()
});
Also check the setYearTo() and updateYearTo() methods.
The component doesn't allow to restrict actual month and day input but you can validate it afterwards.
Related
I want to be able to change my column header dynamically triggered by year picker onChange, but I can't find the proper style to handle it.
I've tried to modify with a check on the inspect element, but it also didn't work.
And my code:
$("#monthpicker").kendoDatePicker({
start: "year",
depth: "year",
format: "yyyy",
dateInput: true,
change: function() {
var year = kendo.toString($("#monthpicker").data("kendoDatePicker").value(), 'yyyy');
$("#treelist").data("kendoTreeList").dataSource.read({start: year});
$(".k-grid-header th.k-header:first-child").text(year);
}
});
And it should be like this:
(just change on the column header above Month column)
is there anyone experienced with this? Thanks.
Your query .k-grid-header th.k-header:first-child is selecting the wrong headers.
I propose using a headerTemplate with a placeholder, for instance:
headerTemplate: function(x) {
return '<span class="year-goes-here"></span>'
}
And then set the year via:
$("#treelist").find(".year-goes-here").text(2018)
Working example: https://dojo.telerik.com/uXuwIDeK
Is there any way to impose a maxLength text allowed in an ag-grid cell, similar to the one on a normal input element?
<input maxlength="220"/>
No relative documentation was found. Also, no particular situations & more details are needed, in my opinion. Thank you!
agGrid's documentation really isn't clear on this, but it is possible.
agGrid MaxLength
In your column definitions, just add something like this:
this.columnDefs = [
{
field: 'Surname',
minWidth: 100,
editable: true,
cellEditor: 'agLargeTextCellEditor',
cellEditorParams: { maxLength: 200 }
}
Yes, you can control the full flow of input data, but you have to create your own cellEditor for that.
So - it shouldn't be hard to make a simple input validation.
and to achieve your requirements you have to take care of one function within the component:
// Gets called once when editing is finished (eg if enter is pressed).
// If you return true, then the result of the edit will be ignored.
isCancelAfterEnd?(): boolean;
isCancelAfterEnd() {
return !this.isValid(this.eInput.value);
}
isValid(value) {
return value.length <= this.maxLength;
}
Demo
I am using the Kendo UI Scheduler. I have the Agenda view, which is nice. But I would like to show ALL the events in the Calendar - starting from the first Event added and going to the last - and the Agenda view seems to only show 1 week's worth of events.
I would like something that resembles the List view in Outlook.
Is there a way to do this?
There is a discussion on this in the Telerik forums.
In this discussion, an answer is given with a link to a demo in which a custom agenda view is implemented. This view shows all events in the next 31 days:
var CustomAgenda = kendo.ui.AgendaView.extend({
endDate: function() {
var date = kendo.ui.AgendaView.fn.endDate.call(this);
return kendo.date.addDays(date, 31);
}
});
In the scheduler options you add this view using this configuration:
views: [
"day",
{ type: "week", selected: true },
// "agenda",
{ type: CustomAgenda, title: "Custom Agenda" }
]
If you navigate to the date of the first event and change the custom agenda view to show events (last_event_date - first_event_date) days forward, you get what you wanted to do.
I want to display past date in kendo datepicker input ,but want disable the past dates in the calender. For example , I am getting date value as 1st Oct from DB. SO I want to display the same in the date input but when user opens the kendo datepicker , i want to disable the past dates as part of validation. I tried with min: new Date() of kendo datepicker but in this case i am not able to display my data from DB
Can anyone help me on this.
Try below solution.
http://jsfiddle.net/vojtiik/ATmHG/4/
var todaysDate = new Date();
var pastDate = new Date(2013, 1, 1);
var dp = $("#datepicker").kendoDatePicker({
value: pastDate,
min: pastDate,
open: function(e) {
if ( dp.min() == pastDate) {
dp.value(todaysDate);
dp.min(todaysDate);
}
}
}).data("kendoDatePicker");
I am trying to configure my kendoDateTimePicker to show 9am to 6pm only. Is this possible?
I know it's has been a while since this question has been asked. but i will add my response for future reference.
kendo DateTimePicker does not support adding a range to the TimePicker. But you can add your own widget that does that.
(function($) {
var dateTimePicker = kendo.ui.DateTimePicker;
var MyWidget = dateTimePicker.extend({
init: function(element, options) {
dateTimePicker.fn.init.call(this, element, options);
},
startTime: function(startTime) {
var timeViewOptions = this.timeView.options;
timeViewOptions.min = startTime;
this.timeView.setOptions(timeViewOptions);
},
endTime: function(endTime) {
var timeViewOptions = this.timeView.options;
timeViewOptions.max = endTime;
this.timeView.setOptions(timeViewOptions);
},
options: {
name: "CustomDateTimePicker"
}
});
kendo.ui.plugin(MyWidget);
})(jQuery);
Then you can call your CustomDateTimePicker like this :
var datePicker = $("#date-picker").kendoCustomDateTimePicker().data("kendoCustomDateTimePicker");
datePicker.startTime("07:00");
datePicker.endTime("11:00");
jsfiddle demo.
var startDateReference = $('.startDate').kendoDateTimePicker({
format: "dd-MM-yy HH:mm:ss",
value : new Date(),
}).data("kendoDateTimePicker");
startDateReference.timeView.options.min = new Date(2000, 0, 1, 7, 30, 0);
startDateReference.timeView.options.max = new Date(2000, 0, 1, 18, 00, 0);
This is working for me
With Kendo DateTimePicker you can select the min and max dates but not a time range for each day BUT you can do it with TimePicker.
Maybe you can decompose your UI in DatePicker and TimePicker and then choose max and min for conforming your time range.
I just put together this hack, because I felt that Datetime pickers should be used for picking a date and a time instead of having the weird ui of having a datepicker and a timepicker that are used to compose a single value:
$('#NewScheduledDateTime_timeview > li').each(function () {
bool removeTimeCondition = /* code to determine if time should be removed */
if (removeTimeCondition)
$(this).remove();
})
The id of the list will be different. To find it, expand the time list and 'inspect element' of one of the times with your favorite browser's dev tools.
I ought to mention that this is liable to break if the Kendo UI is updated to a newer version. Like I said, it is a hack. But then again, even non-hacky things break when we tried updating the version of Kendo UI. Lessons learned: don't use Kendo UI.