I'm using datepicker but finding a problem, when trying to select the year or month with the select list the first time showing goes of on top and bottom with no scrolling available, after closing it and open it like 3 times it works as the example from the official page, I've been trying to find out if there is a problem with position or something but can't seem to figure it out, in the google inspector I see that every time I open it and close it, gets different height and top values.
My code for the input is this:
<div class="input-field col s6">
<input asp-for="DateOfBirth" type="text" class="validate datepicker" value="#DateTime.Now.ToString("dd/MM/yyyy")">
<label for="DateOfBirth">* Fecha de <span id="texto-nacimiento">Nacimiento</span></label>
<span asp-validation-for="DateOfBirth" class="helper-text red-text"></span>
</div>
Related
When I use the following code, the date input fields are cut off and overlapped by the native HTML date picker:
<div class="form-check form-check-inline">
<div class="input-group ml-2">
<div class="input-group-prepend">
<label class="input-group-text" for="date_from">von</label>
</div>
<input th:placeholder="#{date.format}" th:field="*{from}" type="date" max="9999-12-31" min="1000-01-01"
class="form-control" id="date_from">
</div>
<div class="input-group ml-2">
<div class="input-group-prepend">
<label class="input-group-text" for="date_to">bis</label>
</div>
<input th:placeholder="#{date.format}" th:field="*{to}" type="date" max="9999-12-31" min="1000-01-01"
class="form-control" id="date_to">
</div>
</div>
This is how it looks like in the browser:
When hovering over the input, one can clearly see that it's the native HTML date picker that overlaps the input fields:
So my question is: How can I solve this problem?
You could use one of two options:
Specify the width of the input box to a value that allows the whole date to be clearly visible.style="width:(insert value here)"
Specify a smaller font-size, this will also allow the date to be seen clearly. style="font-size:(insert value here)"
I deal with this everyday using the two steps Alex Morrison explained combined, also, don't forget that you can do both steps multiple times in different media queries to make it more responsive.
Instead of having to manually add the width every time you have a date input, you could either create a custom class, or target each date in css and do something along the lines of input[type=date]{width:(your width here);}.
I have a date-picker already implemented in my code. I need to implement a button or link, so that on clicking on it, it can automatically select date for last 7 days or last 1 month or last 1 year (all different buttons) from the datepicker.
Is it possible?
My html code for date-picker :
<div class="form-group">
<label class="head-label">Date Range:</label>
<div class="input-group filter-calendar">
<my-date-range-picker name="mydaterange" [options]="myDateRangePickerOptions" [(ngModel)]="selectedFilters.date"></my-date-range-picker>
</div>
</div>
Use a template reference variable https://angular.io/guide/template-syntax#ref-vars and use in the button
<my-date-range-picker #mydate ....>
<button (click)="change(mydate)">click</button>
change(datePicker:any)
{
datePicker.someMethodToSelect()
}
I have created one application by using ASP.Net. Here my problem is Date input field in aligning correctly in Firefox but in Chrome it is displaying bigger than all other text boxes.
Here is the code for Date Field,
<div class="input-group date form_date dob" data-date="" data-date-format="dd-mm-yyyy" data-link-field="dtp_input2" style="width:176%">
<input class="form-control" tabindex="5" size="12" #*required="required"*# data-date-format="dd-mm-yyyy" type="text" id="txtDOB" data-bind="date:DOB,value:DOB" #*readonly*#>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>
<input type="[enter image description here][1]hidden" id="dtp_input2" data-bind="value:DOB" /><br /
I have attached the screen shots of both browsers output. Can any one help me on this.
In face, there is no way but to keep that. Each browser could render HTML elements in different manners. So you have two options:
1- Use a date plugin. It will make your app look like the same in any browsers.
2- Set the height of all boxes to the largest rendered version.
I have a select form that has a list of currencies as options when my screen is at full size the select input works fine but the second I resize it to anything smalller I can only change my select option once. After that the clicks will not register and the mouse will not focus on the select unless I go back to a full sized screen. I also can't seem to reproduce the problem, I am using angular js
<div class="col-xs-6">
<select required="required" ng-model="currency" name="type" default-option="Select Currency" class="form-control m-b">
<option>Yuan</option>
<option>JPY</option>
<option>USD</option>
</select>
</div>
I use Bootstrap 3 and i have a multiple datepicker (from - to). It work well on a compute however i have problem for mobile phone compatibility. My input group overflows the screen and do not resize all the group.
In case of small device, i would like to have the the group on 2 rows:
- the first with the addon From + its datepicker
- the second with the addon To + its datepicker
how could i do ?
my html:
<form class="form-horizontal">
<div class="form-group">
<div class="input-daterange" style="padding-left: 15px; padding-right: 15px" id="datepicker" >
<div class="input-group">
<div class="input-group-addon">From</div>
<input type="date" class="form-control" name="beginDate" id="beginDate"/>
<div class="input-group-addon" for="endDate">To</div>
<input type="date" class="form-control" name="endDate" id="endDate"/>
</div>
</div>
</div>
</form>
EDIT : I know it have to be done in css with #media, but how to get to the line only after the first datetimepicker ?
Bootstrap doesn't support multiple input fields within a single input group, regardless of browser:
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
This would have to be done in the css.
So if you look at your bootstrap.css and scroll down to any #media 746px(I think its that many pixels it is for mobile) you should see examples of how they handle when the screen gets re sized. Mobile is just a screen size that is really small on a computer browser.