Develop Reference

onchange function is triggered twice

I want to use the values from a JQuery multi datepicker for a different purpose, but for some reason when I did a test on the values I got, I kept getting the same thing twice. Am I missing something?
My Code :
$('.date').datepicker({
multidate: true,
format: 'dd-mm-yyyy'
});
function printDates() {
var dates = document.getElementById("date_input").value;
console.log(dates);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js'></script>
<input type="text" name="dates" class="form-control date" id="date_input" placeholder="Pick the dates " onchange="printDates()">

Use changeDate insstead of onchange as below
$('.date').datepicker({
multidate: true,
format: 'dd-mm-yyyy'
})
.on('changeDate', function(e) {
printDates(); // `e` here contains the extra attributes
});
;
function printDates() {
var dates = document.getElementById("date_input").value;
console.log(dates);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js'></script>
<input type="text" name="dates" class="form-control date" id="date_input" placeholder="Pick the dates " >

https://bootstrap-datepicker.readthedocs.io/en/latest/events.html
Use the change event provided in bootstrap datepicker.

Clone jQuery input date picker element

I am using the jQuery date picker and I want to clone the input element. The jQuery code seems to be working fine when cloning and static element but not with the date picker. Below is the code:
$(function(){
var $button = $('.datepicker-input--checkin').clone();
$('.package').html($button);
});
$(function(){
$('#thedate').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
});
Shown Field :
<input id="thedate" type="text" class="datepicker-input--checkin" /><br />
Hidden Field :
<input id="thealtdate" type="text" class="datepicker-input--checkin" /><br />
<input id="thesubmit" type="button" value="Submit" />
<div class="package">
</div>
Fiddle:

After cloning the input, you would need to initialize the datepicker again on the input.
You could do that by adding a class datepicker on the input intended to have the datepicker, and then initializing the datepicker (after cloning) using:
$(".package .datepicker").datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
Here's the updated fiddle: https://jsfiddle.net/txqepe36/3/
You could simplify the code even further by removing the datepicker initialization through element ID, since you have a class datepicker on both inputs expected to have a date picker control.
Your JS code could be simplified to:
$(function() {
var $button = $('.datepicker-input--checkin').clone();
$('.package').html($button);
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
});
Note that you would need to add a datepicker class to the input. So it should look like:
<input id="thedate" type="text" class="datepicker-input--checkin datepicker" />
Here's the fiddle: https://jsfiddle.net/txqepe36/4/

TypeError: $(...).mask is not a function in date format using jquery

When I am doing the date format to the input text using jQuery, it shows this type of error.
Here is my code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="date" name="bday"/>
$(document).ready(function () {
alert();
$("#date").mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
});

Swapping the scripts by putting in jquery first and then the mask works, as has been posted in the comments. Check the snippet.
$(document).ready(function () {
alert();
$("#date").mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
<input type="text" id="date" name="bday"/>

Jquery datepicker to Input normal text and Date

How can I use the jquery datepicker to input date from an icon and also to take random text from keyboard.
For example
I need a text box to take Exact date (26-10-2015) and also text like since 3 years.
Thanks in advance.

You could just use a hidden input as datepicker with this kind of logic e.g:
$(function() {
$(".date").datepicker({
dateFormat: 'dd/mm/yy',
showOn: "button",
buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
buttonImageOnly: true,
buttonText: "Select date",
onSelect: function(dateText) {
$(this).prev().val(dateText);
}
});
$('input + .date').prev().on('change', function() {
var dateStr = this.value.split(/[\/-]/);
$(this).next().datepicker("setDate", new Date(dateStr[2], dateStr[1] - 1, dateStr[0]) );
})
});
.date {
display: none;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input placeholder="Any text there" />
<input type="text" name="date" class="date" readonly />

Restricting date picker to start from today only hml

I have a datepicker from the internet on my system and I want to restrict a user choice so they are only allowed to pick from today on wards. Below shows my javascript and the HTML form the datepicker is held in is held in.
I tried using minDate : '0' as well as the one that is in the function now.
Any help appreciated.
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy', minDate: +0 });
});
</script>
<div class="form-group">
<label class="col-sm-2 control-label">Start Date:</label>
<div class="col-sm-10">
<input class="form-control" type="date" id="datepicker" name="start_date" required="required">
</div>
</div>

<input type="date" min="2000-01-02">
date input type has an min and max attribute to restrict the date selection.
Here you can get today's date in JavaScript and set that value to your date input type. I just gave an example in above code snippet.

Try this:
var datePicker = $('#datepicker').datepicker({
beforeShowDay: function (date) {
return date.valueOf() >= now.valueOf();
}
});

Please try something like this,
$('#datepicker').datepicker({
dateFormat: 'dd/mm/yy',
minDate: 0
});
demo in jsfiddle