I am working on a bootstrap datepicker which will show only month and year. To some extent I have succeeded. I feel there is an issue with the import files sequence that the datepicker input box size is not correct. I have attached the plunkr. Need to click on Report Details on the left panel to check the actual output I am getting.
I need help with Index.html import file re-sequencing. Somebody please check it.
I am just adding a small code snippet. For the whole code please check the plunkr
<div class="form-group">
<label for="startDate" class="col-sm-5 control-label">Date:</label>
<div class="col-sm-4">
<div>
<div id="date" class="input-append" datetimez ng-model="var1">
<input data-format="MM-yyyy" type="text" id="input1" name="input1"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
<input class = "form-control" data-format="MM-yyyy" id="input1" name="input1"></input>
add .form-control to input tag and remove type="text" seemed to have worked.
Related
I have a problem to insert the calendar icon in the input field, the function need when the calendar icon is clicked then the date will show in the input field. Below is my sample coding:
<input type="text" class="form-control datepicker" id="document_date" name="document_date" value="" data-date-format="yyyy-mm-dd" readonly><br>
The output like below the picture:
Actually, I want the output like below the picture. It can click the calendar icon then choose the date will show in the input field:
Hope someone can guide me on how to solve it. Thanks.
You can use something like this (Bootstrap):
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">#</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
And For Icons you can use for example font awesome.
I want to use 6 input file in one page, in a vue template
I want that user could upload six files in six different inputs. each input is like this:
<div class="form-group">
<label class="form__label font-size--15 font-w--400">
{{$t("تصویر جلو کارت ملی")}}
</label>
<div class="input-group mb-3">
<div class="custom-file ">
<input id="melliCardFront" type="file" class="custom-file-input" #change="processMelliCardFront($event)" />
<label class="custom-file-label" for="melliCardFront">انتخاب فایل</label>
</div>
</div>
<div class="file-listing">
{{ mellicard_front.name }}
<span class="remove-file" v-show="mellicard_front" v-on:click="removeMelliCardFront()">حذف</span>
</div>
</div>
but when I use this, the input files Are arranged from above of page. when I take the opacity of input file to 1, the page is like this
my problem is that when I click on top of the page, it opens an input file. or in some browsers, it opens instead of other input.how can I fix this problem?
icheck-bootstrap is a pure css checkboxes and radio buttons for Twitter bootstrap. This implies it will work with any of the frontend libraries. At least that's the way I figured it... And indeed, his use from the readme of his github page for the library :Link to icheck-bootstrap demo with docs Does work it just has a side effect that I can live with.
In at lease one place where I'm trying to use this library, the component is in a modal dialog that is used to login to the site. Below is the html template code for the component:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true" (click)="hideModal()">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title-site text-center"> Login to Rove </h3>
</div>
<form #f="ngForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="form-group login-username">
<div>
<input name="log" id="login-user" class="form-control input" size="20"
[(ngModel)]="model.email" placeholder="Enter User Email" type="email">
</div>
</div>
<div class="form-group login-password">
<div>
<input name="Password" id="login-password" class="form-control input" size="20"
[(ngModel)]="model.password" placeholder="Password" type="password">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<span class="checkbox login-remember">
<input name="rememberme" value="forever" checked="checked"
[(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</span>
</div>
</div>
<div>
<div>
<input name="submit" class="btn btn-block btn-lg btn-primary" value="LOGIN" type="submit">
</div>
</div>
</div>
</form>
<div class="modal-footer">
<p class="text-center">
Not here before? <a data-toggle="modal" data-dismiss="modal"
href="#ModalSignup">Sign Up.</a> <br>
Lost your password?
</p>
</div>
The code above is without the icheck-bootstrap implemented code. Below I have changed the key lines of code that will implement the checkbox as per the readme documention on the github site
<div class="icheck-success checkbox login-remember">
<input id="rememberme" value="forever" checked="checked"
[(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</div>
this code works as per the readme, unfortunately, after the dialog has been closed the modality of the modal dialog stays and the main page behind it will not allow any input from keyboard or mouse.
Note the input tag in the effective lines, I have change from the name attribute, to the id attribute. That seems wrong to me but, it is as the documentation suggests and, the only way it will completely work. If I do not change the attribute from name to id the checkbox changes to the correct style but it will not check to show a true state. In fact if I remove the icheck-success class from the class attribute of the above div line the behavior is identical and the component will still not take input after the dialog box has been closed if I use the id attribute instead of the name attribute.
I'm using Angular V9 and the dialog component that I am using is from the Valor Software ngx-bootstrap library and, as stated, it works perfectly when I code the html input tag with the name attribute. Does any know of a workaround or possibly what is happening here? the styling is what I want on the site but not at the cost of not having the login dialog effectively lock the site up after you login.
Thanks for any info that you may have on this issue.
I have fix the problem I was having. The first part of the problem was that I was not asking the right question. I have edited the question to ask it in a better way, I think.
I have fixed the problem with the html below:
<div class="icheck-success checkbox login-remember">
<input id="rememberme" name="rememberme" [(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</div>
it seems I had to have a name attribute in the input tag for some reason that I'm not clear about at all but, this is what I did to get the modal dialog to truly clear from the page after close.
I am creating a page with date picker in angular 6 using bootstrap. And the constraint is to display calendar icon inside the text box on the right side. Can someone help me on this?.
Use this? https://material.angular.io/components/datepicker/overview
If you must use bootstrap (somthing like this):
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="date" type="date" class="form-control" name="date">
</div>
...
</form>
I started to use Foundation 5 for my web project, but it seems full of bugs, and the form validation just simply doesn't work. So I switched to Bootstrap.
However, there was a feature in Foundation called Pre/Postfix Labels & Actions (see here) and I want it in Bootstrap.
I have searched and searched but cannot find anything even remotely similar. I can use the glyphicon, glyphicon glyphicon-gbp, to show the "£" sign before my form input, however I am unable to get it to flow correctly using the grid system.
I have a JS Fiddle here: http://jsfiddle.net/kAnjN/
This is my HTML:
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="monthly_rent" class="col-sm-2 control-label">Monthly Rent</label>
<div class="col-sm-4">
<span class="glyphicon glyphicon-gbp"></span>
<input type="text" name="monthly_rent" class="form-control">
</div>
</div>
</form>
Does anyone have any advice? I am a PHP developer and front-end things like this frustrate me! Bootstrap and Foundation are supposed to make it easier and just "work" but I always have to search for hours for solutions to tiny problems.
I basically want to achieve what is on the Foundation link above.
Use the .input-group class:
<label for="monthly_rent" class="col-sm-2 control-label">Monthly Rent</label>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-gbp"></span>
</span>
<input type="text" name="monthly_rent" class="form-control">
</div>
</div>
Example