I have two kendo date pickers. I want to be able to make the other one popup after a date is selected on the first one. Here is my code snippet:
$(this.oParentDiv.find('.datePicker')).kendoDatePicker({
format: "yyyy-MM-dd",
change: function (e) {
if (e.sender.element.context.className.indexOf("fromDate") != -1) {
$(".toDate").val(moment(this._value).format('YYYY-MM-DD'));
//Code to make toDate popup comes here
}
}
});
How can I make the toDate popup after a date has been selected in the fromDate?
There is an open method on date picker instances. You can call it like this from within your change function after you set the second picker's value:
$(".toDate").data("kendoDatePicker").open();
Related
Can anyone suggest how to put date range validations in w2ui grid inline edit (Calendar should display date after start date)
Any hint or suggestions would be appreciated
Thanks
Kindly use following code to put date range validations in w2ui grid inline edit
onDblClick: function (event) {
var editable = w2ui['grid'].columns[event.column].editable
if (editable !== undefined) {
w2ui['grid'].columns[event.column].editable = { type: 'date', start: startdate };
w2ui['grid'].refresh();
}
}
here startdate is date from where you want to set your calender
Iam using spark ui table and I have radio button group (Yes and No)and teaxtarea in each row.I have multipe rows.
My requirement is that if click on Yes ,then the textarea should be hidden only in that row.I wrote below code in load
var table = page.ui.get('/tablecv1/Table1');
var radiobtn = table.ui.getSibling('/tablecv1/Table1/Radio_Button_Group1');
radiobtn._instance.input.onchange = function(event){
if(radiobtn.getData() == "yes"){
radiobtn.ui.getSibling("Text_Area1").setVisible(true)
}
else{
radiobtn.ui.getSibling("Text_Area1").setVisible(false,true)
}
}
As of the now the code is working only for the first row.But for the secomnd row,on change of button it is not even going inside that function,the reason may be the control name is same for all.How can I handle this case where I should be able to click radio btn in any row and specific textarea should be hidden
You could pass the target radio button to the inline function. That would be like this:
this.setAreaVisibility = function(radiobtn) {
radiobtn._instance.input.onchange = function(event){
if(radiobtn.getData() == "yes"){
radiobtn.ui.getSibling("Text_Area1").setVisible(true)
}
else{
radiobtn.ui.getSibling("Text_Area1").setVisible(false,true)
}
}
}
Then on "On Change" event of the radio button element you should call this function like this:
me.ui.invoke("setAreaVisibility", me);
I am using FullCalendar in my project. I used background events, rendering="background". How can I detect if user click on the background events? I try this but it doesnot work since all dates cannot be clicked.
dayClick: function (start, end, allDay, jsEvent, view,color,calEvent) {
if (calevent.rendering==="background") {
alert('Click Background Event Area');
}
else{
$('#modal1').modal('show');
}
if (start.isBefore(moment())) {
$('#calendar').fullCalendar('unselect');
return false;
}
},
Since fullCalendar doesn't expose an "click" type event on background events, the only way I can think of to do this is essentially a DIY approach. The basic idea:
Handle the "select" event
Fetch all the events currently in fullCalenar's memory, using the "clientEvents" method.
Loop through them all and check whether any of them are background events, and if so, whether they overlap with the selected time period. If they do, then that's the event that was clicked on.
I haven't tested this, but it's based on some old code I found, so hopefully you get the idea:
select: function(start, end, jsEvent, view) {
var cal = $("#calendar"); //put the ID of your calendar element here
var evts = cal.fullCalendar('clientEvents'); //get all in-memory events
var selectedEvent = null;
for (i in evts) {
if (evts[i].rendering == "background" && start.isBefore(evts[i].end) && end.isAfter(evts[i].start)) {
selectedEvent = evts[i];
}
}
}
The only flaw in this is that "select" allows selection of a time period, not just a single click, so it could be that the selection is overlapping the background event, and not wholly contained within it. You might be able to adjust the logic a little bit if that doesn't suit you - e.g. to require that both start and end are within the event's boundaries.
im creating a hotel booking system using asp.net. I'm using drop down list to allow user to choose the days and month. Lets say today's date is 15/2. but my system allow user to choose the date before that. How do i prevent user from choosing dates before the current date?
try JQuery DatePicker :-(You'll Find Solution Here)
http://allittechnologies.blogspot.in/2015/05/aspnet-choose-date-by-using-jquery-in-software-it-technologies.html
You can use jquery datepicker and use the on select event.
$(document).ready(function() {
$('#Date').datepicker({
onSelect: function(dateText, inst) {
//Get today's date at midnight
var today = new Date();
today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());
//Get the selected date (also at midnight)
var selDate = Date.parse(dateText);
if(selDate < today) {
//If the selected date was before today, continue to show the datepicker
$('#Date').val('');
$(inst).datepicker('show');
}
}
});
});
This is a jsfiddle demo
On page I have fullcalendar, variable which determines how to display now (all events or events with filter), button for changing variable value and function which applies filter.
Variable (true - show all events, false - with filter):
var isShownWithCancelEvents = true;
Button and it's click function:
$('.fc-header-left').append('<span class="fc-button fc-button-show-with-canceled-events fc-state-default"><span class="fc-button-inner"><span id="show_without_canceled_events" class="fc-button-content">Show with filter</span><span class="fc-button-effect"><span></span></span></span>');
$(".fc-button-show-with-canceled-events").click(function() {
isShownWithCancelEvents = !isShownWithCancelEvents;
prepareEvents();
});
Function prepareEvents():
function prepareEvents(){
if (isShownWithCancelEvents) {
$('#calendar').fullCalendar('refetchEvents');
$(".fc-button-show-with-canceled-events .fc-button-content ").text("Show with filter");
}
else {
$('#calendar').fullCalendar ( 'removeEvents', filter );
$(".fc-button-show-with-canceled-events .fc-button-content ").text("Show all events");
}
}
Filter function:
function filter(event) {
return (event.ec_e_id !== null);
}
Also in fullcalendar I use option:
viewDisplay: function(view) {
prepareEvents();
},
Button is working, problem is with fullcalendar option.
Default view on page is agendaWeek. I open page and click button, variable's value changes to false, filter applies. It's OK. Then I click button "Month" and view changes to month. And I see all events. Then I click button "Week" and view changes to agendaWeek - events are filtered. I click button "Month" again - on this view events are filtered too. So, the problem is when first time changing view to another.
I open page and click button, variable's value changes to false, filter applies. It's OK. Then I navigate left or right (next or previous week), and I see all events. Then I return back, where events were filtered and see all events there.
If I add alert into fullcalendar option
viewDisplay: function(view) {
alert("something");
prepareEvents();
},
everything is OK, and filter works every time.