$(function() {
$('input.month-mode').datetimepicker({
viewMode: 'months',
format: 'MM/YYYY',
showClose: true,
maxDate: current_month,
});
});
I want to add close text to it. by default it shows 'X', but I want to change it. Is it possible?
You can use icons option to define a custom css class for your icon and then you can write a css rule to customize close text as shown below:
$(function () {
var current_month = moment(); // just a sample value
$('#datetimepicker1').datetimepicker({
showClose: true,
viewMode: 'months',
format: 'MM/YYYY',
maxDate: current_month,
icons: {
close: 'closeText'
}
});
});
.closeText:before {
content: "Close";
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
One way to do this is to use the icon classes to a add a new class and then use css to add some content. Something like:
$(function() {
$('input.month-mode').datetimepicker({
viewMode: 'months',
format: 'MM/YYYY',
showClose: true,
maxDate: current_month,
icons: {
close: 'textclass1'
}
});
});
Css:
.textclass1::before {
content: "Close";
}
Related
I am trying to initiate a function from methods while an input is keyup, But it's not working. My codes from template are :
<q-input type="number" min="1" dense borderless debounce="300" class="q-ma-xs" v-
model="invoice_product.item_qty" placeholder="quantity" filled
#keyup="calculateLineTotal(invoice_product)" />
My method :
<script>
export default {
setup() {
return {
invoice_product: {
item_qty: ''
}
}
},
methods: {
calculateLineTotal(invoice_product) {
alert(invoice_product.item_qty)
}
}
}
</script>
I also tried with v-on:keyup
enter code hereYou can use watch property using your v model variable and there you can write your logic.
When your model value change it will called watch property
watch:{
“Variable” : function(val) {
//method
}
}
Try to replace setup with data:
new Vue({
el: '#q-app',
data() {
return {
invoice_product: {item_qty: ''}
}
},
methods: {
calculateLineTotal(invoice_product) {
alert(invoice_product.item_qty)
}
},
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar#1.19.5/dist/quasar.min.css" rel="stylesheet" type="text/css">
<div id="q-app">
<q-input type="number" min="1" dense borderless debounce="300" class="q-ma-xs" v-
model="invoice_product.item_qty" placeholder="quantity" filled
#keyup="calculateLineTotal(invoice_product)" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar#1.19.5/dist/quasar.umd.min.js"></script>
I am brand new to using VueJs (first day!)
I want to validate an email field, and return focus to the email inut if not valid. I am using the watch property (see below), and although I can successfully watch value changes, I am not able to set focus back to the email field.
What am I doing wrong?
Code snippet
<!DOCTYPE html>
<head>
<title>V3 Example</title>
<script src="https://unpkg.com/vue#3"></script>
</head>
<style type="text/css">
form input, form button {
display: block;
margin: 3px;
}
</style>
<body>
<div id="app">
<form #submit.prevent >
<h3></h3>
<input type="username" v-model="username" />
<input ref="email" type="email" v-model="email" />
<input type="password" v-model="passwd" autocomplete="off"/>
<button #click="logIt" >Login </button>
</form>
</div>
<script>
let app = Vue.createApp({
data() {
return {
username: '',
email: '',
passwd: '',
}
},
methods: {
logIt() {
console.log('here!');
}
},
watch: {
email(val1, val2){
if (!val2.includes('#')) {
this.$refs.email.focus(); // <- this is supposed to return focus to email input
console.log('Not valid email!');
}
else {
console.log(val1);
console.log(val2);
}
}
}
})
app.mount('#app');
</script>
</body>
</html>
Try this:
this.$refs.email.$el.focus();
Here is a solution that works, I've added a method onSubmit which is called when the form submits and inside it I validate email field, and focus it if is not valid. The key here is nextTick which makes sure to wait before Vue does any DOM update it needs before focusing the element.
<!DOCTYPE html>
<head>
<title>V3 Example</title>
<script src="https://unpkg.com/vue#3"></script>
</head>
<style type="text/css">
form input, form button {
display: block;
margin: 3px;
}
</style>
<body>
<div id="app">
<form #submit.prevent="onSubmit" >
<h3></h3>
<input type="username" v-model="username" />
<input ref="email" type="email" v-model="email" />
<input type="password" v-model="passwd" autocomplete="off"/>
<button #click="logIt" >Login </button>
</form>
</div>
<script>
let app = Vue.createApp({
data() {
return {
username: '',
email: '',
passwd: '',
}
},
methods: {
logIt() {
console.log('here!');
},
onSubmit() {
if (!this.email.includes('#')) {
this.$nextTick(() => { // must wait for next tick before interacting with DOM
this.$refs.email.focus();
console.log('Not valid email!');
})
}
}
},
watch: {
email(val1, val2){
if (!val2.includes('#')) {
this.$refs.email.focus(); // <- this is supposed to return focus to email input
console.log('Not valid email!');
}
else {
console.log(val1);
console.log(val2);
}
}
}
})
app.mount('#app');
</script>
</body>
Using Vuelidate you can reset the validation errors by using this.$v.$reset(). In this Codepen example resetting the lastName field that uses a Vuetify component works - $invalid is true while $error is set to false.
When resetting the regular text input for firstName it doesn't work as the $error flag is still true. How can I modify the text input so that $error is false when calling reset?
I've also tried this.$nextTick(() => {...}) but that doesn't work either.
Vue.use(window.vuelidate.default)
var validationMixin = window.vuelidate.validationMixin
const {
maxLength,
required
} = window.validators
new Vue({
el: '#app',
mixins: [validationMixin],
data: () => ({
form: {
firstName: '',
lastName: ''
}
}),
validations: {
form: {
firstName: {
required, maxLength: maxLength(2)
},
lastName: {
required, maxLength: maxLength(2)
},
}
}
})
input.raw {
border: solid;
}
.is-invalid {
border-color: #FF5252 !important;
}
<html>
<head>
<script src="https://unpkg.com/vuelidate#0.6.1/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate#0.6.1/dist/vuelidate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>
<body>
<div id="app">
<label for="firstName">First Name</label>
<input
v-model="form.firstName"
id="firstName"
class="raw"
:class="{ 'is-invalid': $v.form.firstName.$error }"
type="text"
width="100%"
:oninput="$v.form.firstName.$touch()"
:onblur="$v.form.firstName.$touch()"
/>
<button #click="$v.form.firstName.$touch()">
$touch
</button>
<button #click="$v.form.firstName.$reset()">
$reset
</button>
<pre>{{ $v.form.firstName }}</pre>
</div>
</body>
</html>
In your example, you are using oninput and onblur HTML attributes, but in Vue, you should use #input(v-on:input) and #blur(v-on:blur) bindings instead. See docs for details.
Replacing HTML attributes with Vue bindings made your example work correctly:
Vue.use(window.vuelidate.default)
var validationMixin = window.vuelidate.validationMixin
const {
maxLength,
required
} = window.validators
new Vue({
el: '#app',
mixins: [validationMixin],
data: () => ({
form: {
firstName: '',
lastName: ''
}
}),
validations: {
form: {
firstName: {
required, maxLength: maxLength(2)
},
lastName: {
required, maxLength: maxLength(2)
},
}
}
})
input.raw {
border: solid;
}
.is-invalid {
border-color: #FF5252 !important;
}
<html>
<head>
<script src="https://unpkg.com/vuelidate#0.6.1/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate#0.6.1/dist/vuelidate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>
<body>
<div id="app">
<label for="firstName">First Name</label>
<input
v-model="form.firstName"
id="firstName"
class="raw"
:class="{ 'is-invalid': $v.form.firstName.$error }"
type="text"
width="100%"
#input="$v.form.firstName.$touch()"
#blur="$v.form.firstName.$touch()"
/>
<button #click="$v.form.firstName.$touch()">
$touch
</button>
<button #click="$v.form.firstName.$reset()">
$reset
</button>
<pre>{{ $v.form.firstName }}</pre>
</div>
</body>
</html>
This is Issue From Vuelidate and they must be fixed, in this position you can not reset form and give same (badly) behavior you can re-render by the router
// re render component for reset all fileds
this.$router.go(0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<div class="layui-input-block" style="width:510px;">
<form class="layui-form" action="">
<select v-model="form.entrCode">
<option value="">please select an entry</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
</div>
</div>
</body>
</html>
<script src="//cdn.bootcss.com/vue/2.2.4/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
action: '',
form: {
entrCode: '',
}
},
watch: {
action: function (val) {
if (val !== "add"){
var vm = this;
//$.get("/park/GetLEDDtl", { areaId: vm.form.code }, function (rs) {
// vm.form = rs;
//}, "json");
//simulate setting on ajax.success
vm.form = { "entrCode": "20" };
}
},
"form.entrCode": function (val, old) {
alert("【entryCode changed】 new:" + val + " old:" + old);
}
},
created: function () {
this.action = "edit";
}
});
</script>
Please look at my code. I've only set app.form = object once, why there are two value changed be watched?
First, it changes from '' to '20', which is what I'm expected, but suddenly it changes from 20 to undefined.
(The code patsed I commented ajax request, and set value directly.)
What just happened?
There is no option with the value you are setting the variable to. The select object cannot be synced up to show the value, so it reverts the value to undefined.
I have an ASP.Net MVC4 website. Here's the problem view:
#model TVS.ESB.BamPortal.Website.Models.MyTasksViewModel
#using System.Web.Script.Serialization
#{
ViewBag.Title = "My Tasks";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>#ViewBag.Title</h2>
#{ string data = new JavaScriptSerializer().Serialize(Model); }
<div id="Knockout">
#* When select added thenKoGrid does not display! <select class="form-control" data-bind="options:users, optionsText: 'AdLoginId', value:selectedUser" />*#
<div id="Buttons">
<span>Reassign to User: <input class="form-control" data-bind="text:username"/></span>
<button class="btn-default" data-bind="click:promoteState">Promote State</button>
<button class="btn-default" data-bind="click:reassignTasks">Reassign Task(s)</button>
</div>
<div id="KoGrid" data-bind="koGrid: gridOptions" />
</div>
#section Scripts {
<script src="~/KnockoutVM/Mytasks.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/KoGrid.css">
<script type="text/javascript">
var vm = new ViewModel(#Html.Raw(data));
ko.applyBindings(vm, document.getElementById("Knockout"));
</script>
}
I have commented out the select that gives the problem. If I leave this in, then it displays fine, including the items from the observeable array I'd expect. However, for some reason the KoGrid is then not displayed. If I remove the Select then the KoGrid displays just fine. I've tried refreshing with the Google dev tool console window open but no errors are reported. Any ideas why?
Here are relevant parts of the knockout view model:
function ViewModel(vm) {
var self = this;
this.myData = ko.observableArray(vm.Recs);
this.selected = ko.observableArray();
this.users = ko.observableArray(vm.Users);
this.selectedUser = ko.observable("");
this.username = ko.observable("");
this.rows = ko.observableArray(vm.Recs);
this.gridOptions = {
data: self.myData,
enablePaging: true,
pagingOptions: self.pagingOptions,
filterOptions: self.filterOptions,
selectWithCheckboxOnly: true,
selectedItems: self.selected,
canSelectRows: true,
displaySelectionCheckbox: true,
columnDefs: [{ field: 'Timestamp', displayName: 'Timestamp', width: 130 },
{ field: 'State', displayName: 'State', width: 70 },
{ field: 'FaultApplication', displayName: 'Application', width: 110 },
{ field: 'FaultExceptionMessage', displayName: 'Exception Message', width: 400 },
{ field: 'FaultServiceName', displayName: 'ServiceName', width: 140 },
{ field: 'LinkToFaultsPage', displayName: 'Link to Fault', width: 80, cellTemplate: '<a data-bind="attr: { href: $parent.entity.LinkToFaultsPage}" >Fault</a>' }
]
};
};
Your KOGrid is not displayed because your HTML is invalid:
The select tag cannot be self-closing see also on MDN.
So you need to always write out the closing tag </select>:
<select class="form-control"
data-bind="options:users,
optionsText: 'AdLoginId', value:selectedUser">
</select>
Otherwise the HTML is invalid and Knockout cannot interpret it properly.
I was able to work-around by moving the select list to a separate div and using the ko.applyBindings twice:
<div id="ControlPanel">
<select class="form-control" data-bind="options:users, optionsText: 'AdLoginId', value:selectedUser" />
<div id="Buttons">
<span>Reassign to User: <input class="form-control" data-bind="text:username" /></span>
<button class="btn-default" data-bind="click:promoteState">Promote State</button>
<button class="btn-default" data-bind="click:reassignTasks">Reassign Task(s)</button>
</div>
<div id="KoGrid" data-bind="koGrid: gridOptions" />
</div>
#section Scripts {
<script src="~/KnockoutVM/Mytasks.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/KoGrid.css">
<script type="text/javascript">
var vm = new ViewModel(#Html.Raw(data));
ko.applyBindings(vm, document.getElementById("ControlPanel"));
ko.applyBindings(vm, document.getElementById("KoGrid"));
</script>
}