We Keep Coding

Disable Past Dates in Metronic Template datetimepicker plugin

I'm using Metronic Template in my Laravel project.
Here I wanted to disable past dates in datetime picker plugin.
I have searched some blogs and most answers were to use minDate:0 property.
But it seems this doesn't work in Metronic template.
Please help me if you have experience in such case.
Here is my code.
<div class="input-group date">
<input type="text" class="form-control m-input" readonly="" name="followup_deadline" placeholder="Select date & time" id="datePicker">
<div class="input-group-append">
<span class="input-group-text">
<i class="la la-calendar-check-o glyphicon-th"></i>
</span>
</div>
</div>
And javascript/jquery code is here
$("#datePicker").datetimepicker({
todayHighlight: !0,
autoclose: !0,
pickerPosition: "bottom-left",
format: "yyyy-mm-dd hh:ii:00"
});
Other details needed?
Looking forward your kind answer.

Hi I solved it using this format
Javascript
let todayDate = new Date().getDate();
let endD = new Date(new Date().setDate(todayDate));
$('.form_datetime').datetimepicker({
startDate : endD,
weekStart: 7,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
});
As you can see I have created a Date object and assigned it to startDate this then will disable all date behind the current date (even the time).
Html
<div class="input-group date form_datetime">
<input type="text" size="16" id="datee" class="form-control" name="date_needed" required>
<span class="input-group-btn">
<button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>

How to hide the datepicker after selecting a date

I am using bootstrap to pick the date and wants that it hides when user select the date . Here is my datepicker code
<div class="form-group">
<input type="date" class="form-control datepicker" datepicker id="startdate2" placeholder=" Due Date" name="due_date" >
</div>
<div class="form-group">
<input type="date" class="form-control datepicker" datepicker id="startdate" placeholder=" Expire Date" name="expiry_date" >
</div>
And trying to hide by using this code.Could anyone help to aware me how it will work correctly.
<script>
$(document).ready(function () {
$('#startdate2').datepicker({
format: "dd/mm/yyyy",
autoclose: true
});
$('#startdate').datepicker({
format: "dd/mm/yyyy"
}).on('change', function () {
$('.datepicker').hide();
});
});
</script>
Thanks in advance.Any help will be appreciated.

You can use You can use event changedate() :
$('#startdate2').on('changeDate', function(ev){
$(this).datepicker('hide');
});
$(document).ready(function () {
$('#startdate2').datepicker({
format: "dd/mm/yyyy",
autoclose: true
}).on('changeDate', function () {
$('.datepicker').hide();
});
$('#startdate').datepicker({
format: "dd/mm/yyyy"
}).on('changeDate', function () {
$('.datepicker').hide();
});
});
IF it not work try blur() instead of hide() :
$(this).blur();

Bootstrap datepicker auto fill end date

I am using the Bootstrap Datepicker here in order to display a simple calendar range picker. All is working well so far, however I would like some additional functionality that I can't seem to figure out.
I would like to select a start date and then automatically fill in the end date (+10 days).
I'm sure this is possible however I can't figure it out.
I have created a Fiddle. Any help is greatly appreciated.
My JS is as follows;
$( document ).ready(function() {
$('#sandbox-container .input-daterange').datepicker({
format: "dd/mm/yy",
startDate: "0d",
endDate: "+10d",
todayBtn: "linked",
clearBtn: true,
multidateSeparator: " ",
forceParse: false,
daysOfWeekDisabled: "0,6",
orientation: "top auto",
todayHighlight: true,
toggleActive: true
});
});
My HTML is as follows;
<div class="col-md-5" id="sandbox-container">
<h2>Select borrow date</h2>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-lg form-control" name="start" placeholder="borrow date" /> <span class="input-group-addon">to</span>
<input type="text" class="input-lg form-control" name="end" placeholder="return date" />
</div>
</div>

You can check this link
Datepicker using jquery
You have to include javascript on change fuction of first datepicker
$('firstdatepicker').change(function() {
var date2 = $('firstdatepicker').datepicker('getDate', '+1d');
date2.setDate(date2.getDate()+1);
$('seconddatepicker').datepicker('setDate', date2);
});

Jquery to get an instance and write it to input field

<div class="form-group">
<div class='input-group' id='datepicker-start'>
<input type='text' class="form-control" id='start' />
<span class="input-group-addon date"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Hi Guys this my date picker css with bootstrap
I am using Zebra Date Picker but using bootstrap icon instead of Zebra icon which is red and i don't like it
Following is my date picking Jquery
$(document).ready(function() {
$('#datepicker-start').Zebra_DatePicker({
onSelect: function () {
$zdp = $('#datepicker-start').data('Zebra_DatePicker');
$('#start').val(zdp);
},
direction: true,
});
});
What I am trying to do is copy entered date into $zdp and set it to the value of input tag whose id is start.
I am new to javascript and jquery kindly guide what I am doing wrong casue this code is not running

I think, you need to use the onSelect handler like
$(document).ready(function () {
$('#datepicker-start').Zebra_DatePicker({
onSelect: function (str1, str2, date, $el) {
$('#start').val(str1);
},
direction: true,
});
});

how to make a bootstrap datepick button

as the title says, I want to make a bootstrap datepicker which will show up when a user clicks on a button. I have been searching for some tutorial for whole 2 days and found only tutorials for datepickers with input. The only site which shows that it is possibe is this one.
Unfortunately there is not shown the code for it. That is why I am here. I hope you guys can help me from my desperation :)

This is extracted from the Bootstrap Datepicker website you linked above, and adapted to use a button instead of a button-like link-element: http://jsfiddle.net/VchBF/
HTML:
<button class="btn small" id="button" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Your Date Picker</button>
JS:
$('#button').datepicker()
.on('changeDate', function(ev){
$('#button').datepicker('hide');
alert(ev.date.valueOf());
});

This is What I did With Jquery
Steps :
In html file paste this
<input type="text" id="your-datepicker-id" style="display: none;">
In JS file paste this
$('#your-datepicker-id').datepicker({
dateFormat: "dd/mm/yy",
showOn: "button",
buttonText: '<i class="fa fa-calendar"></i>'
})
Output Will Be A Button
<button type="button" class="ui-datepicker-trigger"><i class="fa fa-calendar"></i></button>
Extras :
You Can Add bootstrap Classes as
$(".ui-datepicker-trigger").addClass("btn btn-success")
You Can also do ajax calls as
$('#your-datepicker-id').datepicker({
dateFormat: "dd/mm/yy",
showOn: "button",
buttonText: '<i class="fa fa-calendar"></i>',
onSelect: function (dateText) {
jQuery.ajax({
type: "GET",
dataType: "script",
url: your_url
})
}
})
Note: (dateText == Date Which is Selected)
This is the output i Got

You just need to define the markup for your input..
<div class="container">
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" id="myDate">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
And then use jQuery to use the datetime picker on the input..
$('#myDate').datepicker();
Here's a working example: http://bootply.com/86820