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>

Materializecss Datepicker Scrolls the page to top when click on it

I use materializecss Datepicker in my web page and one worked fine until I add another datepicking option to my web page.
After that when I select a date background page scrolls to top automatically.
Place where I needed to load datepicker:
Place where I needed to load datepicker-1:
where the modal loads:
I this is my code for datepicker 1;
<div class="row dateRangeSelector orderStatusWidget-dateRangeSelector"
id="customDates">
<div class="col s6 orderStatusWidgetDateWrapper">
<label>From</label>
<input type="text" class="datepicker" id="distStartDate">
</div>
<div class="col s6">
<label>To</label>
<input type="text" class="orderStatusWidget-datepicker"
id="endDate1">
</div>
datepicker 2:
<div class="row dateRangeSelector orderStatusWidget-dateRangeSelector" id="customDates">
<div class="col s6 orderStatusWidgetDateWrapper">
<label>From</label>
<input type="text" class="datepicker orderStatusWidget-datepicker"
id="startDate">
</div>
<div class="col s6">
<label>To</label>
<input type="text" class="datepicker orderStatusWidget-datepicker"
id="endDate">
</div>
</div>
my javascript code:
$('#distStartDate').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year,
today: 'Today',
clear: 'Clear',
close: 'Ok',
closeOnSelect: true, // Close upon selecting a date,
onStart: function() {
$('.picker').appendTo('body');
}
})
**same for each and every input.
After doing some element inceptions I figure out that picker element that needs to create near to element is created in bottom of the page in my case.
Please tell me a way to fix this error.

Datepicker not showing days - Bootstrap

I'm struggling with the answer to this, the reason I'm struggling is because the datepicker is working on one of my pages.
Could an issue be that i'm loading a datatable at the same time as the datepicker? Because on the broken page, i'm loading the datatable which uses the date from the datepicker.
Problem reproduced
JSFiddle - Without including the FilterLoggingTable function, it works fine.
Code snippet for Datepicker
if (typeof $('#generateDate, #loggingDatePicker').datepicker !== 'undefined')
{
var currentDate = new Date();
$('#generateDate, #loggingDatePicker').datepicker(
{
format: 'dd-mm-yyyy',
autoclose: false
});
$('#generateDate, #loggingDatePicker').datepicker('setValue', currentDate).datepicker('update').datepicker();
}
HTML (Broken Datepicker)
<div class="col-sm-6">
<div class="input-group date col-md-3 pull-right" data-date-format="dd-mm-yyyy" data-date="12-04-2015">
<input id="loggingDatePicker" class="form-control" type="text" value="12-04-2015" size="14" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
HTML (Working Datepicker)
<div class="col-md-4 form-group">
<div class="input-group date " data-date-format="dd-mm-yyyy" data-date="12-04-2015">
<input id="generateDate" class="form-control generatePDFBTNS" type="text" value="12-04-2015" size="14" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Broken Page
Working Page

DEMO
Ok. The problem was with your below line:
("tr:not(:has(>th))").show().filter
inside FilterLoggingTable() function.
What this does is hides or shows all the trs in the page when criteria is matched!Now why
this effects your calendar is because the bootstrap creates table
for your calendar when you initialize the datepicker and that
table will also match the above criteria which should be only there
for dataTables.
So, what you need to do is just get the trs of dataTable as below:
$('#dataTables-example').find("tr:not(:has(>th))").show().filter(function ()
Now you can keep autoclose:false if you want..

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);
});

Date picker bootstrap work only first time

I have datepiker
<div class="control-group">
<label class="control-label">Publish date:</label>
<div class="controls">
<div class="input-append date form_datetime">
<input size="16" type="text" readonly
value="<%=Item!=null?Item.PublishDate.ToString("dd.MM.yyyy"):
DateTime.Now.ToString("dd.MM.yyyy") %>" id="PublishDate"
name="PublishDate" class="m-wrap" data-format="dd.mm.yyyy">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
</div>
first time work normal
but second time something not good
here I init the datepiker
$(document).ready(function () {
$(".form_datetime").datepicker({
isRTL: false,
format: 'dd.mm.yyyy',
pickerPosition: "bottom-left",
autoclose: true
});
});
Maybe problem is in init?

In the script you mentioned class name as "form_datetime", but you gave tag class as "m-wrap". Assign same class name and try again..