So I have settings for my wickedpicker. This is the setting
var options = {
now: "12:35", //hh:mm 24 hour format only, defaults to current time
twentyFour: true, //Display 24 hour format, defaults to false
upArrow: 'wickedpicker__controls__control-up', //The up arrow class selector to use, for custom CSS
downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS
close: 'wickedpicker__close', //The close class selector to use, for custom CSS
hoverState: 'hover-state', //The hover state class to use, for custom CSS
title: 'Setting Jam', //The Wickedpicker's title,
showSeconds: false, //Whether or not to show seconds,
secondsInterval: 1, //Change interval for seconds, defaults to 1 ,
minutesInterval: 1, //Change interval for minutes, defaults to 1
beforeShow: null, //A function to be called before the Wickedpicker is shown
show: null, //A function to be called when the Wickedpicker is shown
clearable: false, //Make the picker's input clearable (has clickable "x")
};
$('.time').wickedpicker(options);
Then I create an input field to store the time data
<input id="time_field" name="time_field" class="form-control time" placeholder="Time">
When I save, the data that goes into the database has the format 'hh : mm'.
Then I display it again in the edit form as a value.
<input id="time_field" name="time_field" class="form-control time" placeholder="Time" value="{{ $post->time }}">
But, the data does not appear. Data only shows default data which is 12:35.
Every time I will edit the data, the time field always displays 12:35, even though I have set the value in the input according to the data from the database. However, when I look at the source page, data from the database appears in the value input section.
Then I tried using jquery. When I retrieve data values from input, the retrieved data remains 12.35 which is the default data from wickedpicker.
var time = $('.time').val();
console.log(time) // output 12:35
also
var time = $('.time').wickedpicker('time');
console.log(time) // output 12:35
How do I set the time in the input field on wickedpicker from the database?
def = { twentyFour: true, timeSeparator: ':'};
signInPicker = $('#SignIn').wickedpicker(def);
signOffPicker = $('#SignOff').wickedpicker(def);
$.ajax(top.$.rootUrl + '/Area/Controller/Action', function (data) {
signInPicker.wickedpicker('setTime', 0, data.SignIn);
signOffPicker.wickedpicker('setTime', 0, data.SignOff);
});
Related
i have defined like this:
$(".js-range-slider").ionRangeSlider({
type: "single",
min: 1,
max: 40,
grid: true,
onChange: function (data) {
console.log("--------------------- " + data.from);
}
});
using ion.rangeslider i need to show in the value selected area the value multiplied by another value. by example, i need to multiply * 5 the value selected.
i need to update this when the selected value changes
http://prntscr.com/qav6rd
in the example, i need to show "6 persons by 5€: 30€"
I've got a sap.ui.table.Table with Input fields and the table gets the data via JSON which works well. However, if I edit the value in the first row for example, and try to scroll down, the value "stays" in the first row until a different value hits this field. So it basically updates every cell except the edited one while scrolling. After that, I scroll up again to see the value I changed, but this value now has the old value from the load at the beginning again.
I think something with my binding isn't correct at all, because I haven't seen anything like this yet. I know that tables only update the row contexts but I can't figure out how to do this.
Here is a example: https://jsbin.com/yuvujozide/6/edit?html,console,output
Edit the right "Gates" and scroll, to see how it disappears and edit the left value and scroll to see how the value scrolls with the table.
I tried to remove/set the VisibleRowCount and logged to see if the data gets loaded multiple times but that's not the case.
var oModel = new sap.ui.model.json.JSONModel();
var oTable = new sap.ui.table.Table({
visibleRowCount: 12,
selectionMode: sap.ui.table.SelectionMode.Single,
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Fixed,
editable: true
});
oModel.setData({ rows: tableRows.value, columns: columnArray });
oTable.setModel(oModel);
var counter = 0;
oTable.bindColumns("/columns", function (sId, oContext) {
var columnName = columnArray[counter];
var defaultTemplate = new sap.m.Input({
value: "{" + columnName + "}"
}).bindProperty("value", columnName, function (cellValue) {
return returnRange(this, oTable, cellValue, columnName, counter, dic);
});
counter++;
return new sap.ui.table.Column({
label: columnName,
template: defaultTemplate,
flexible: true,
autoResizable: true,
width: 'auto',
multiLabels: [
new sap.ui.commons.Label({ text: columnName }),
new sap.ui.commons.Label({ text: dic[Number(counter - 1)].value[0] + " - " + dic[Number(counter - 1)].value[1] })
]
});
});
oTable.bindRows("/rows");
As you can see I separated the rowData and columnNames in two arrays:
tableRows and columnArray
The returnRange function checks some values and just returns the cellValue
I would expect that the Input fields keeps the changed values (which is probably normal), so I can change several Input fields and then I can Update the table via Ajax-Call.
The problem is that sap.ui.table.Table has a custom scrolling behaviour that is different from the default browser scrolling. Instead of creating a row for each record, it will create a fixed number of rows and re-bind these rows after each scroll.
If the table is editable and bound to a JSONModel, it will usually create a two-way-binding and update the model values upon user input, hence scrolling works fine. But since you have provided a custom formatter function for the binding (returnRange), a two-way-binding is not possible anymore. This means that any user input is lost after scrolling.
If you remove the formatter function like this
var defaultTemplate = new sap.m.Input({
value: "{" + columnName + "}"
});
it will work fine.
In case you want to validate the user input, you should listen to the input's change event and use InputBase#setValue to set it to a different value. This will also reflect your changes in the JSONModel.
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'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.
I want to initialize datetime picker with current value in the input box in the backbone view js file for which I have written following code in the afterRender function. This is not working.
afterRender: function() {
this.$el.find('.time').datetimepicker({
lazyInit : true, // Lazy init to prevent a lot of instances right away
datepicker : false,
format : 'g:i A',
formatTime: 'g:i A',
defaultTime: $(this).val(),
step: 1
});
}
And also I wanted to populate time field in my dust file with capital AM/PM using #format, but currently it is rendering with small am/pm in the field with the following code.
<input type="text" id="eventTime" name="eventTime"
class="event_form time changewidth" data-error-style="tooltip"
style="width:90px;" skip_element="true"
value="{#format style="time" value=eventDateLocal pattern="h:mm a"/}"
oninput="eventStartTime.dataset.value=eventStartTime.value +' ' + eventTime.value"/>