We Keep Coding

Kendo Scheduler DatePicker events

How can I set event for Kendo Scheduler Start and End date DatePicker control?
I want to put some logic when Start or End date changes from DatePicker control but I don't know how to do.
I tried to bind event like below but it is not working for me:
start: {
type: "date",
from: "StartDate",
validation: { required: true },
event: { change: "onStartDateChange('start')" }
}

You can select those DatePicker and add your new function when scheduler triggering edit event.
here is some code snippet you need to add
$("#scheduler").kendoScheduler({
edit: scheduler_edit // add on scheduler edit events
//remove for clarity
});
next you need to find DatePicker components using jquery and bind it with new function. While Scheduler edit popup window provide with 2 type different datepicker you need to select carefully whether as DatePicker or DateTimePicker
function scheduler_edit(e) {
console.log("edit");
var startDatePicker = $("input[name=start][data-role=datepicker]").data().kendoDatePicker;
startDatePicker.bind("change", newFuncForDatePicker);
}
function newFuncForDatePicker(e) {
console.log(this.value());
}
for complete sample, you can look into this dojo

I think Your datePicker is not bind in kendo scheduler.If you have change some date and append this date in another datePicker you can use like this example
This is my edit function you can use edit function or others function as you like:
edit: function (e) {
//get date from event
var getDateFromEvent = e.event.start;//or you can use different types of date like that
var datePicker = $("[name=signUpDueDate]").data("kendoDatePicker");
datePicker.value(getDateFromEvent).format("MM/DD/YYYY"));
datePicker.trigger("change");
};
This is your controller Then you can use html like that
<div class="col-xs-12 col-sm-3 form-group">
<div data-container-for="earlySignupDate">
<input id="signUpDueDate" name="signUpDueDate" class="pull-left" type="text" data-type="date" data-role="datepicker" data-bind="value: SignUpDueDate" />
</div>
</div>

Like this:
<script>
$("#scheduler").kendoScheduler({
edit: function(e)
{
// clone for input[name=end]
e.container.find("input[name=start]")
.data()
.kendoDateTimePicker.bind("change", function(e) {
var value = this.value();
// value has the new datetime
console.log(value);
});
}
});
</script>
Se my dojo: http://dojo.telerik.com/#svejdo1/AWoNU

Onclick change select options - Javascript

I have two date inputs & one select field. When I select dates if both are same select will become blank & if both dates are different select will show "Please select" option selected. I don't know how to do it in JavaScript.
<script>
$(document).on('click', 'input[id*=dateto]', function() {
if($('#dateto').val == $('#datefrom').val) {
$('#div_option').hide();
return false;
}
});
</script>

Try this code , seems to work
$(document).ready(function(){
$('input[id*=date]').on('change', function(){
if($('#dateto').val() == $('#datefrom').val() ) {
$('#div_option').hide();
return false;
}
});
});
There the demos on https://jsfiddle.net/z2p9w944/

How to show only before dates in JTSAGE date picker

I use Jtsage date picker in my mobile application(jquery mobile and phonegap). I want to show only today and before today date(hide future dates ) so i refer this documentaion. In that documentation they mention afterToday,beforeToday,notToday,minDays,maxDays. I use beforeToday for my datebox but it seems not working.
My date picker calling is like:
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true,"afterToday":false,"beforeToday":true,"maxDays": 1}'/>
refer this Fiddle Demo

One way is to add an event to catch the 'set'. If date being set is in the future, popup a message and stopImmediatePropagation:
$('#mydate').on('datebox', function (event, payload) {
if (payload.method === 'set') {
var startdate = new Date();
if (payload.date > startdate) {
window.alert('You cannot select future dates!');
e.stopImmediatePropagation();
}
}
});
Updated FIDDLE

bootstrap datepicker change date event doesnt fire up when manually editing dates or clearing date

<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('.datepicker').datepicker({
format: "yyyy-mm-dd",
}).on('changeDate', function(ev){
// do what you want here
$(this).datepicker('hide');
}).on('changeDate', function(ev){
if ($('#startdate').val() != '' && $('#enddate').val() != ''){
$('#period').text(diffInDays() + ' d.');
} else {
$('#period').text("-");
}
});
});
</script>
So here's what my datepicker looks like. So basically when I change date by clicking mouse it works good, however when I manually change date with keyboard or manually clear the date change date event doesn't get called. Is this a bug or am I doing something wrong here ?

You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.
Try something like this:
$(document).ready(function() {
$('.datepicker').datepicker({
format: "yyyy-mm-dd",
})
//Listen for the change even on the input
.change(dateChanged)
.on('changeDate', dateChanged);
});
function dateChanged(ev) {
$(this).datepicker('hide');
if ($('#startdate').val() != '' && $('#enddate').val() != '') {
$('#period').text(diffInDays() + ' d.');
} else {
$('#period').text("-");
}
}

In version 2.1.5
bootstrap-datetimepicker.js
http://www.eyecon.ro/bootstrap-datepicker
Contributions:
Andrew Rowls
Thiago de Arruda
updated for Bootstrap v3 by Jonathan Peterson #Eonasdan
changeDate has been renamed to change.dp so changedate was not working for me
$("#datetimepicker").datetimepicker().on('change.dp', function (e) {
FillDate(new Date());
});
also needed to change css class from datepicker to datepicker-input
<div id='datetimepicker' class='datepicker-input input-group controls'>
<input id='txtStartDate' class='form-control' placeholder='Select datepicker' data-rule-required='true' data-format='MM-DD-YYYY' type='text' />
<span class='input-group-addon'>
<span class='icon-calendar' data-time-icon='icon-time' data-date-icon='icon-calendar'></span>
</span>
</div>
Date formate also works in capitals like this data-format='MM-DD-YYYY'
it might be helpful for someone it gave me really hard time :)

The new version has changed.. for the latest version use the code below:
$('#UpToDate').datetimepicker({
format:'MMMM DD, YYYY',
maxDate:moment(),
defaultDate:moment()
}).on('dp.change',function(e){
console.log(e);
});

Try this:
$(".datepicker").on("dp.change", function(e) {
alert('hey');
});

I found a short solution for it.
No extra code is needed just trigger the changeDate event. E.g.
$('.datepicker').datepicker().trigger('changeDate');

Try with below code sample.it is working for me
var date_input_field = $('input[name="date"]');
date_input_field .datepicker({
dateFormat: '/dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
}).on('change', function(selected){
alert("startDate..."+selected.timeStamp);
});

This should make it work in both cases
function onDateChange() {
// Do something here
}
$('#dpd1').bind('changeDate', onDateChange);
$('#dpd1').bind('input', onDateChange);

Depending which date picker for Bootstrap you're using, this is a known bug currently with this one:
Code: https://github.com/uxsolutions/bootstrap-datepicker
(Docs: https://bootstrap-datepicker.readthedocs.io/en/latest/)
Here's a bug report:
https://github.com/uxsolutions/bootstrap-datepicker/issues/1957
If anyone has a solution/workaround for this one, would be great if you'd include it.

I have this version about datetimepicker https://tempusdominus.github.io/bootstrap-4/ and for any reason doesn`t work the change event with jquery but with JS vanilla it does
I figure out like this
document.getElementById('date').onchange = function(){ ...the jquery code...}
I hope work for you

I was using AngularJS and AngularStrap 2.3.7 and trying to catch the 'change' event by listening to a <form> element (not the input itself) and none of the answers here worked for me. I tried to do:
$(form).on('change change.dp dp.change changeDate' function () {...})
And nothing would fire. I ended up listening to the focus and blur events and setting a custom property before/after on the element itself:
// special hack to make bs-datepickers fire change events
// use timeout to make sure they all exist first
$timeout(function () {
$('input[bs-datepicker]').on('focus', function (e){
e.currentTarget.focusValue = e.currentTarget.value;
});
$('input[bs-datepicker]').on('blur', function (e){
if (e.currentTarget.focusValue !== e.currentTarget.value) {
var event = new Event('change', { bubbles: true });
e.currentTarget.dispatchEvent(event);
}
});
})
This basically manually checks the value before and after the focus and blur and dispatches a new 'change' event. The { bubbles: true } bit is what got the form to detect the change. If you have any datepicker elements inside of an ng-if you'll need to wrap the listeners in a $timeout to make sure the digest happens first so all of your datepicker elements exist.
Hope this helps someone!

if($('.single_datetime').length){
$('.single_datetime').dateRangePicker({ format: 'DD.MM.YYYY HH:mm', language: 'tr', autoClose: true, singleDate : true, showShortcuts: false, time: {enabled: true}
}).bind('datepicker-change',function(event,obj){caclDay();});
}
Ref: https://www.chamonix-property.com/bower_components/jquery-date-range-picker/

Show div if dates from two inputs with jQuery datepicker do not match

I have 2 inputs which have jQuery UI Datepickers attached to them. Basically a to and from date.
I want to be able to show a div when the 2 dates do not match from the 2 inputs.
I tried playing around with the following code below which shows an alert when 2 inputs match using jQuery .blur
Problem is after some research .blur doesn't respond too well with the datepicker as when you leave the outside of the input to click a date it triggers.
I suppose I need to find a way around this or if anyone knows any other way of seeing if datepicker inputs values are different.
$('input.date').blur(function() {
if ($('#id1').attr('value') == $('#id2').attr('value')) {
alert('Same Value'); return false;
} else {
return true;
}
});
Thanks

Use the change event of the inputs, like in this JSFiddle
$("input.date").on("change", function () {
if ($("#id1").val() === $("#id2").val()) alert("DATES ARE EQUAL! :)");
else alert("DATES ARE NOT EQUAL! :(");
}).datepicker();

onSelect: function(date)
{
if(date == $('#input2').val() && $('#input2').val() != '' )
{
alert('equal dates');
}
}
Use this code in first input