I'm using cleave.js for a date input field in my Vue.js project.
The option that I passed was this:
<cleave :options="{
date: true,
datePattern: ['m', 'd','Y']
}" id="date-input" placeholder="MM/DD/YYYY" type="text"></cleave>
How do I set maximum value for Y ?
Cleave is an input formatting library and really nothing more. It's up to you to determine how you want to limit user input. Fortunately it offers an api for accessing the underlining raw input value. The API can be found here.
Youll need to write an event listener to check the users input and cap the value as you need.
I did that for card security number and working fine
const cardCCV = new Cleave("#cardCCV", {
numeral: true,
stripLeadingZeroes: false,
onValueChanged: function (e) {
const maxSize = 3;
if (e.target.rawValue.length > maxSize) {
cardCCV.setRawValue(e.target.rawValue.substring(0, maxSize));
}
},
});
Related
I have an input field that either allows negative and positive numbers, or only positive numbers based on a value of a select.
When changing the value of the select option, I'm trying to modify the rule of the input field like this:
const id = '#myId';
$(id).attr("data-val-range-min", -10000);
removeRules(id);
addRules(id);
$(id).change(); // trying to trigger the validation of the rule
The removeRules is a function:
let removeRules = function removeRules(field) {
$(field).rules('remove');
}
And so is the addRules:
let addRules = function addRules(field) {
let $field = $(field);
if ($field.attr("data-val-required")) {
$field.rules("add", {
required: true,
messages: {
required: $field.attr("data-val-required")
}
});
}
if ($field.attr("data-val-number")) {
$field.rules("add", {
number: true,
messages: {
number: $field.attr("data-val-number")
}
});
}
if ($field.attr("data-val-range")) {
$field.rules("add", {
range: [$field.attr("data-val-range-min"), $field.attr("data-val-range-max")],
messages: {
range: $field.attr("data-val-range")
}
});
}
}
When I change the select in the UI, the data-val-range-min attribute is set correctly, but the rule is not reapplied.
Only when I manually click into the input-field and deselect it again, the rule is applied...
What am I doing wrong here?
Thanks in advance
Only when I manually click into the input-field and deselect it again, the rule is applied...
There's a validation trigger you expect that isn't part of the plugin.
By default, this plugin triggers validation on:
onfocusout - when you leave an element
onkeyup - when you're typing inside a text box
onclick - interactions with radio, checkbox, and select
Adding and removing the rules though is not enough... you'll also need to force a validation test after adding or removing the rule.
Simply call the .valid() method on the element or form when you want to programmatically force validation. Since your OP contains zero HTML markup or working demo, I cannot be more specific with a solution.
I can easily stop the user from writing future dates using the arrows or the keyboard arrows as you can see below, I want also to prevent him from writing future dates in the input field.
I don't want to disable keyboard input completely though because it's useful
document.getElementById("date_end").addEventListener("change", event => {
if (event.target.value > event.target.max) {
event.target.value = event.target.max;
}
});
<input type='date' name='date_end' id='date_end' max="2023-01-03" value="2020-01-01">
The snippet above works, but I ended up using the snippet below, not sure why, using the code above is better.
const dateToDate = date => {
let params = date.split('-');
params[1]--; // months are zero indexed
return new Date(...params);
};
let end_date_input = document.getElementById('date_end');
end_date_input.addEventListener('input', function(){
if(dateToDate(this.value) > dateToDate(this.max)){
this.value = this.max;
}
});
<input type='date' name='date_end' id='date_end' max="2023-01-03" value="2020-01-01">
Any who had worked with the ElementUI library for Vuejs.
Im using the el-time-picker component, right now when i focus it auto set the input with the current hour, but i want it to keep it blank, i had tried seting it default value to null but it doesn't work.
Also even thought i have this:
:picker-options="{
format: 'HH:mm',
}"
The picker dropdown just show up hour and minutes but once selected, the input display hour:minutes:seconds, this also produce that if i type the hour, i gotta type it with seconds for get it to work, i don't want this behavior, just to display hh:mm and be able to type just it.
Any suggestions:? I'm trying to understand the code as right to try to overwrite the component.
Edit 1
Time picker code is simple, i just has the component with a few options:
<el-time-picker
v-model="row.from"
value-format="HH:mm"
:picker-options="{
format: 'HH:mm',
selectableRange: '00:00:00 - 23:59:00',
}"
placeholder="Desde">
</el-time-picker>
The initial (default) value for row.from must be an empty String, not null. The format option works only for the popup selector, not for the editbox. To achieve what you want you have to specify the step option like in this JSfiddle
UPDATE
The JSfiddle was updated.
Use the #focus event to change the default value:
https://jsfiddle.net/2q8ovLah/3/
<el-time-picker placeholder = "HH:mm:ss"
value-format = "HH:mm:ss"
v-model = "time"
:editable = "false"
:picker-options = "{selectableRange: '00:00:01 - 23:59:59'}"
clearable
#focus = "focused">
</el-time-picker>
data() {
return {
time: ''
};
},
methods: {
focused(){
if(this.time === '') {
this.time = '00:01:00'
}
}
}
I have a very simple directive, whose purpose is to do two things:
Make a "masked" input field, from a non-angular 3rd party library work with NgModel.
Check the input value, for a valid unix time stamp.
I'm using Jasny bootstrap plugin, to create the "data masking" for a date input.
My input field:
<input ng-class="{ 'input_error' : bdayForm.bday.$invalid && !bdayForm.bday.$pristine
|| bdayForm.bday.$invalid && submitted }"
apply-scope ng-model="bday" name="bday" id="bday" type="text" placeholder=""
data-mask="99/99/9999" class="required">
Notice the data-mask attribute. This will apply the data masking functionality provided by the plugin. The apply-scope attribute is the name of directive I created. Here is the code I have so far:
app.directive("applyScope", function() {
return {
require: "ngModel",
link: function(scope, element, attrs, ngModel) {
element.bind('keydown', (e) => {
const arr = element[0].value.split("/")
let newBday = `${arr[2]}/${arr[1]}/${arr[0]} 00:00:00`
newBday = (new Date(newBday).getTime() / 1000 + 7200) //This will convert the bday to unix time stamp.
if (!newBday) {
return false;
}
ngModel.$setViewValue(newBday);
})
}
};
});
As you can see, I'm splitting the "99/99/9999" string into an array, and then I try to construct a unix time stamp.
If it's NaN, I return false. What I would like to achieve though, is setting the input field to $invalid, when the function returns false. I need to use this $invalid property, to make my ng-class conditioning work (basically just apply red color to the input)
Can someone explain me how it should be done?
I'm using a noUiSlider with one handle and a range from 0 to 50. I'm trying to show the increasing value of the slider on an input field to the left of the slider and the diminishing value on the right - as in the below example:
Slider
Has anyone else tried to do this or know how it can be achieved?
var connectSlider = document.getElementById('slider');
noUiSlider.create(connectSlider, {
start: 20,
tooltips: true,
decimals: 0,
connect: [true, false],
range: {
'min': 0,
'max': 50,
},
format: wNumb ({decimals:0})
});
var inputFormat = document.getElementById('slider-value');
sliderFormat.noUiSlider.on('update', function( values, handle ) {
inputFormat.value = values[handle];
});
inputFormat.addEventListener('change', function(){
sliderFormat.noUiSlider.set(this.value);
});
$("#slider").Link('lower').to('#slider-value',function(value){
$(this).val(Math.abs(value));
});
Here it is in jsfiddle
I managed to get the left value to display on the screen but don't know how to bind it to the input field. And I don't know how to get the value on the right. I assume this should be 'max value' minus 'slider value' but don't have enough knowledge of JavaScript so I would really appreciate some help with this :)
I'm working with Slider control from the 0.99.0 Materialize version and I wanted to get that behavior too. So I do some tricks as follow:
My HTML inside a form tag:
<div class="input-field col s12">
<label for="wmAttendance">Porcentaje de Asistencias</label><br>
<p class="range-field">
<input type="range" id="test5" min="0" max="100" oninput="wAttendance.value = test5.value" />
<output id="wAttendance" name="wAttendance">0<span>% - Mujeres</span></output>
<output id="mAttendance" name="mAttendance" class="right">0<span>% - Hombres</span></output>
</p>
</div>
JS needed to intercept changes on the range input
$(document).ready(function() {
$("#test5").on("input", function() {
var women = this.value, men = 100 - women;
$("#a_women").html(women);
$("#a_men").html(men);
$("#wAttendance").html(women + "<span>% - Mujeres</span>");
$("#mAttendance").html(men + "<span>% - Hombres</span>");
});
});
And voila we have make the magic happen and the result is something like this:
In this way we can catch both values to send in the form or to make some operations etc. Here you have my pen for reference.
I hope it could be useful for somebody else.
Ive had a play with you code and got this working:
var connectSlider = document.getElementById('slider');
// add max amount variable (used to calculate #slider-value-after input value)
var maxAmount = 50
noUiSlider.create(connectSlider, {
start: 20,
tooltips: true,
decimals: 0,
connect: [true, false],
range: {
'min': 0,
'max': maxAmount, // use max amount variable to set max range amount
},
format: wNumb ({decimals:0})
});
var inputFormat = document.getElementById('slider-value');
// created variable for #slider-value-after input
var inputFormat2 = document.getElementById('slider-value-after');
// for some reason you were looking for a 'sliderFormat' variable to watch for slider updates
// this wasnt created and was causing JS errors in the fiddle
// Ive updated this to the 'connectSlider' variable you created.
connectSlider.noUiSlider.on('update', function( values, handle ) {
// on update set first input value
inputFormat.value = values[handle];
// also set #slider-value-after input value by minus'ing the max value by current slider value
inputFormat2.value = maxAmount - values[handle];
});
inputFormat.addEventListener('change', function(){
connectSlider.noUiSlider.set(this.value);
});
I think it is also possible to get slider options which would remove the need to set the maxAmount variable as you could query the sliders max range amount instead but I cant remember the code for this.