We Keep Coding

Bootstrap Datepicker date range picker not allowed to select 30th of Sept

I have no idea why it's behaving like this so my example is simple I am using php from and to the date set up in date-range by default.
However, when they try to select to date as "30/09/2018" then they can't select that. Not sure why they can't select that.
Here is my code for date range picker from bootstrap datepicker:
<div class="form-group">
<div class="input-group input-large date-picker input-daterange" data-date="10/11/2012" data-date-format="dd/mm/yyyy">
<input type="text" class="form-control" name="from" value="<?php echo date("d/m/Y",$start_date);?>">
<span class="input-group-addon">
to </span>
<input type="text" class="form-control" name="to" value="<?php echo date("d/m/Y",$end_date); ?>">
</div>
</div>
Issue image
If I keep to date blank without any bydefault then work fine but also get broken if I select date range and once and then try to again select date-to as 30th of sept.:
So whenever I try to select 30th of sept its automatically select 29th of sept so not sure why its doing this.

Thymeleaf and DatePicker: set min Date

I would like to set a minimum selectable date in my datepicker, using thymeleaf.
I try to set it by this code:
<label th:utext="#{${name}}" th:for="${name}" class="control-label"></label>
<div class="input-group input-group-prepend">
<span class="input-group-text far fa-calendar-alt"></span>
<input type="text" th:id="${name}" th:name="${name}" th:value="${value}" th:placeholder="${placeholder}" class="form-control" onfocus="(this.type='date')" min="${minDate}"/>
</div>
But this code min="${minDate}" is ignored.
There is a way to do that I want with thymeleaf or I can do it only by javascript?
Thanks

You can try using th:attr as below
th:attr="min=${minDate}"

Bootstrap Datetimepicker overrides dates

I'm using Bootstrap Datetimepicker in my website.
The picker calendar works perfectly but when I write a date which is bady formatted, it will clear it and fill the text input with the last correct date (or just erase the field if none was entered before).
Worse than that, it will sometimes arrange dates to fit the format I've mentioned. For example, entering "102" and clicking out of the input zone will fill "10/02/2018".
I would like to force that behavior, and to keep user input in the text area, even if wrong format (I'll check it afterwards)
What am I missing here ?
<div class="form-group">
<label class="control-label col-sm-4">Date de naissance<label>
<div class="col-sm-7">
<div class="input-group date date-default input-date datetimepicker col-lg-7" style="float: none;">
<input id="datenaissance" name="datenaissance" type="text" class="form-control input-sm" placeholder="JJ/MM/AAAA" value=""/>
<span class="input-group-addon">
<img src="../images/icon/calendrier.png" alt="calendrier">
</span>
</div>
</div>
</div>

How to autoclose and click icon datepicker bootstrap

I have problem with code:
<div class="control-group input-append date">
<label class="control-label" for="cid">Check In</label>
<div class="controls">
<input class="span8 required" name="cid" type="text" id="cid">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
and the javascript:
<script>
$('#cid').datepicker();
</script>
Exactly I have done insert jquery and datepicker javascript.
Problem:
The date can't auto close. I want to after click date, the table date will autoclose.
The icon calender can't click. I want to if user click icon calender beside form input, the table calender will showing.
Thanks

Can you try :
$('.datepicker tbody').on('click', function(){ $('.datepicker').hide() });
$('.icon-calendar').on('click', function(){ $('.datepicker').toggle()   });
You have to precise the jquery selector in case where you have multi icon calendar or datepicker;

bootstrap datepicker from eternicode not selecting date

I'm working on this input right now using bootstrap 3.0 and bootstrap-datepicker from eternicode.
The problem is that I'm having by default the input to be disabled, because I do not want the user to be modifying the date by his hand.
I'm assigning an input addon with a glyphicon of a calendar to show the datepicker. The problem though is that whenever I select a date, the input doesn't receive the date. I've been going through the docs and there's a way to do it, but it is with Bootstrap 2.3.2 only.
Here is my code, does anybody know how can I transfer the selected date from the datepicker into my disabled input?
Help will be much appreciated!
html
<div class="form-group">
<label class="control-label" for="fechaTandas">Fecha</label>
<div class="input-group">
<span class="input-group-addon date" id="trigger-datepicker"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" name="fechaTandas" disabled="disabled" id="fechaTandas" placeholder="seleccione una fecha">
</div>
js
//JS to trigger the datepicker
$('#trigger-datepicker').datepicker({
format: "yyyy/mm/dd",
language: "es"
});
This is the link to eternicodes datepicker plugin:
http://eternicode.github.io/bootstrap-datepicker

I think you need to handle the DatePicker's change event..
$('#trigger-datepicker').datepicker()
.on("changeDate", function(e){
$('#fechaTandas').prop('disabled',false);
$('#fechaTandas').val(e.format('yyyy/mm/dd'));
$('#fechaTandas').prop('disabled',true);
});
Demo: http://bootply.com/88516