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
Related
I need to disable search button, when text-box empty. I tried to add disable attribute to search button. but its not working.
This is my html code:
<div class="col-md-5 pl-0">
<div class="input-group mb-3">
<input
type="text"
placeholder="Enter MTCN Number"
maxlength="16"
class="form-control mtcn-textbox"
[formControl]="mtcn"
required
type="text"
aria-describedby="basic-addon2"
/>
<div class="input-group-append">
<button
class="btn btn-primary"
type="button"
(click)="retrieveData()"
[disabled]="mtcn"
>
Search
</button>
</div>
</div>
</div>
Can someone help me to achieve this?
You can disable your button just using [disabled]="!mtcn.value".
Or you can disable button if your form is not valid: [disabled]="!myForm.valid"
You can try [disabled]="!mtcn.value" or put your code into Form tag and giv it an id and use "form.valid"
Please note that mtcn is a FormControl, which is always truthy. You want to check the value of the FormControl.
You have 2 possibilities.
1. disabled attribute
<div class="input-group mb-3">
<input type="text" placeholder="Enter MTCN Number" maxlength="16" class="form-control mtcn-textbox" [formControl]="mtcn" required type="text" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button" (click)="retrieveData()" [disabled]="!mtcn.value">Search</button>
</div>
</div>
2. disabled class (since it seems you are using bootstrap)
<div class="input-group mb-3">
<input type="text" placeholder="Enter MTCN Number" maxlength="16" class="form-control mtcn-textbox" [formControl]="mtcn" required type="text" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button" (click)="retrieveData()" [ngClass]="{ disabled: !mtcn.value }">Search</button>
</div>
</div>
The [disabled]="!mtcn.value" would work, but I'd like to strongly advise against it. Assume you want to add some other validation rules (length, pattern, whatever) - you'd need to repeat the same thing twice, in the form control itself and in the button. In the long run, it'll get tedious to maintain and invite bugs.
Just go
<button [disabled]="mtcn.invalid">
Edit: Oh, and if you're using [formControl], put the validation rules in the mtcn definition in the TypeScript, not in the template, right now you're mixing model driven and template driven forms.
I am new to Vuejs and currently I wanted to show the the detail page view when I clicked on input field
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" required autocomplete="name" autofocus placeholder="Name" v-model="form.name">
<span class="invalid-feedback d-block" role="alert" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
</div>
</div>
Above is code of my input field name and I want to show detail of input field when I clicked on it, I have also attached the screen shot of my view where I wanted to click and show the detail page view
If I click on u-blox field I wanted to show the detail view. How can I achieve this?
The question is not very much clear. Maybe you can share some more code or maybe a fiddle for better help. From what I understand from the question, you can either opt to use a routing-based approach. Or if things are to be kept simple, simply render a for detail view conditionally using the v-if directive.
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" required autocomplete="name" autofocus placeholder="Name" v-model="form.name">
<span class="invalid-feedback d-block" role="alert" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
</div>
</div>
<div v-if="showDetailsView">
Details View template or Component can be rendered here.
</div>
The showDetailsView variable can be toggled through a click listener bound to the u-blox element.
Please refer https://router.vuejs.org/ for Vue-Router and https://v2.vuejs.org/v2/guide/conditional.html#v-if for Conditional Rendering.
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>