Thymeleaf and DatePicker: set min Date - javascript

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}"

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.

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

show invalid messages on entering wrong input

I have written a code stuff using bootstrap-datetimepicker which has two datetime picker start and end. Code is working fine but I don't know how to show validation to the date time textfield. say for example in the datetime picker textfield when I enter some invalid date, it should validate and show invalid date. How can we achieve that.
Can anyone please help me on this
My code is as given below
JSFiddle
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Check out the docs regarding options: http://eonasdan.github.io/bootstrap-datetimepicker/Options/
I've never used this plugin but it looks like passing some of these in would allow you to set validation parameters and not have to write too much more code.
Things like:
format (using moment.js notations)
minDate & maxDate
disabledDates
and looks like useStrict might also be helpful depending on what your requirements are.
Yo. validate.js is very easy to implement. It's also very easy to customize.
Simple demo here.
$(document).ready(function(){
$("#form").validate();
});
Read more about Validate.js

How to render Bootstrap DateTime Picker within a Panel

I have a problem using Bootstrap DateTime picker when nested within a panel.
The datetime calender and datetime hours and minutes components render an "empty" box when clicked.
Here's an example to show you what I mean
I am using the latest Bootstrap frameworks and components (Bootstrap framework V3.3.4) with Bootstrap 3 DateTimePicker v4.14.30.
Here is my HTML code
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Basic Search Criteria</h3>
<form id="frm1">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Start Date</span>
<input type="text" id='searchStartDate' name="searchStartDate" class="form-control" placeholder="Search start date" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon2">Start Time</span>
<input type="text" id='searchStartTime' name="searchStartTime" class="form-control" placeholder="Search start time" aria-describedby="basic-addon2">
</div>
</form>
</div>
and here is the Jquery code for the date and time input fields
$(function () {
$('#searchStartDate').datetimepicker({
format: 'DD-MM-YYYY',
});
});
$(function () {
$('#searchStartTime').datetimepicker({
format: 'HH:mm',
});
});
If I move the two statements
<input type="text" id='searchStartDate'
and
<input type="text" id='searchStartTime'
outside of the panel div both date control components render find.
But, when I move them into the Panel div, the DateTime calender and DateTime hour and minutes boxes render empty / or blank ~ as in the example above.
I have used the DOM Explorer and have managed at least to find an issue / problem within the Bootstrap.CSS that suggests the problem is with the div.panel-heading statement, specifically this
If I uncheck the color selection within the DOM Explorer I am then able to render the calender control as follows
But, this then leaves me with two new problems
1) the color of the panel title has changed from white to black
2) the default color of my calender control has changed to black
I have considered making an update to the bootstrap.css file to remove the color attribute div.panel-heading ~ but If I do that then I will lose the default setting on any other times I use a panel. Also, I am worried that if I did make a manual change, if I then say, in 12 months time download and use the next latest and greatest incarnation of Bootstrap ~ I will lose any changes I have made and my controls will not render again.
Does anyone know of what I can do to fix this, what is the 'best' approach for overriding the default settings so that I do not lose any 'fix' in future?
I tried to implement the solutions mention by #loni and #Jason but my calendar box still renders empty
However, I can render a calender control (but the styling has been lost) by changing the div class="panel panel-primary" to just div class="panel" as follows
but as you can see, of course now my panel has lost its formatting, the calendar does render, but not in it's correct color format.
The solution is simple as follows
1) close the panel header div.
2) wrap the panel contents within a panel-body div.
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Basic Search Criteria</h3> </div>
<div class="panel-body">
<form id="frm1">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Start Date</span>
<input type="text" id='searchStartDate' name="searchStartDate" class="form-control" placeholder="Search start date" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon2">Start Time</span>
<input type="text" id='searchStartTime' name="searchStartTime" class="form-control" placeholder="Search start time" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon3">End Date</span>
<input type="text" id='searchEndDate' name="searchEndDate" class="form-control" placeholder="Search end date" aria-describedby="basic-addon3">
<span class="input-group-addon" id="basic-addon4">End Time</span>
<input type="text" id='searchEndTime' name="searchEndTime" class="form-control" placeholder="Search end time" aria-describedby="basic-addon4">
</div>
<br />
<div class="input-group">
<span class="input-group-addon" id="basic-addon5">Job Name</span>
<input type="text" id='jobName' name="jobName" class="form-control" placeholder="Search job name" aria-describedby="basic-addon5">
<span class="input-group-addon" id="basic-addon8">Application</span>
<input type="text" id="applicationName" name="applicationName" class="form-control" placeholder="Search by application" aria-describedby="basic-addon8">
<span class="input-group-addon" id="basic-addon7">Table</span>
<input type="text" id="tableName" name="tableName" class="form-control" placeholder="Search by schedule table" aria-describedby="basic-addon7">
<span class="input-group-addon" id="basic-addon6">Server</span>
<input type="text" id='serverName' name="serverName" class="form-control" placeholder="Search server name" aria-describedby="basic-addon6">
</div>
</form>
</div>
An example of the correctly rendered solution

passing javascript options in HTML

I am using ruby gem bootstrap-datepicker-rails in my Rails-4 application, to draw a form for taking from_date and till_date as input as following. The beauty of this code is no javascript is needed as that in encoded in this gem's code.
<div class=" input-daterange" id="datepicker" data-provide='datepicker'>
<label>From Date</label>
<input type="text" class="form-control" name="from_date" id="from_date">
<label>Till Date</label>
<input type="text" class="form-control" name="till_date" id="till_date">
</div>
By default it takes format as “mm/dd/yyyy”, I want to change it to “yyyy-dd-mm”, Is it possible to do this by passing this in html options only and not using any javascript for it. I tried following and some other permutations of these, but of-course they didn't work.
<div class=" input-daterange" id="datepicker" data-provide='datepicker' options='format:"yyyy-mm-dd"'>
<div class="row input-daterange" id="datepicker" data-provide='datepicker' format="yyyy-mm-dd" >
Please let me know if this is possible to do and how.
The docs suggest you do it like this:
<input class="datepicker" data-date-format="mm/dd/yyyy">
https://bootstrap-datepicker.readthedocs.org/en/latest/#configuration
Note that the attribute goes on the input element and is called data-date-format
I think you are missing the right name of the html attribute, try :
data-date-format="yyyy/mm/dd"
Source : documentation

Categories