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

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.

Related

How to remove the "Today's date" button from a datepicker?

I am trying to remove the button on the bottom of the HTML default date picker. I can't seem to find a way. The Button says: "Today"
<div class="form-group" id="datepicker">
<label id="WinterStart:" for="usr">Winter: </label>
<input type="date" class="form-control" id="winterStartFrom:" min="2019-11-10">
</div>
It may be your browser delivered setting,
Try with this or this
This will give you a custom date pickers.

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>

From date , To date validation in angular js

This is my code
<tr ng-show="option == 'Yearly' || option == 'Date'">
<td>
<label>From:</label>
</td>
<td>
<input type="date" ng-model="fromdate" id="fromdate" date-picker />
</td>
<td>
<label>To:</label>
</td>
<td>
<input type="date" ng-model="todate" date-picker />
</td>
</tr>
I have a jquery date picker for fromdate and todate, I need to disable all the dates in the end date which is lesser than the from date.....
I have used https://github.com/Eonasdan/bootstrap-datetimepicker
previously and minDate and maxDate options can probably be helpful for your use case, if you want to look at another plugin.
Sample usage to set maxDate, minDate:
html:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
js:
$('#datetimepicker1').datetimepicker({
maxDate: new Date("6/8/2016"),
minDate: new Date("6/2/2016")
});
Working Plunker
Note: This plugin has dependency on bootstrap, jquery, and momentjs
Edit:
There is also a angular wrapper directive over this: https://github.com/diosney/angular-bootstrap-datetimepicker-directive
If you are just wanting to set a specific min date like todays date you can put that in as a setting.
https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
If you have an easy way of setting your min date to be todays day you can just use a variable as such min="{{minDate | date:'yyyy-MM-dd'}}"). Note that min will also add native HTML5 constraint validation.
In theory this doesn't require a controller but just a app setup config for $scope.minDate, all that is going to do is note that your date is not correct next to the field with whatever validation you have set, field and form validation is a whole different animal then what you are asking but I would read https://docs.angularjs.org/guide/forms on it.
In the long run I wouldn't use jquery date picker and use a native directive like https://angular-ui.github.io/bootstrap/ Date picker or Angular Material https://material.angularjs.org/latest/demo/datepicker

Change the Date box display format in jtsage date picker

Hi i need to Change the jstage Datebox Date box display format like day-month-year in UI ( Black display date box field ) not in html text.
That is first day, after month, after year should be displayed in datebox. Is that possible. how?
Second one is time box when click the plus icon in time need to increase the time value to 15 minutes (currently the value is increased by 1 minute like 10:01 , 10:02 i want 10:15 , 10:30). :)
currently able to change the header format
<div data-role="content">
<label for="mydate">Some Date</label> <input name="mydate"
id="mydate" type="date" data-role="datebox"
data-options='{"mode": "datebox", "useNewStyle":true,"overrideHeaderFormat": "%d.%m.%Y"}' />
</div>
Please refer this http://jsfiddle.net/FwRsq/3/
here is updated fiddle jsfiddle
<input data-role="datebox" data-options='{"mode": "datebox","dateFieldOrder":["d","m","y"], "useNewStyle":true,"overrideDateFormat": "%d.%m.%Y"}' name="mydate" id="mydate" type="date"/>
<input data-role='datebox' data-options='{"mode": "timebox", "useNewStyle":true,"overrideTimeFormat": "24","minuteStep": 15}' name="mydate" id="mydate" type="date"/>
For the time increment, use the minuteStep option:
<input name="mydate" id="mydate" type="date" data-role='datebox' data-options='{"mode": "timebox", "useNewStyle":true,"overrideTimeFormat": "24", "minuteStep": 15}' />
Updated FIDDLE

Categories