I have select date input field, there is icon of calendar when I check in desktop its looks fine but when I check in mobile the icon change into down icon, mobile design attached below, please check. Thanks in advance!
<div class="form-group row">
<div class="col-sm-12">
<input type="date" class="form-control" placeholder="Date of Birth" value="date-month-year"/>
</div>
</div>
Related
Input type date and input type time are not showing their corresponding icons nor their default placeholders on mobile the input is simply blank, however, their pickers are working.
They all work on desktop and it shows if I select a mobile device on chrome developer tools.
my code:
<div class="col-12 col-md-4 offset-xl-2 col-xl-4">
<label for="insessiondate" class="col-md-12 col-form-label labelSpace2">Session Date*</label>
<input type="date" class="form-control" id="insessiondate" name="insessiondate" area-describedby="sessiondate" required="true">
</div>
<div class="col-12 col-md-4 col-xl-2">
<label for="insessiontime" class="col-md-12 col-form-label labelSpace2">Session Time*</label>
<input type="time" class="form-control" id="insessiontime" name="insessiontime" area-describedby="sessiontime" required="true">
</div>
As you can see I am using bootstrap if that might have something to do with the problem.
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 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'm quite new here. In this simple bootstrap site, I have an input field with a label in front of it. It looks fine in my browser with default value 1.00, and it's responsive when I resize my browser. However that input filed becomes very small when I accessed the site through some other people's computers. The default value also disappeared. Is there anything wrong with how I defined this field? Many thanks in advance!
<div class="col-lg-4 col-lg-offset-4">
<div class="input-group">
<span class="text-center input-group-addon" id="sizing-addon2">Amount</span>
<input class="form-control" type="text" id="amount" aria-describedby="sizing-addon1" value="1.00">
</div>
</div>
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.