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");
Related
1) In month view events are visible, instead of those events I want to show the counts only. How this can be achieved in DHTMLX Scheduler JS version.
2) Enable date area click event in month view, not the event_link which directs to day or week view. Just need an event when In month view a date box is clicked I have to load events of that day only on click.
It can be implemented using scheduler.addMarkedTimespan() method. You need to iterate all days during the month, count events for each day by scheduler.getEvents() and then specify the result in the html parameter of addMarkedTimespan.
function addEvCount(){
var startDate = scheduler.getState().min_date;
var endMonthDate = scheduler.getState().max_date;
while(startDate.getTime() < endMonthDate.getTime()){
var endDayDate = scheduler.date.add(startDate, 1, 'day');
var evs = scheduler.getEvents(startDate, endDayDate);
if(evs.length){
scheduler.addMarkedTimespan({
start_date: startDate,
end_date: endDayDate,
html:"<div style='text-align:center;'><b>"+evs.length+"</b></div>",
css: "color"
});
}
startDate = endDayDate;
}
scheduler.updateView();
}
Please check how it works in the snippet.
To hide all events, use also Filtering Events.
scheduler.filter_month = function(id, event){
return false; // event will not be rendered
}
The updated demo only with numbers and without rendered events.
Related docs: addMarkedTimespan(), getEvents(), Filtering.
There is onEmptyClick event which fires when the user clicks on an empty space in the scheduler (not on events). Demo.
I'm using Kendo Grid with editpopup and I have a DateTime field in my Model.
If I set the Max property to my datepicker, last date in datepicker not shown in editpopup field at the time of edit.
If i use below 14 its works like charm.
Code:
#Html.Kendo().DatePickerFor(m => m.DateOfBirth).Max(DateTime.Today.AddYears(-18))).HtmlAttributes(new { placeholder = "dd/mm/yyy", type = "date", #class = "datePicker" })
But Kendo Grid shows properly.Insert Updated Working properly with last date too.
Note:
I'm using MVC with Razor syntax.
Thanks in advance!
I added culture to my code.it works like charm.
#Html.Kendo().DatePickerFor(m => m.DateOfBirth).Max(DateTime.Now.AddYears(-18)).HtmlAttributes(new { placeholder = "dd/mm/yyy", type = "date", #class = "datePicker" }).Culture("en-AU")
And added one more function to set the date at the time of edit.
Kendo Grid :
.Events(events => events.Edit("dateformat"))
Jquery Function
function dateformat(e) {
if(!e.model.isNew())
{
var data =e.model;
var dob=data.DateOfBirth;
if(dob!=null)
{
var parsedDate= kendo.parseDate(dob, "dd/MM/yyyy");
var finalDate = kendo.toString(parsedDate, "d");
var datepicker = $("#DateOfBirth").data("kendoDatePicker");
if(finalDate!=null)
{
datepicker.value(finalDate);
}
}
}
I am using the Datepicker jquery plugin to select the date. When I select the date using the Datepicker, it is displaying using the the format "yy-mm-dd"
However, when I donot select the date, the date is displayed in the "dd/mm/yy"
I tried to change the dateformat in jquery-ui.js from
//dateFormat: "mm/dd/yy", // See format options on parseDate
dateFormat: "yy-mm-dd", // See format options on parseDate
Any idea, how to change the dateformat for display as well ?
2 possibilities:
1) Haven't initialized the dateFormat in your datepicker. So try
$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });
2) Might be handled by other methods(not sure)
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.
I have a Tridion Date control added to a GUI Extension .aspx page I have created.
I've added this to the ASPX page with
<c:Date id="AdjustDate" runat="server"
IsSeparateFields="false" AddClearButton="false" TabIndex="3"></c:Date>
and in my .JS I've added the following to
Give me a handle onto the Tridion Date Control (to select the date values etc.)
c.AdjustDate =
$controls.getControl($("#AdjustDate"),
"Tridion.Controls.Date")
Capture changes in the date (after the user selects OK in the modaldialog)
$evt.addEventHandler(c.AdjustDate, "change",
this.getDelegate(this._onHighlightDateChange));
I capture the event and perform some updates based on the date selected.
However, my GUI extension dialog is smaller in height than when the modal dialog is shown. I'd like to resize my ASPX dialog when the user clicks Select Date and the modal dialog is presented.
I've now captured the event of the user clicking the Select Date button
c.BtnDateSelect = $controls.getControl($("#AdjustDate_selectbutton"),
"Tridion.Controls.Button");
$evt.addEventHandler(c.BtnDateSelect, "click",
this.getDelegate(this._onDateButtonClicked));
However - I can't seem to access the height of the resulting dialog as I can't add any events to tie in
the opening of the dialog itself
the user clicking OK or Cancel (to adjust the height again) or
the modal dialog being closed
Am I missing events to tie into?
I've tried to create a handle to the OK button using
BtnDateOKSelect =
$controls.getControl($("html#DatePickerPopup.popup body center div#buttonContainer div#ButtonOk.tridion"),
"Tridion.Controls.Button");
but the reference (and variations of it) return undefined - possibly as this is in an iframe so the script can't access it?
Any pointers on working out what the events are I can tie into?
How to tie into those events (and when)?
Thanks
You cannot resize a dialog (modal) after it has been open. I wrote an extension where I had a similar problem, when my date picker was over my modal dialog, It look weird, so I made my dialog date picker bigger.
However I wasn't using a date picker control, but a regular html button. Here the code:
So I retrieve button and add the handler to show the date picker:
c.BtnStartDate = $controls.getControl($("#startDate"), "Tridion.Controls.Button");
$evt.addEventHandler(c.BtnStartDate, "click", this.getDelegate(this._onStartDateButtonClicked));
This is the code in the event:
SetDateRange$_onStartDateButtonClicked(event) {
this._setDate(event, "#startDate");
};
And the setDate function:
SetDateRange.prototype._setDate = function SetDateRange$_setDate(event, controlSelector) {
var p = this.properties;
var currentDate = new Date();
var c = p.controls;
p.datePickerPopup = $popup.create(
$cme.Popups.DATE_PICKER.URL, {
width: 550,
height: 350
},
{
date: currentDate,
popupType: Tridion.Controls.Popup.Type.MODAL_IFRAME
}
);
function SetDateRange$DatePicker$onPopupCanceled(event) {
if (p.datePickerPopup) {
p.datePickerPopup.dispose();
p.datePickerPopup = null;
}
}
function SetDateRange$DatePicker$onPopupSubmitted(event) {
var value = event.data.date;
if (value) {
var value = new Date(value);
value = $localization.getFormattedDateTime(value, Tridion.Runtime.LocaleInfo.fullDateTimeFormat);
jQuery(controlSelector).trigger('setdate', [value]);
}
p.datePickerPopup.dispose();
p.datePickerPopup = null;
}
$evt.addEventHandler(p.datePickerPopup, "unload", SetDateRange$DatePicker$onPopupCanceled);
$evt.addEventHandler(p.datePickerPopup, "submit", SetDateRange$DatePicker$onPopupSubmitted);
$evt.addEventHandler(p.datePickerPopup, "close", SetDateRange$DatePicker$onPopupCanceled);
p.datePickerPopup.open();
};
Again, it might not be the solution to your scenario, but this example shows how to open the date picker dialog and use the values it returns, without using the "Tridion Date Picker Control".
Hope this helps.