We Keep Coding

Rebind DatePicker Object To HTML Element

I've a SyncFusion date picker that I am using as follows:
var datepicker = null;
$("#datepicker").hide();
$("#click").click(function(){
$("#datepicker").show();
datepicker = new ej.calendars.DatePicker({ width: "255px" });
datepicker.appendTo('#datepicker');
});
$("#clickAgain").click(function(){
$("#datepicker").hide();
datepicker.destroy();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<input id="datepicker" type="text">
<a id="click">Click Here</a>
<!--<a id="clickAgain">Click Again</a>-->
This thing works but I am trying to do one thing here, though not sure if it's possible. When I click on Click Here anchor tag, it binds the date picker to HTML element. When I click again, it rebinds and gets repeated. So I am trying to reinitialize it and then bind to the HTML element once. Tried to use destroy() from SyncFusion documentation and it destroys when I use a separate click event.
My concern is to clear the appended element and rebind the date picker object using Click Here click event. Any way I can do it?

You can try calling refresh method, which destroys and renders the control again.
Reference: https://ej2.syncfusion.com/javascript/documentation/api/datepicker#refresh
$("#click").click(function () {
if (datepicker) {
datepicker.refresh();
} else {
$("#datepicker").show();
datepicker = new ej.calendars.DatePicker({ width: "255px" });
datepicker.appendTo('#datepicker');
}
});
Else you can check the instance and then clear the appended element using destroy and render it again as per the below code.
$("#click").click(function () {
if (datepicker) datepicker.refresh();
$("#datepicker").show();
datepicker = new ej.calendars.DatePicker({ width: "255px" });
datepicker.appendTo('#datepicker');
});

How to get the value of date picker on change in jquery

I need to get the value of date onchange ,
Here is the code
<div class="input-daterange" data-date-format="dd/mm/yyyy">
<label>Date </label>
<input id="value_date" class="form-control" name="start" type="text" />
</div>
Here is my jquery
$('#value_date').change(function() {{
var valuefirstone = document.getElementById('#value_date').value;
alert(valuefirstone);
}
</script>
Onchange the function is not calling, I have just create alert on change but its not working

try this ;
$('#value_date').datepicker().on('changeDate', function (ev) {
var valuefirstone = $(this).val();
alert(valuefirstone);
});
Remove the .datepicker() if it's done earlier

it is better to use jquery built in functions inside a jquery context. Also your jquery change function syntax and javascript code to get the value from date picker is wrong.
change your jquery change function to:
$(document).ready(function(){
$('#value_date').change(function() {
var valuefirstone = $(this).val();//use jquery built in functions
alert(valuefirstone);
});
});
Make sure you wrapped the change function with document ready fn

you can easily do with below code:
$("#value_date").on('change', function(event) {
event.preventDefault();
alert(this.value);
/* Act on the event */
});

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/

Launch jQuery .datepicker from Another JS Function

I need to launch .datepicker only if the text entered into a field does not meet a set of criteria. But, I can not figure out how to launch .datepicker other than directly from a field getting focus or a button being presses.
What I'm trying to do...
The HTML
<input type="text" id="userDate" name="userDate" style="width: 100px;" onblur="checkDate(this.id);" />
The JS
function checkDate(theId)
{
var enteredValue = document.getElementById(theId).value;
var checkedValue = evaluateValue(enteredValue); // this checks to see if the text meets the criteria
if (checkedValue == null)
{
// this is where I want to call the .datepicker to have the calendar show up
$("#userDate").datepicker();
}
else
{
document.getElementById(theId).value = checkedValue;
}
}
I know, this would be easier if the calendar just came up when the text field gets focus. But, this is not the way the client wants it to work. They want to accept user input as long as it falls into their desired formats. If not, then they want the calendar and a default, forced format.
Thanks.

If you are using the datepicker in jQuery UI, you would show the datepicker like this:
$("#userDate").datepicker("show");
Edit:
Your code would probably have to look something like this:
$(function(){
$("#userDate").datepicker(); // <-- Create the datepicker on load
});
function checkDate(theId)
{
var enteredValue = document.getElementById(theId).value;
var checkedValue = evaluateValue(enteredValue); // this checks to see if the text meets the criteria
if (checkedValue == null)
{
// this is where I want to call the .datepicker to have the calendar show up
$("#userDate").datepicker("show"); // <-- Show datepicker when needed
}
else
{
document.getElementById(theId).value = checkedValue;
}
}

Okay, after many cans of Pepsi Max and even more hours of research, trial and error; this is what I've come up with... and it meets my needs.
$(document).ready( function()
{
$("#userDate").blur(function()
{
var convertResults = convertMyDate('userDate'); // call to my code that checks the date for accepted formats
if (convertResults == null)
{
$("#userDate").datepicker({
changeMonth: true,
changeYear: true
});
$("#userDate").datepicker("show");
}
else
{
document.getElementById('userDate').value = convertResults.toString('MM/dd/yyyy');
}
});
});
The only problem now is that the client's form has 14 date fields. So... copy this 13 more times in my code!? I just don't have the time right now to figure out a way to roll all this into a single function that will initiate all of them in a loop...
Any suggestions on that would be appreciated.