I have a form which contain a date picker and it works as expected except the current date is not selected.
When I open the calendar it shows as follows
But I need the current date focused when ever I open the .date picker as follows
Add customTodayClass to the bsConfig and use css to change the background color of the date.
<input type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker
[bsConfig]="{'customTodayClass': 'today'}"
/>
Add CSS for today class like below.
.today{
background-color: #DCDCDC
}
Related
OVERVIEW:
We are using this plugin -- bootstrap-datetimejs (https://github.com/Eonasdan/bootstrap-datetimepicker). And I have it setup to show the time only
$(".timePicker").datetimepicker({
format: 'LT'
});
We are using ractivejs for our javascript library and my html goes like this
<label for="apptEndTime">End Time</label>
<div class="timePicker">
<input name="apptEndTime" id="apptEndTime" class="form-control date" type="text" value="{{apptEndTime}}" />
</div>
<label>Duration (mins)</label>
<input type="number" class="form-control" value="{{duration}}" id="duration" />
so apptEndTime is binded to ractive object data apptEndTime, and so does the duration. In my code, I made it that if the duration increases, it will also update the value of apptEndTime data. It successfully updated and displayed the apptEndTime.
PROBLEM:
Though it successfully updated and displayed the apptEndTime, when I click the clock icon of the datetimepicker, it still shows the previous time. As you can see on the screenshot below, it already displayed as 11:58 PM but when I click the clock icon, it still shows as 11:57 PM
QUESTION:
Is there a way that when I updated the value of apptEndTime, the time on the time selection menu (when the clock icon is clicked) will also gets updated?
I've already tried googling for day regarding this, but I can't seem to find the right solution. Also tried checking the documentation but can't find any related information
Ok my teammate was able to answer this question. He just added this line of code
$('input[name=appEndTime]').closest('.timePicker').data("DateTimePicker").date(appointmentObj.apptEndTime);
Where:
$('input[name=appEndTime]') is the affected input field
closest('.timePicker'). The '.timePicker' here is the name of your datetimepicker class/id when you initialize datetimepicker
data("DateTimePicker"). You just follow this, because all functions should be accessed via data("DateTimePicker") as mentioned on the plugin page:
https://getdatepicker.com/4/Functions/
date(appointmentObj.apptEndTime). date is the function name (though it is not found on the list of functions from their page :( ). And appointmentObj.apptEndTime is value that I want to set on the menu
I am using the double-binding of the clrDate, which allows me to load a Javascript Date object. However, I need to trigger an event every time the user changes the date, either types in a new one or uses the calendar.
I've tried (click), (change), (ngModelChange), (blur) - but for some reason none of them seem to trigger.
<label for="modelDate" class="clr-control-label" >Model Date:</label>
<input clrDate type="date" [(clrDate)]="selectedModelDate" (ngModelChange)="loadModel(false)" >
How should I capture the change within the Date Picker?
You can do it in two ways.
2-way Binding
In this stackblitz, notice that before the date picker is interaced with, if you click the button then the value of date1 is undefined. After you select a date and click the button it has the value set in the date picker. This is typical 2-way binding in Angular.
<section>
<button class="btn btn-primary" (click)="logDate1()">
Log Date Value for 2-way binding
</button>
<label for="date1" class="clr-control-label" > Date1:</label>
<input type="date" [(clrDate)]="date1" />
</section>
De-sugarized Syntax
This might be what you are after. It's almost the same as the above example but we seperate or de-sugarize the 2-way binding so that it gets set with [clrDate]=date2. Notice that it fires an event clrDateChange that can be tied into with the logChnage($event). That will get fired whenever the internal value of the date picker changes (e.g user selects a date) and you can do whatever you want with it's value in the logChange function. This is 2-way binding de-sugarized.
<section>
<h4>De-sugarized syntax</h4>
<label for="date2" class="clr-control-label" > Date1:</label>
<input type="date" [clrDate]="date2" (clrDateChange)="logChange($event)"/>
</section>
I created a edit view for a EF Model and have a problem with the datepicker.
Whenever i try to edit a `dataset, the edit view don't show me the old date values.
This is my Edit.cshtml Code:
<div class="form-group">
<label asp-for="BestellungsDatum" class="control-label"></label>
<input asp-for="BestellungsDatum" type="date" class="form- control" value="#Model.BestellungsDatum" />
<span asp-validation-for="BestellungsDatum" class="text-danger"></span>
</div>
This is what it looks like, but there have to be the old value at this position:
When i change the input to type="text", the value is shown but there is no datepicker.. Any solutions on this?
type="date" generates the browsers HTML-5 datepicker if supported. The specifications require that the value be formatted in ISO format (yyyy-MM-dd) which is then displayed in accordance with the browsers culture.
Add the asp-format to format the value, and remove the value attribute (Tag Helpers correctly generate the value attribute for correct 2-way model binding and you should never attempt to add it yourself)
<input asp-for="BestellungsDatum" type="date" asp-format="{0:yyyy-MM-dd}" class="form-control" />
Note the HTML-5 datepicker is not supported in IE, and only in recent versions of FireFox. If you want a consistent UI, then consider using a jQuery datepicker instead.
Just like to add an addition to the accepted answer:
<input asp-for="BestellungsDatum" type="date" class="form-control" />
Rather than adding asp-format to the view, add DataFormatString to the data Model or ViewModel, so you don't have to add it to every view that uses it:
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime BestellungsDatum { get; set; }
I am developing a Material form and have a md-datepicker input field that is showing Invalid Date on load instead of its placeholder:
When clicking on the drop down, the calendar starts all the way back in July 1934, which is less than ideal to say the least:
My code is pretty straight forward:
<div ng-switch-when="glide_date">
<md-input-container>
<label style="font-size: 130%; white-space: normal;" for="{{element.section_element_name}}">{{element.section_element_label}}</label>
<md-datepicker id = {{element.section_element_name}} ng-model="element.answer" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
</div>
If I highlight and delete "Invalid Date", then my placeholder shows up correctly and the calendar drop down resets to the correct month.
Any ideas on how to correct this?
To have a page be compliant with all government accessibility requirements, each form element should have a label. However, we have a birth date picker with three dropdowns: Day, Month, and Year. The visible label is simply "Birth Date".
Is there a way to:
Specify that a form element has no label?
Specify that a label is for multiple form elements?
You can specify a label for a group using <fieldset> and <legend>, however, this does not mean you can omit the individual label. In your example, you could argue that the proximity to the other selects serve as a "visual label", so you can use the title attribute to label each of the individual components and a fieldset/legend for the group
In your instance, you also need to indicate that the * indicates a required field
Here is some markup
<fieldset>
<legend>Date of Birth* <span class="offscreen">required</span></legend>
<select title="month">...</select>
<select title="day">...</select>
<select title="year">...</select>
<button title="pick date" class="datepicker"></button>
</fieldset>