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
Related
Currently, my issue is that the calendar isn't showing (tells me the datetimepicker function isn't properly initialized on the controls).
Note that the implementation shown here is based on a different implementation elsewhere on the site which does work.
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/Scripts/moment.min.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.min.js"></script>
I've stripped out all the scripts like datatables and knockout as I believe they're superfluous and the list of scripts used is quite extensive.
Full [redacted to remove client information] markup for the page can be found here.
The form is simple, just inputs with .datetimepicker class on them:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-5">Start Date</label>
<div class="col-sm-7 input-group">
<input type="text" class="form-control datetimepicker" id="StartDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar "></span>
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5">End Date</label>
<div class="col-sm-7 input-group">
<input type="text" class="form-control datetimepicker" id="EndDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar "></span>
</span>
</div>
</div>
</div>
</div>
Right now when I click on either of these inputs they just give me autocomplete options for values which I've entered in the past.
Used to be with things like this you'd initialize the javascript with something like this at the bottom of the page:
$(document).ready(function () {
$("#StartDate").datetimepicker();
$("#EndDate").datetimepicker();
});
This, however, doesn't appear to be necessary in this case as the page on which these datetimepickers work doesn't do it.
If I do initialize the controls this way, the calendar shows, but whether I use the locale option or the format option as indicated in this SO Answer, it never gives the dates the correct format that I need which is yyyy/mm/dd.
Ideally, I want to be able to see the calendar pop-out and have it display dates on the input with the correct format. If anyone can indicate possibly what I'm doing wrong I'd greatly appreciate it.
Here's a fiddle: https://jsfiddle.net/h3809a7r/
I just imported these libraries and its working now
Javascript:
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js
CSS
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css
JsFiddle Link with your code
Can you please try this
$("#StartDate").datetimepicker({
format: 'YYYY-MM-DD HH:mm',
showClose: true,
showClear: true
});
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}"
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>
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
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