image
I am doing a Vue js project that allows users to enter the time they used in executing tasks in HH:MM:SS (in the image) which I'll send to backend. but my problem is that I don't know how I can get vuetfy textfield to accept the input in this format. I am supposed to use vuetify textfield, not normal html input.
<v-text-field
filled
rounded
dense
class="rounded-0"
name="projectTime"
placeholder="HH:MM:SS"
v-model="entryEditForm.projectTime"
></v-text-field>
you can use the DatetimePicker component for Vuetify.js
Installation
npm install --save vuetify-datetime-picker
import Vue from 'vue'
import DatetimePicker from 'vuetify-datetime-picker'
import 'vuetify-datetime-picker/src/stylus/main.styl'
Vue.use(DatetimePicker)
Usage
<v-datetime-picker
label="Select Datetime"
v-model="datetime">
</v-datetime-picker>
date time properties
more information on codespots
Related
So I'm making an app right now that's using a package called vue-csv-import and in the docs it tells me that I can define my custom element inside the vue-csv-input component it provides which exposes two slot props v-slot="{file, change}". I've been clawing my eyes out trying to find a way for my code to work. I tried doing it like this but it doesn't work. It somehow can't find my uploaded file in my custom file input but the component works when I'm not defining a custom input and just use the default input the package provides. The package documentation has no examples on how to do actually use the slot props for a custom file input so I can't rely on that.
MyComponent
<vue-csv-input v-slot="{file, change}">
<label for="finput" class="fancy-upload-btn">Upload CSV File</label>
<input #change="change" type="file" name="file" id="finput">
</vue-csv-input>
VueCsvInput from vue-csv-import
<template>
<slot :file="file" :change="change">
<input ref="csvRef" type="file" change="change" :name="name" v-bind="$attrs">
</slot>
</template>
What's inside the change function in VueCsvInput
const change = function () { let tmpFile = csvRef.value.files ? csvRef.value.files[0] : null;
if (validate(tmpFile)) { VueCsvImportData.file = tmpFile;
}
}
I've tried ddding ref="csvRef" to my custom file input but doesn't work either. It always ends up not getting the uploaded the file and the package documentation has no examples on using it with a custom file input, only that it provides the props to do so.
Your help would be highly appreciated. If you have an alternative package to recommend then that would be nice too.
I am using django-bootstrap-datepicker-plus package, and I am trying to display an alert when the date is changed. However, jquery does not seem to detect any changes to the date.
Following this question Detect change to selected date with bootstrap-datepicker only works when I add the JQuery UI CDN to my code, which causes a problem as two datepickers appear. Is there a way to get JQuery to detect a change in django-bootstrap-datepicker without adding JQuery UI code?
forms.py
from django import forms
from bootstrap_datepicker_plus.widgets import DatePickerInput
class ExampleForm(forms.Form):
DOB = forms.DateField(required=False, label="Date of Birth",
input_formats=['%d/%m/%Y'],
widget=DatePickerInput(format='%d/%m/%Y')
)
Html
<div class="col-12 col-md-6 mb-0 p-1">
{{ form.DOB|as_crispy_field }}
</div>
Rendered HTML
There is a lot of JS packages with similar [date,time]picker functionality. django-bootstrap-datepicker-plus uses eonasdan picker, according to the docs. They use different event names. Eonasdan implementation prefixes all events with dp. namespace, as stated here, so the following should work:
$('#id_DOB').on('dp.change', ev => myHandler(ev));
I'm using Vee Validte 3.x in my Nuxt JS/Vue project. I need to be able to get the classes from a particular Validation Provider element by it's name or some unique identifier and output the classes object somewhere else on my page.
I'm struggling to figure out how, and thought a ref would work but didn't.
Here's my code:
<!-- Data Source (Table) (Validation Workaround) -->
<validation-provider
tag="div"
name="data source"
:rules="{ required: { allowFalse: false } }"
v-slot="{ errors, classes }"
>
<CustomInput
class="hidden-spans"
:options="editor.sources"
v-model="mockedCheckboxes.source.isChecked" />
<span class="block text-xs text-red-500 mt-1">{{ errors[0] }}</span>mockedCheckboxes.source.classes = classes" />
</validation-provider>
I'd like to be able to do something like:
this.$validator('data source').classes
Somewhere in my Vue file so that I can use the classes from one input elsewhere, this isn't working though.
this.$validator was actually removed in favor of ValidationObserver: https://vee-validate.logaretm.com/v3/migration.html#migrating-from-2-x-to-3-0
So far, if you try to validate something that is not directly in the component you're working on, you should watch the flags of the validation (errors) and update the status on a Vuex store. Then access Vuex back to decide if the input is valid and proceed further.
There is no global validation to my knowledge.
I'm looking for a library like bootstrap date-picker for Vue.js .
But I need one where I can make some configuration like this one I'm using in a bootstrap daterange-picker
$('.input-daterange').datepicker({
format: "mm/yyyy",
language: "es",
autoclose: true,
startView: 1,
minViewMode: 1
});
I have some example code here https://stackblitz.com/edit/js-jcldh8
I'm having some trouble using Vue js with this library so I hope someone can help me.
Thanks.
I`m using element ui for Vue.js.
https://element.eleme.io/#/en-US/component/date-picker
<el-date-picker
v-model="birthdate"
type="date"
placeholder="Pick a Date"
format="mm/yyyy"
value-format="yyyy-MM-dd">
</el-date-picker>
There are so many libraries for Vue js that you can use easily like Element Ui, Vuetify etc.
but you can use Element UI that is very easy to use and it has so many nice features like bootstrap.
you can install it by npm or use by cdn, see documentation here
and components date picker
Calling Element Ui date picker:
<el-date-picker
v-model="value2"
type="date"
placeholder="Pick a day"
:picker-options="pickerOptions1">
</el-date-picker>
For Vuetify you can go here, it also can install in npm node or use cdn.
Vuetify date picker:
<v-date-picker
v-model="picker"
:landscape="landscape"
:reactive="reactive">
</v-date-picker>
I am try use next branch of material ui https://github.com/callemall/material-ui/tree/next. Because i want use layout component. But i can not find DatePicker component!
How use DatePicker in next branch?
import {DatePicker} from 'material-ui'
WARNING in ./app/Resources/js/components/FormConstructor/Field.js
208:47-57 "export 'DatePicker' was not found in 'material-ui'
Firstly, I am in the same boat. And I dearly miss the DatePicker from the stable release of material-ui (dated 10/04/2018). I too upgraded to the #next, at the moment at v1.0.0-beta.41 and reached the state of shock to not have found the elegant DatePicker.
This is what I have noticed and now changing to -
https://material-ui-next.com/demos/pickers/
It has a date picker, which is actually based out of the TextField component having the type set to "date".
Copying as is -
<TextField
id="date"
label="Birthday"
type="date"
defaultValue="2017-05-24"
className={classes.textField}
InputLabelProps={{
shrink: true,
}}
/>
A small suggestion would be to check if the path exists under the local node_modules. You can also quickly check the component catalogue (at https://material-ui-next.com/) for the version you are using.
Hope this helps.
At the moment to write this answer (2017-06-12) it's still not supported. See https://material-ui-1dab0.firebaseapp.com/getting-started/supported-components
As an alternative to the native controls you can use the Mobiscroll Calendar and Date picker.
Pretty customizable and comes with material styling that fits well with the general look & feel.
Calendar component
Date picker component
Full disclosure: this is a commercial component, and I am one of the makers, just though it could help someone looking for a solution.
Import as DatePickers, TimePickers, DateAndTimePickers in latest material-ui version V1.0.0-beta.26.
Eg:
import {DatePickers, TimePickers, DateAndTimePickers} from 'material-ui';
Importing Datepicker as like below is no more valid in latest version.
Eg:
import DatePicker from 'material-ui/DatePicker';
You can check out here where I did an example of creating a datepicker using material-ui (next branch)
You can either import the component or just check out the source code to learn how to create a datepicker on your own
use this
import DatePicker from 'material-ui/DatePicker';
also visit this link for completed details about material-ui date-picker.
Don't forget to install material-ui i.e npm install --save material-ui
sample code below
const DatePickerExampleSimple = () => (
<div>
<DatePicker hintText="Portrait Dialog" />
<DatePicker hintText="Landscape Dialog" mode="landscape" />
<DatePicker hintText="Dialog Disabled" disabled={true} />
</div>
);
export default DatePickerExampleSimple;