I am new to vue.js.
I have a form that has two date input fields like Delivery date and Knock date.
I want to set knock date automatically two days before delivery date. For example if the delivery date is 20/9/2021, the knock date should be 18/9/2021.
How to implement this in vue.js ?
Here are the form fields given below:
<template>
<form>
<label for="">PO Delivery Date</label>
<input
class="form-control"
type="date"
v-model="PO_DeliveryData"
v-validate="'required'"
placeholder="PO Delivery Date"
/><br />
<label for="">Knock Date</label>
<input
class="form-control"
type="date"
v-model="knock_Date"
v-validate="'required'"
placeholder="Knock Date"
/><br />
</form>
</template>
<script>
export defaults:{
}
</script>
Try like following snippet:
new Vue({
el: '#demo',
data() {
return {
PO_DeliveryData: '',
knock_Date: ''
}
},
watch: {
PO_DeliveryData() {
let d = new Date(this.PO_DeliveryData);
d.setDate(d.getDate() - 2);
this.knock_Date = d.toISOString().slice(0, 10)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<form>
<label for="">PO Delivery Date</label>
<input
class="form-control"
type="date"
v-model="PO_DeliveryData"
placeholder="PO Delivery Date"
/><br />
<label for="">Knock Date</label>
<input
class="form-control"
type="date"
v-model="knock_Date"
placeholder="Knock Date"
/><br />
</form>
</div>
It's easy to calculate with momentjs
<template>
<form>
<label for="">PO Delivery Date</label>
<input
v-model="deliveryDate"
class="form-control"
type="date"
placeholder="PO Delivery Date"
/><br />
<label for="">Knock Date</label>
<input
:value="knockDate"
class="form-control"
type="date"
placeholder="Knock Date"
/>
<pre>deliveryDate: {{ deliveryDate }}</pre>
<pre>knockDate: {{ knockDate }}</pre>
</form>
</template>
<script>
import moment from "moment";
export default {
name: "App",
data: () => {
return {
deliveryDate: "",
knockDate: "",
};
},
watch: {
deliveryDate(val) {
if (val) {
this.knockDate = moment(val, "YYYY-MM-DD")
.subtract(2, "day")
.format("YYYY-MM-DD");
} else {
this.knockDate = "";
}
},
},
};
</script>
Related
I have 2 views for adding data to a database, one for songs and one for genres. However, I want to populate the input fields with random data, but I don't know why importing chance in genres, but not in songs, makes songs working, but not genres page.
Genre View:
<template>
<div>
<input type="text" id="genre-name" placeholder="Name" v-model="name" /><br />
<input type="text" id="genre-country" placeholder="Country" v-model="country" /><br />
<input type="text" id="genre-year" placeholder="Year" v-model="year" /><br />
<button #click="addGenre" id="genre-button">Add Genre</button>
</div>
</template>
<script>
import { requestOptions, base_url } from '#/utils/requestOptions';
//var chance = require('chance').Chance(); this works for both, when importing only in one file
import {chance} from "chance"; //<= this is the line I am talking about
export default {
data() {
return {
name: chance.radio(),
country: chance.country({ full: true }),
year: chance.year()
}
},
methods: {
addGenre() {
//...
}
}
}
</script>
Song View:
<template>
<div>
<input type="text" id="name" placeholder="Name" v-model="name" /><br />
<input type="text" id="author" placeholder="Author" v-model="author" /><br />
<input type="text" id="country" placeholder="Country" v-model="country" /><br />
<input type="text" id="duration" placeholder="Duration" v-model="duration" /><br />
<input type="text" id="views" placeholder="Views" v-model="views" /><br />
<input type="text" id="genre" placeholder="Genre" v-model="genre" /><br />
<button #click="addSong">Add Song</button>
</div>
</template>
<script>
import { requestOptions, base_url } from '#/utils/requestOptions';
//this is working without importing chance
export default {
data() {
return {
name: chance.word(),
author: chance.last(),
country: chance.country({ full: true }),
duration: chance.minute(),
views: chance.integer({ min: 0, max: 100000000 }),
genre: chance.radio()
}
},
methods: {
addSong() {
//...
}
}
}
</script>
The error message I am getting when I am opening the Genre View is:
TypeError: undefined is not an object (evaluating 'chance__WEBPACK_IMPORTED_MODULE_1__.chance.radio')
So I want to know why is it working on the Song View?
If I delete the import line, it will not work in any view.
I am trying to make a checkbox with vue js, so that the method is not written. I want the checkbox to be false in the first place, the next step is that when the checkbox is posted, I want "opening_balance" to be sent as an empty array.
or vice versa, if the checkbox is checked, I want it to appear in "opening_balance" when the data is posted.
For example:
POST
No Checkbox
opening_balance: {}
POST
Checked
opening_balance: {date: "2021-08-30", net_total: "1000.00", currency: "USD"}
new Vue({
el: '#app',
data() {
return {
attributes: {
opening_balance: {
net_total: 0,
date: new Date(),
currency: USD,
},
}
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<div id="app" style="padding: 1rem;">
<div class="d-flex">
<input class="form-check-input" type="checkbox" value="false" #click="attributes.opening_balance" v-model="attributes.opening_balance">
<label class="form-check-label"><b> opening balance</b></label>
</div>
<div v-if="attributes.opening_balance">
<input type="text" id="Detaylari" class="form-control" v-model="attributes.opening_balance.date">
<input type="text" class="form-control" v-model="attributes.opening_balance.net_total">
<input type="text" class="form-control" v-model="attributes.opening_balance.currency">
</div>
</div>
If i understand you correctly please look at snippet bellow:
const app = new Vue({
el: '#app',
data() {
return {
attributes: {
opening_balance: {
},
}
}
},
methods: {
setBalance(e) {
if(!e.target.checked) {
this.attributes.opening_balance= {}
}
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" style="padding: 1rem;">
<div class="d-flex">
<input class="form-check-input" type="checkbox" #click="setBalance">
<label class="form-check-label"><b> opening balance</b></label>
</div>
<div v-if="attributes.opening_balance">
<input type="text" id="Detaylari" class="form-control" v-model="attributes.opening_balance.date">
<input type="text" class="form-control" v-model="attributes.opening_balance.net_total">
<input type="text" class="form-control" v-model="attributes.opening_balance.currency">
<p>{{ attributes.opening_balance }}</p>
</div>
</div>
You can use a watcher to set a empty object when checked is false.
new Vue({
el: '#app',
watch: {
isPosted: function(val) {
// on posted unchecked set empty object
if (!val) {
this.attributes.opening_balance = {};
} else {
this.$set(this.attributes.opening_balance, "date", "2021-08-30");
this.$set(this.attributes.opening_balance, "net_total", "1000.00");
this.$set(this.attributes.opening_balance, "currency", "USD");
}
},
},
data() {
return {
isPosted: false,
attributes: {
opening_balance: {},
}
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<div id="app" style="padding: 1rem;">
<div class="d-flex">
<input class="form-check-input" type="checkbox" v-model="isPosted">
<label class="form-check-label"><b> opening balance</b></label>
</div>
<div v-if="isPosted">
<input type="text" id="Detaylari" class="form-control" v-model="attributes.opening_balance.date">
<input type="text" class="form-control" v-model="attributes.opening_balance.net_total">
<input type="text" class="form-control" v-model="attributes.opening_balance.currency">
</div>
</div>
I need some help. I am trying to load my javascript file and listing to changing on checkbook when I click my checkbox to show or hide password. But for some reason it is not working. I have try everything, but out of ideas how to solve the problem.
$(document).ready(function () {
$('#showPassword').on('click', function () {
if ($(this).prop('checked')) {
$('#password').attr('type', 'text')
} else {
$('#password').attr('type', 'password')
}
})
<template>
<div class="container-fluid p-0">
<div class="col-md-12 content">
<div class="col-md-6 join-container" id="join-container">
<form class="col-md-12 col-sm-12"
>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control"
id="password" v-model="password"
placeholder="Password">
</div>
<div class="form-group pl-0">
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="showPassword" />
<label class="form-check-label"
for="show-password">Show Password</label>
</div>
</div>
<br>
</form>
</div>
</div>
</template>
<script>
import Main from '../script/Index.js'
export default {
name: 'Register',
data: () => ({
}),
methods: {
},
components: {
Main
}
}
</script>
You're using jQuery event handlers (the $ bit) outside a script tag in a Vue component file. I wouldn't expect that code to do anything.
If you wanted that code to execute, you'd need it to be inside the <script> tags in your component. However, Vue already has event listeners (link to documentation), including listening for clicks on elements. There is no need to use two frameworks for this.
To implement a rough show password button (using your existing markup), here's how I'd do it (removing extra markup to highlight the important Vue-logic):
<template>
<div>
<input :type="passwordType" v-model="password">
<input v-model="showPassword" type="checkbox"/>
</div>
</template>
<script>
export default {
data() {
return {
showPassword: false,
password: ''
}
},
computed: {
passwordType() {
if (this.showPassword) {
return 'text'
} else {
return 'password'
}
}
}
}
</script>
It's not advisable to mix jQuery and Vue since they have separate lifecycles.
Vue is able to do everything you're after by itself.
Simply bind your checkbox state to a Vue data property and use that to determine the password field's type, eg
<input :type="passwordFieldType" class="form-control"
id="password" v-model="password"
placeholder="Password">
<!-- snip -->
<input v-model="passwordFieldType" true-value="text" false-value="password"
class="form-check-input" type="checkbox"
id="showPassword">
data: () => ({
passwordFieldType: 'password'
})
See https://v2.vuejs.org/v2/guide/forms.html#Checkbox-1
new Vue({
el: '#app',
data: () => ({
password: '',
passwordFieldType: 'password'
})
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<form class="col-md-12 col-sm-12" id="app">
<div class="form-group">
<label for="password">Password</label>
<input :type="passwordFieldType" class="form-control" id="password" v-model="password" placeholder="Password">
</div>
<div class="form-group pl-0">
<div class="form-check">
<input v-model="passwordFieldType" true-value="text" false-value="password"
class="form-check-input" type="checkbox" id="showPassword" />
<label class="form-check-label" for="show-password">Show Password</label>
</div>
</div>
<br>
</form>
I want to put start date as final date of final date column if user doesn't select final date when form submit. my code is below.
<div class="col-md-4">
<div class="input-group">
<label class="control-label">{!!Lang::get('site_lang.start_date')!!}</label>
<input id="startDate" style="width:80%;" name="start_date" autocomplete="off"/>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<label class="control-label">{!!Lang::get('site_lang.end_date')!!}</label>
<input id="endDate" style="width:80%;" name="end_date" autocomplete="off"/>
</div>
</div>
Script
<script>
$('#startDate').datepicker({
uiLibrary: 'bootstrap4',
iconsLibrary: 'fontawesome',
format: '{{config('app.date_format_js')}}',
maxDate: function () {
return $('#endDate').val();
}
});
$('#endDate').datepicker({
uiLibrary: 'bootstrap4',
iconsLibrary: 'fontawesome',
format: '{{config('app.date_format_js')}}',
minDate: function () {
return $('#startDate').val();
}
});
</script>
How about calling a function before submitting form and check if the endDate is empty or undefined. If so just set the startDate to endDate input field.
function beforeSubmit()
{
if($('#endDate').val()==="" || $('#endDate').val() === undefined)
{
$('#endDate').val($('#startDate').val());
}
}
<form onsubmit="return beforeSubmit()" >
<input type="submit" name="Submit" value="Submit"/>
</form>
If you use jquery ui datepicker
Two way you can set end Date
$('#startDate').datepicker();
$('#endDate').datepicker();
// Set End date on click submit button if end date is empty set end date value as start date
// then submit form
$("#submit").click(function(){
if(!$("#endDate").val()){
var startDate = $("#startDate").val()
$("#endDate").val(startDate)
}
$("#form").submit()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form id="form" action="">
<input id="startDate" name="start_date" autocomplete="off"/>
<input id="endDate" name="end_date" autocomplete="off"/>
<button id="submit" type="submit">Send</button>
</form>
I need to find a way to basically show "per Month" in the assessments_period input if the assessments fee input has a typed-in value.
I've tried bindings and components but can't pull this off.
<div class="col-lg-6">
<div class="form-group">
<label>Assessment Fee <span class="note">C</span></label>
<input type="text" class="form-control" v-model="document.assessments_fee" placeholder="$">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Assessment Period <span class="note">C</span></label>
<input type="text" class="form-control" v-model="document.assessments_period" placeholder="(per month/quarter/etc.)">
</div>
</div>
data() {
return {
now: new Date().toISOString(),
document: {
assessments_fee: '',
assessments_period: '',
}
}
},
components: {
assessments_fee: function() {
if(this.assessments_fee != null || '') this.assessments_period = "per Month";
}
},
you can create a watcher for assessments_fee so when its not null assessments_period= 'per Month'.
Here is how you can do it:
new Vue({
el: '#app',
data() {
return {
now: new Date().toISOString(),
document: {
assessments_fee: '',
assessments_period: '',
}
}
},
computed: {
assessmentsFee() {
return this.document.assessments_fee
}
},
watch: {
assessmentsFee() {
this.document.assessments_fee ?
this.document.assessments_period = "per Month" :
this.document.assessments_period = ""
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="col-lg-6">
<div class="form-group">
<label>Assessment Fee <span class="note">C</span></label>
<input type="text" class="form-control" v-model="document.assessments_fee" placeholder="$">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Assessment Period <span class="note">C</span></label>
<input type="text" class="form-control" v-model="document.assessments_period" placeholder="(per month/quarter/etc.)">
</div>
</div>
</div>