I am attempting to build a Vuetify form that enables inputting of a date format that includes both the date and specific time of the event, for both starting and ending. So far, I have the following:
<v-form #submit.prevent="addEvent">
<v-text-field v-model="eventName" type="text" label="event name (required)"></v-text-field>
<v-text-field v-model="start" type="date" label="start (required)"></v-text-field>
<v-text-field v-model="end" type="date" label="end (required)"></v-text-field>
<v-btn type="submit" color="primary" class="mr-4" #click.stop="dialog = false">
Add Event
</v-btn>
</v-form>
Is there an input type that allows both date and time to be inputted into the same input field? If so, how can I implement such a field? Thanks!
There are Vuetify components for picking a date and time, but no combined one.
There is a basic html component you could check out: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
Otherwise you'll have to make a custom one.
In HTML way, you can use datetime-local as type
<input type="datetime-local" name="datetime">
Is there an input type that allows both date and time to be inputted into the same input field?
The v-text-field component in Vuetify lets you select date and time together if you set type="datetime-local" instead of "date".
Explanation of datetime-local: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
Related
I am using react js for my form. currently i am loading my date to the text box. but currently its show with different format please check this
<Form.Control
type="text" disabled
size="sm"
placeholder=""
name="termDate"
onChange={handleChange}
value={values.termDate}
/>
I am setting the value using the code given below:
setFieldValue('termDate', dataObj.termDate);
when I use the above code, textbox date load as below.
I need to load this date as 2021-07-07.
How do I format this before loading it to the textbox?
Use momentjs. This oneliner will help
moment(dataObj.termDate).format("YYYY-MM-DD");
I want to try to implement a gradually hidden placeholder on my following datepicker:
<b-input-group class="input-datepicker">
<b-input-group-prepend>
<b-datepicker
v-model="datepicker"
button-only
locale="en-US"
></b-datepicker>
</b-input-group-prepend>
<b-input
v-model="datepicker"
type="text"
placeholder="YYYY-MM-DD"
autocomplete="off"
class="mr-0"
></b-input>
</b-input-group>
I use Vuejs with bootstrap-vue and my date Format is YYYY-MM-DD
I wish to have, for example, on input field at beginning ____-__-__ and we gradually input data, we have for example 2020-__-__ or 2020-0_-__ and reversely
I have searched in Internet and i don't find any good answers.
Sorry for my English if is not correct, i'm french
Thank you in advance
Best Regards,
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 am attempting to build a Vuetify calendar based on the following repo: https://github.com/jsfanatik/vuestacks-calendar-vue-firebase. My goal is to enable the user to add a new calendar event by clicking directly on a date in the calendar, as opposed to merely clicking the new event button at the top of the UI. To achieve this, I changed #click:date="viewDay to #click:date="dialogDate = true" in order to enable clicking of a date to open a new event input dialog box (see dialog box code below). I want to modify this new dialog box so that the start and end time of the date clicked (presumably 12am to 12am) are automatically passed into this dialog box and bound to the start and end fields as soon as the user clicks a given date. Any recommendations on how to achieve this?
Dialog - Date click
<v-dialog v-model="dialogDate" max-width="500">
<v-card>
<v-container>
<v-form #submit.prevent="addEvent">
<v-text-field v-model="name" type="text" label="event name (required)"></v-text-field>
<v-text-field v-model="details" type="text" label="detail"></v-text-field>
<v-text-field v-model="start" type="date" label="start (required)"></v-text-field>
<v-text-field v-model="end" type="date" label="end (required)"></v-text-field>
<v-text-field v-model="color" type="color" label="color (click to open color menu)"></v-text-field>
<v-btn type="submit" color="primary" class="mr-4" #click.stop="dialog = false">
create event
</v-btn>
</v-form>
</v-container>
</v-card>
</v-dialog>
Apologies if I misunderstood your question, but I think you might want to pass the date in through a method like:
Instead of
#click:date="dialogDate = true"
Do something like
#click:date="setDialogDate(date)"
And then have a method called setDialogDate that gets passed in the specific date the user clicked on. You can open and close the dialog in that method then.
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()