This is my code.
import Datepicker from 'vuejs-datepicker'
if(this.DOB > this.dateOfJoin){
alert("DOB should not be greater than Date of Join.asd.!")
this.$refs.dob.focus();
}
<div class="form-group">
<label class="col-sm-3 control-label">Date of Birth</label>
<datepicker v-model="DOB" name="DOB" ref="dob" class="required"></datepicker>
</div>
I am using the vuejs-datepicker component, but I cannot set focus on the datepicker.
After reading through the docs, I recommend a different approach. The datepicker has a disabled property. This allows you to specify a from property that the date cannot be greater than and a to property that the date cannot be earlier than. So if you do not want users to select a date of birth greater than the date they joined, set the from property to the date joined.
In data properties
data:{
dobDisabled:{ from: <date joined> }
}
And on the datepicker,
<datepicker :disabled="dobDisabled"></datepicker>
That will prevent users from picking an invalid date.
Here is an example.
Original
It looks like the datepicker you are using renders a readonly input element, which I expect cannot get focus. In any case, the component which wraps the input does not support a focus method.
<input
:type="inline ? 'hidden' : 'text'"
:class="[ inputClass, { 'form-control' : bootstrapStyling } ]"
:name="name"
:id="id"
#click="showCalendar"
:value="formattedValue"
:placeholder="placeholder"
:clear-button="clearButton"
:disabled="disabledPicker"
:required="required"
readonly>
Instead you might try showing the calendar.
this.$refs.dob.showCalendar()
Related
I am using ng-pick-datetime for selecting and displaying dates. I have changed to format of the date to DD/MM/YYYY using dateTimeAdapter.setLocale('en-IN') in constructor. If I click the calendar and select the date Its in format of DD/MM/YYYY but If I manually type 03/28/2019, it still accepts. I want to restrict other format except DD/MM/YYYY even on typing. Please help me out.
Code
<input (ngModelChange)="onChangeDate($event)" [(ngModel)]="dob" name="date" [owlDateTimeTrigger]="dt1" [owlDateTime]="dt1" required>
<owl-date-time class="" [pickerType]="'calendar'" [startView]="'multi-years'" #dt1></owl-date-time>
import { DateTimeAdapter } from 'ng-pick-datetime';
constructor(dateTimeAdapter: DateTimeAdapter<any>){dateTimeAdapter.setLocale('en-IN');}
There are several ways to validate your input. Here I have provided solution to your problem.
https://stackblitz.com/edit/ng-pick-datetime-format-i18n-qwhyb3?embed=1&file=src/app/app.component.html
I have added type of input as "text", pattern as you needed "DD/MM/YYYY" and background css to get valid and invalid status of input tag.
<input type="text" pattern="^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}$" (ngModelChange)="onChangeDate($event)" [(ngModel)]="dob" name="date" [owlDateTimeTrigger]="dt1" [owlDateTime]="dt1" required>
I used Bootstrap DatePicker in a form, this is not a mandatory field. So whenever i submit a form without selecting the date on Datepicker. The default value like this 01-01-1970 only stored on datebase. I want to store like 0 instead of this value 01-01-1970.
I use Code like this
$('#dateRangePicker1').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
minDate: 0
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div class="col-xs-12">
<div class="form-group input-group input-append date" id='dateRangePicker4'>
<input type="text" id="cust_dob" class="form-control" name="date4" value="" placeholder="DOB" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
I do believe that by default, the bootstrap datepicker doesn't set the default value. You can check it here: Sandbox. You can open developer console and try
$('#sandbox-container input').datepicker('getDate')
This will return null for you. If this is not set to be required, null will be sent through form.
My belief is what you have set in your database is the cause of this behaviour. I think you have set the type to the column to be DATETIME, (not null, too) which makes the database to set in the default date, which is 01-01-1970 (the start of Unix timestamp). If this is the case, you can set the column type to be varchar, set the value to be some common format (YYYY-mm-dd HH:mm:ss is one of them). On client side, you can use some popular datetime library like MomentJS to parse the time or generate dateTime string to save to database.
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 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">
My setup is SailsJS + Mongo using EJS for inserting database values onto my page.
On my page I'm using a standard HTML form date picker and to set a date. Using this I can successfully submit the selected date to my database with no issues. The date format looks like this in my DB: 2015-06-09T00:00:00.000Z
I can call this value into a regular text field, but if I try to populate a date picker value, it just shows up like the value has not been populated.
Is there something I'm missing or some inbetween step which needs to be taken?
Here is what my form entry looks like for the date picker:
<div class="control-group">
<label class="control-label" for="resStart">When do you need the space?</label>
<div class="form-group">
<input type="date" class="form-control" value="<%= request.resStart %>" name="resStart">
</div>
</div>
<div class="control-group">
<label class="control-label" for="resEnd">When will you be done with the space?</label>
<div class="form-group">
<input type="date" class="form-control" value="<%= request.resEnd %>" name="resEnd">
</div>
</div>
your value in DB is actually a datetime value. i think just passing it to date picker will not be recognized. it needs to be changed to date format. the input tag in your html is date type. i think change this to text will get the value appear. but to make the date picker work you will need to do some data conversion between the datetime format 2015-06-09T00:00:00.000Z and 2015-06-09