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.
Related
I am building a user form that using form-group and row. I wanted to see what options you guys are using when you want the user to understand that this is an or? The two questions are not require but they just need to under one of the question
<div class="form-group row">
<label for="enteredLink">Enter Link</label>
<input class="form-control" data-val="true" id="txtLink" name="enteredLink" type="text" value="">
</div>
<div class="form-group row">
<label for="enteredFile">Upload File</label>
<input class="form-control" id="txtFile" name="enteredFile" type="text" value="">
</div>
Perhaps something like this could work. There are two inputs for files and text. This makes it obvious that the user needs to pick one or the other.
//optional display uploaded file into text input
function displayUpload() {
var file = document.getElementById("txtFile").value;
document.getElementById("txtLink").value = file;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group mt-5 px-5">
<input class="form-control" data-val="true" id="txtLink" name="enteredLink" type="text" value="" placeholder='Enter link'>
<div class="input-group-append">
<button class="btn btn-secondary rounded-right" type="button" onclick="document.getElementById('txtFile').click();">Or Choose file</button>
<div class="custom-file" hidden>
<input class="form-control" onchange='displayUpload();' id="txtFile" name="enteredFile" type="file" value="">
</div>
</div>
</div>
And as a final note, I noticed that you named your IDs txtFile and txtLink if you would like to limit your file input you could also add accept=".txt" so the user could only upload .txt files.
This may seem a bit simplistic, but have you considered a simple bit of text saying 'or'
<div class="container">
<div class="form-group row">
<label for="enteredLink">Enter Link</label>
<input class="form-control" data-val="true" id="txtLink" name="enteredLink" type="text" value="">
</div>
<div class="row"><p>or</p></div>
<div class="form-group row">
<label for="enteredFile">Upload File</label>
<input class="form-control" id="txtFile" name="enteredFile" type="file" value="">
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
It's not quite the same, but this is what the Gov.UK Design system does for radio button groups that are mutually exclusive - https://design-system.service.gov.uk/components/radios/#radio-items-with-a-text-divider
Edit - To highlight alternative used by SO
When posting this question I realised StackOverflow themselves do something similar to what you want. They essentially use an all in one box with clear calls to action to either drag and drop, browse or paste a link in
Clicking 'paste' sticks the text box on screen for users to paste their link in
It'll slightly depend on who your audience is and how tech savvy they are, and also what people mostly will do as to what option is best.
The code snippet below is form that embeded in the bootstrap modal to allow the user create a new subject for current system. In the form, I have included one text input to accept the data. In that text input, I have assign value = "incomplete" as the default value. However, the default value didnt show as expected when the webpage is running.
<div class="modal-body">
<form id="adminAddExamForm" method="POST"
th:action="#{/process_AdminAddExam}" th:object="${exam}">
<div class="mb-2">
<label for="status" class="col-form-label">Status</label>
<input type="text" value="incomplete" class="form-control" id="status" th:field="*{status}" autocomplete="off" disabled>
</div>
</form>
</div>
The below code snippet and screenshot is taken from chrome dev tools. Even though I have assign the value, but it still show nothing
<div class="mb-2">
<label for="status" class="col-form-label">Status</label>
<input type="text" value="" class="form-control" id="status" name="status">
</div>
No value = "incomplete" found in your codes. only value = ""
Replace
<input type="text" value="" class="form-control" id="status" name="status">
with
<input type="text" value="incomplete" class="form-control" id="status" name="status">
Update:
If still doesn't show, check the css. Is there a property that makes the text transparent to its background.
Problem solved.
I use the javascript to assign it the default value.
document.getElementById("status").defaultValue = "Incomplete";
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>
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 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.