I have a function which i initialize while loading a page
function initializeDateTimePickerWithDateRestriction(minimumDate, maximumDate) {
if (minimumDate == null) {
minimumDate = "1/1/1991";
}
if (maximumDate == null) {
maximumDate = "12/31/2099";
}
alert(minimumDate);
alert(maximumDate);
$('.DatePickerWithTime').datetimepicker({
ampm: true,
timeFormat: 'h:mm TT',
stepMinute: 15,
minDate: minimumDate,
maxDate: maximumDate
});
$('.DatePickerWithTime').val('');
}
and in the document ready part i call it as
initializeDateTimePickerWithDateRestriction(null, new Date());
But on the click event i again want to initialize some new values to this textbox without refreshing th epage.
How can i do that?
Please help me.
$('.DatePickerWithTime').datetimepicker({
ampm: true,
timeFormat: 'h:mm TT',
stepMinute: 15,
minDate: minimumDate,
maxDate: maximumDate,
minDateTime: minimumDate,
maxDateTime: maximumDate,
});
This is the solution for the question.
Related
I'm using FullCalendar with the Scheduler plugin and I'm trying to get the new resource id for the event that has just been dragged or resized. If I console.log the event argument of eventResize or eventDragStop functions I always get the initial resource id of the event.
Any idea how can I achieve this?
Bellow is the code I have so far:
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
locale: 'ro',
header: {
left: '',
center: 'title',
right: ''
},
defaultView: 'agendaDay',
views: {
agenda: {
titleFormat: 'dddd, D MMMM'
}
},
minTime: '07:00:00',
maxTime: '24:00:00',
slotDuration: '00:30:00',
slotLabelFormat: 'HH(:mm)',
allDaySlot: false,
resources: {
url: '/some/endpoint/here',
type: 'POST',
data: {
type: $('#type').val()
}
},
events: '/some/other/endpoint/here',
eventOverlap: false,
eventConstraint: {
start: '07:00',
end: '24:00'
},
dayClick: function(date, jsEvent, view, resourceObj) {
var check = moment(date).format('YYYY-MM-DD');
var today = moment(new Date()).format('YYYY-MM-DD');
if (check >= today) {
// Some logic here
}
},
eventClick: function(calEvent, jsEvent, view) {
var check = moment(calEvent.start).format('YYYY-MM-DD');
var today = moment(new Date()).format('YYYY-MM-DD');
if (check >= today) {
// Some logic here
}
},
eventResize: function(event, delta, revertFunc, jsEvent, ui, view) {
console.log('Resize', event, jsEvent);
},
eventDragStop: function(event, jsEvent, ui, view) {
console.log('Drag', event);
}
});
The documentation for "eventDragStop" (https://fullcalendar.io/docs/eventDragStop) explicitly states
It is triggered before the event’s information has been modified
So that explains why the resource ID has not changed when you log it from there.
The callback you want to be handling instead is "eventDrop" (https://fullcalendar.io/docs/eventDrop), which is triggered when the dragging stops and the event data has been updated to reflect its new location.
For example:
eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) {
console.log("Resource: " + event.resourceId);
}
should get you the information you want.
Obviously if you only resize an event that cannot change the resource it belongs to, so that situation is not relevant to your issue.
I use drblue:fullcalendar. Display works fine but I cannot get any kind of event to work. I have tried different ones. In the following code snippet I have tried the loading event:
Template.Schedule.helpers({
calendarOptions: {
// Standard fullcalendar options
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
slotDuration: '01:00:00',
minTime: '07:00:00',
maxTime: '22:00:00',
lang: 'en',
defaultView: 'agendaWeek',
contentHeight: 500,
firstDay: 1,
timeFormat: 'HH:mm',
timezone: 'UTC',
selectable: true,
// Function providing events reactive computation for fullcalendar plugin
events: function(start, end, timezone, callback){
var events = [];
Assignments.find().map(function(doc){
var startTimeHours = Number(doc.time.substr(0, 2));
var startTimeMinutes = Number(doc.time.substr(3, 2));
var startDateTime = new Date(doc.date);
startDateTime.setHours(startDateTime.getHours() + startTimeHours);
startDateTime.setMinutes(startDateTime.getMinutes() + startTimeMinutes);
var endDateTime = new Date(doc.date);
var effort = doc.state == 'finished' ? doc.realEffort : doc.effort;
endDateTime.setHours(startDateTime.getHours() + effort);
endDateTime.setMinutes(startDateTime.getMinutes());
var getColorForState = function(state)
{
switch(state)
{
case 'finished': return '#00bb00';
}
return '#1197C1';
};
var getBorderColorForState = function(state)
{
switch(state)
{
case 'finished': return '#009900';
}
return '#004781';
};
return{
id: doc.title,
start: startDateTime,
end: endDateTime,
title: doc.title,
backgroundColor: getColorForState(doc.state),
borderColor: getBorderColorForState(doc.state)
}
}).forEach(function(event){
events.push(event);
});
callback(events);
},
// Optional: id of the calendar
id: "calendar1",
// Optional: Additional classes to apply to the calendar
addedClasses: "col-md-12"
// Optional: Additional functions to apply after each reactive events computation
}
});
Template.Schedule.events({
loading: function(isLoading, view){
console.log('hi');
}
});
No JS error on client or server and no log entry, either. I have also tried dayClick, select and clickEvent but I do not get any log entry. If I put an alert into it I also do not receive anything.
Not sure why downvoted, if you need more information or details, please provide it.
Anyways, I was able to solve it. There was some "wrong" code out there and I did not find any example, but it works when I just add the corresponding event to the options, i.e.:
Template.Schedule.helpers({
calendarOptions: {
// all the various options
eventClick: function(event, jsEvent, view){
alert(event.title + "\r\n\r\n" + event.description);
},
I have the following requestStart in my kendoDatasource:
requestStart: function (e) {
var oldFilters = e.sender._filter ? e.sender._filter.filters : [],
endDateTime;
$.each(oldFilters, function (index, currFilter) {
if (currFilter.field === 'StatusChangeDate' && currFilter.operator == 'eq') {
endDateTime = new Date(currFilter.value.getYear(), currFilter.value.getMonth(), currFilter.value.getDay(), 23, 59, 59);
oldFilters.push({ field: currFilter.field, operator: 'gt', value: currFilter.value });
oldFilters.push({ field: currFilter.field, operator: 'lt', value: endDateTime });
oldFilters.splice(index, 1);
}
});
if (e.sender._filter) {
e.sender._filter.filters = oldFilters;
}
},
I want to change DateTime filter when it's operator is 'eq', in order to disable filter precision.
But when I modify filter in requestStart like in the code above, it doesn't work. The request sends with old filter.
I don't know what I'm doing wrong. Is there another way to achieve behavior like this?
By the time requestStart is called, the query is already committed to being sent as is. The event is just letting you know but doesn't give you the opportunity to change anything.
Rather than try to sneak in the back way, just call the dataSource's filter() method to filter any way you want. DataSource will filter the data either locally or make a request to the server depending on the value of the serverFiltering option.
var filters = myDataSource.filter() || [],
endDateTime;
$.each(filters, function (index, currFilter) {
if (currFilter.field === 'StatusChangeDate' && currFilter.operator == 'eq') {
endDateTime = new Date(currFilter.value.getYear(), currFilter.value.getMonth(), currFilter.value.getDay(), 23, 59, 59);
filters.push({ field: currFilter.field, operator: 'gt', value: currFilter.value });
filters.push({ field: currFilter.field, operator: 'lt', value: endDateTime });
filters.splice(index, 1);
}
});
// Now apply the new filter to the dataSource.
// This will generate a request if serverFiltering == true.
myDataSource.filter(filters);
One other note, you should try to avoid accessing any property that starts with "_" as in "e.sender._filter". This is generally considered to be a "private" property which could change with the next version. You can get the current filter by calling filter() with no arguments as in the code above. This is another general rule in Kendo, no args mean get a value, args mean set a value.
EDIT
You can also hijack the CRUD requests to modify and/or add parameters using the dataSource's transport.parameterMap property. Note that this method will not modify the dataSource's filter properties. It only changes the request parameters going to the server.
$("#myGrid").kendoGrid({
// Column definitions, etc...
dataSource = new kendo.data.DataSource({
transport: {
// create, read, update, destroy definitions...
parameterMap: function(data, type) {
if ((type === "read") && data.filter && data.filter.filters) {
var filters = data.filter.filters;
for (var index = 0; index < filters.length, index++) {
var currFilter = filters[index];
if (currFilter.field === 'StatusChangeDate' && currFilter.operator == 'eq') {
endDateTime = new Date(currFilter.value.getYear(), currFilter.value.getMonth(), currFilter.value.getDay(), 23, 59, 59);
filters.push({ field: currFilter.field, operator: 'gt', value: currFilter.value });
filters.push({ field: currFilter.field, operator: 'lt', value: endDateTime });
filters.splice(index, 1);
break;
}
});
}
return data;
}
}
}),
});
how to use custom control in Jqgrid for Field. example in add/edit popup I have a date field and i Want use persionDatePiker, How do these settings?
Thanks all,
Yoou need to set edittype to custom and provide custom_element and custom_value functions. Example from documentation:
<script>
function myelem (value, options) {
var el = document.createElement("input");
el.type="text";
el.value = value;
return el;
}
function myvalue(elem, operation, value) {
if(operation === 'get') {
return $(elem).find("input").val();
} else if(operation === 'set') {
$('input',elem).val(value);
}
}
jQuery("#grid_id").jqGrid({
colModel: [
{
name:'price',
editable:true,
edittype:'custom',
editoptions:{
custom_element: myelem,
custom_value:myvalue
}
},
//...
]
});
</script>
But in order to integrate e.g. jQuery UI Datepicker I used the following code:
{
name:'startTime',
label: 'Start time',
editable: true,
editoptions: {
dataInit: function (e) {
$(e).datetimepicker({});
}
}
}
See Common Editing Properties for details.
I want to prevent my user from typing letters inside a numeric field.
I saw that there is an option of: editrules:{number:true}, but this option will let the user click any key the user wants and only when row saved it will alert for illegal input. This is not good option for me. I want to prevent from the start the typing of keys that are not numbers (for example in a regular input I can use jQuery's .numeric()).
How can this be done?
{name:'actualNo',index:'actualNo',editable:true, edittype:"text", width:150,editoptions:{
size: 15, maxlengh: 10,
dataInit: function(element) {
$(element).keyup(function(){
var val1 = element.value;
var num = new Number(val1);
if(isNaN(num))
{alert("Please enter a valid number");}
})
}
}},
I don't use jQuery.numeric plugin myself, but I suppose you should use dataInit property of editoptions for the corresponding grid column:
editoptions: { dataInit: function (elem) {
$(elem).numeric(/*some optional parameters*/);
}
}
or in case of some trouble in the form
editoptions: { dataInit: function (elem) {
setTimeout(function(){
$(elem).numeric();
}, 100);
}
}
I hope it will work.
{name:'rate',index:'rate', align:"left", width:'150',editable:true,
edittype:"text", editoptions:{
size: 25, maxlengh: 30,
dataInit: function(element) {
$(element).keypress(function(e){
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
}
}
},