I am hoping to bind the default value I generated in moment to the date and time input field. I tried directly binding it to the value attributes. But none of it seems to work. Is there a way to make it work?
Also, how to bind the time input field as well?
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
for datepicker type should be date, and to set default value check with the below one
<input type="date" value="2013-01-08">
Related
I have a date picker that when I choose a new date I wish to fire another date picker on another input
Input one:
<input name="pDate" type="text" class="form-control date-with-time-inputs" onchange="changeDate()" id="p_date" placeholder="" value="{{$times['now']}}">
Then I have onchange event
<script>
function changeDate() {
const input = document.getElementById('d_date');
input.select();
console.log('clicked');
}
</script>
And then the second input as so
<input name="dDate" type="date" class="form-control date-with-time-inputs" id="d_date" placeholder="" value="{{$times['tomorrow']}}">
The console log fires and the function is working but the 2nd input is not firing up.
You can't open/click() it from JS(only focus() but that would not help you):
The HTML5 <input> with type='date' will only work with a few browsers.
Also, as a programmer you have no control over its appearance or any
other aspect (such as showing and hiding it) (Quick FAQs on input type date)
Thus, if you must do this, the HTML5 <input type='date'> tag is not an
option. You'll have to use something build in JavaScript such as
jQuery UI or Bootstrap date picker.
Found here: https://stackoverflow.com/a/18327043/12753766
I want to validate the inputs from a form in vuejs, and when the data is pre-populated I want the inputs to convert to readonly.
<input type="number" name="cf_962" class="form-control" v-model="fillProfile.cf_962" step="0.1" :readonly="(fillProfile.cf_962>0.00) ? true : false">
the problem with this now is that always that i writed on the input if the value is higher than 0 the input is readonly and i dont want that.. how can do that with vuejs 2?.. thank you.
What you are trying achieve can be done easily using v-once directive
<input type="number" name="cf_962" class="form-control" v-model="fillProfile.cf_962" step="0.1" :readonly="(fillProfile.cf_962>0.00) ? true : false" v-once>
As mentioned in docs
You can also perform one-time interpolations that do not update on
data change by using the v-once directive, but keep in mind this will
also affect any other bindings on the same node
v-once will let you set readonly for the inputs having pre populated data, and not readonly for the inputs which are not pre populated. This thing will happen only once so next time you write on the input it will won't affect the readonly anymore.
Hello i have this code:
<input type="radio" value="{{commencementDate.value}}" id="bankCommencementDateSelect" formControlName="bankCommencementDate">
<input #commencementDate id="bankCommencementDateInput" formControlName="bankCommencementDateInput" type="date" format="DD-MM-YYYY" min="{{ today | date: 'y-MM-dd' }}"/>
The value of the date input is being put into the radio input however when i save the form the value is not saving and is causing a error on the required validation on the radio input.
What i want to happen is whatever value is in the date input is set to the value of the radio button so when its saved it works but i ave tryed a few other ways and nothing seems to be working.
Any help would be amazing thanks!
Since you have a formControlName, the correct way to get the value is like this :
<input type="radio" [value]="myForm.get('bankCommencementDateInput').value" id="bankCommencementDateSelect" formControlName="bankCommencementDate">
The best way to set value in Angular reactive from is from a class component using setValue or patchValue.
You can write a function which set value(using patchValue) from a class component on keyup event.
In a page, I have a section for date-range selection. A large portion of our user base is IE 10/11, which does not support input type="date". I'm using Modernizr to show/hide the date input based on the support, and when not, provide an input of type="text", both bound to the same ng-model. Typing into the text spams the console with errors, as the text and date are incompatible. Is there a way to fix this console spam? Using a third-party library is not an option.
<div class="col-md-3" data-ng-show="searchBillCreatedDate == 'custom'">
<label>From</label>
<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-show="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-show="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
</div>
Change your ng-show to ng-if like this:
<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-if="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-if="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
You're getting the error because it's binding to the the first input's model, which is a date input. ng-show just uses CSS to hide the element but it still exists in the DOM. ng-if, however, completely removes it from the DOM, leaving you with one ng-model="searchFromDate"
i am making a form that has a date field using textfield, i want my date field to have a label format inside the textfield, here's the picture:
after clicking on the textfield the format will be erased and the hyphen will remain like this picture:
i already made the code for the label format,
here's my code:
<input type="text" name="date" value="DD_MM_YYYY" id="date" style="width:180px" onclick="if(this.value=='DD_MM_YYYY'){this.value=''}" />
</p>
My problem now is the hypen that will remain after clicking the textfield.
Anyone knows how to do that?
Thanks in advance.
I would recommend Masked Input Plugin.
http://digitalbush.com/projects/masked-input-plugin/
You can define your own type of mask by using the code:
jQuery(function($){
$("#myinput").mask("99-99-9999",{placeholder:" "});
});
Then you can define a placeholder to the input:
<input id='myinput' placeholder='dd-mm-yyyy'>
You can use the placeholder attribute.
<input placeholder=" - - " value="DD-MM-YYYY" />
You can continue to set the value to nothing when the element is focused. On blur set the value back to DD-MM-YYYY.
Note that this attribute isn't supported by all browsers.