I am trying to set up my MaterlizeCSS timepicker to output the time for further processing. The docs don't give any instructions for this, but the pickadate.js docs themselves have instructions.
$('.timepicker').pickatime({
formatSubmit: 'HH:i',
hiddenName: true
})
From my understanding, this method should produce a hidden field with the name of the input field and the time in the 24-hr format. It isn't working for me. The name isn't stripped from the original input and the hidden field isn't created. I don't see any errors either. Has anyone else gotten this to work?
For reference, this is my function:
function setTimePicker (elem) {
elem.pickatime({
default: 'now', // Set default time: 'now', '1:30AM', '16:30'
fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
twelvehour: true, // Use AM/PM or 24-hour format
donetext: 'OK', // text for done-button
cleartext: 'Clear', // text for clear-button
canceltext: 'Cancel', // Text for cancel-button
autoclose: false, // automatic close timepicker
ampmclickable: true, // make AM PM clickable
style: {"color": "#ff16a2"},
formatSubmit: 'HH:i',
hiddenName: true,
aftershow: function () {
} //Function for after opening timepicker
});
}
EDIT: I've also tried setting the containerHidden option but it didn't do anything either.
Related
How can I change the window size using Vue Test Utils ?
Default window size is 1024x768
This should work:
Object.assign(global.screen, {
width: 800,
height: 600
})
// if you only need one changed, the plain assignment syntax is shorter:
global.screen.width = 800;
If the above doesn't work, you should show us exactly where your code reads window size from.
If it reads from innerWidth/innerHeight, you can define them on the window object:
[
{ prop: "innerWidth", value: 800 },
{ prop: "innerHeight", value: 600 }
].forEach(({ prop, value }) => {
Object.defineProperty(window, prop, {
writable: true,
configurable: true,
value
})
})
If you're using media queries (matchMedia), see this answer on how to mock it.
Any of the above can be run inside the test(s) where you want the viewport size changed.
Keep in mind it's not going to be reset back to defaults after you change it, so all following tests will be run on the last set dimensions, unless you revert them to defaults at the end of the test where you need them altered.
I just started programming in vue. js.
I want to program a clock that outputs as text a time after typing it in hh:mm format.
To do this, I have to divide the input into minutes and hours and save the values in a variable. How do you do that? Can I use split?
You may use VueJS Computed & Javascript Split function to achieve what you need.
Eg:
data: () => ({
userInput: '' // 08:33
}),
computed: {
hours: function() {
return this.userInput.split(":")[0] // return 08
},
minutes: function() {
return this.userInput.split(":")[1] // return 33
}
}
Computed method will listen to the change of userInput in this case. Meaning if the user key in 08:33, then decided to change to 08:44, the minutes will react and change to 44.
Using Tablulator (great product!), I am trying to keep the cursor from resetting to the first editable cell in the table after editing a cell. The replaceData function is updating the data element, and while the scroll position does not change, the cursor is reset. I'm not sure how to do this correctly. The documentation, while great, is silent about cursor position beyond the next(), etc methods, which I cannot quite get to work.
In my vue.js table definition component, I have a watch like this:
watch: {
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData);
},
deep: true,
}
},
and a cellEdited method inside mounted like this:
mounted() {
let self = this;
//todo Possibly validate that cater tips is less than total tips since cater tips is a portion of total tips
self.tabulator = new Tabulator(self.$refs.myTable, {
height: 380, // set height of table (in CSS or here)
placeholder: 'Click "Load Store Tips" to edit data',
data: self.tableData, //link data to table
reactiveData: true, //enable data reactivity
downloadConfig: {columnCalcs: false},
addRowPos:"bottom",
history:true,
layout: "fitDataFill",
initialSort:[
{column:"storeID", dir:"asc"},
],
//Define Table Columns
columns: [
{title: "Store ID", field: "storeID", sorter:"number"},
{title: "Store Tips", field: "inStore_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Cater Tips", field: "cater_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Client ID", field: "clientID"},
],
////////////////////////////////////////////////////////////////////////////
// When a cell is edited, write the data out to the server to ensure it is
// always in a saved state.
////////////////////////////////////////////////////////////////////////////
cellEdited: function (e, cell) {
//self.colPos = cell.getColumn(); //trying to save the cursor pos, but generating error
//self.rowPos = cell.getRow(); // generating error
self.PostTipsEventMethod();
}
});
Here is what I have tried:
Tried capturing the row and column position, and then setting that after the replaceData table render, and after the cellEdited method
Tried using the next() method to move the cursor to the next cell inside the cellEdited method, before and after the replaceData function.
Can someone guide me a bit further on this? I've searched through the tabulator element in the debugger trying to find the row and column numbers of the cell I'm editing, but so far, no joy. I guess I don't understand the lifecycle of the table rendering well enough.
Thank you!
I am able to display radio buttons using bootbox prompt. But I am not getting the checked radio button by default. How to do that . Here is my code to displaying radio buttons.
bootbox.prompt({
title: "This is a prompt with a set of Radiobutton inputs!",
inputType: 'radio',
inputOptions: [
{
text: 'EU Format',
value: '1',
checked: true,
},
{
text: 'Standard Format',
value: '2',
}
],
callback: function (result) {
console.log(result);
}
});
I have added checked: true, and tried with checked : "checked" , but not sure these both not working . Any help would be greatly appreciated.
This is actually covered in the documentation, here. I've also answered this previously, but since I don't have a link to that answer at the moment, this is what you need to do:
bootbox.prompt({
title: "This is a prompt with a set of Radiobutton inputs!",
inputType: 'radio',
value: '1', /* value sets the initial checked item */
inputOptions: [
{
text: 'EU Format',
value: '1',
checked: true,
},
{
text: 'Standard Format',
value: '2',
}
],
callback: function (result) {
console.log(result);
}
});
The only difference between radiobuttons and checkboxes is that you can only set a single value with radios. NOTE THAT THE TYPES MUST MATCH. In your example, '1' would work, but 1 would not, since the former is a string, whereas the latter is a number. We don't do any explicit type coercion when checking the value attribute.
Since you're referencing the radio type, I assume you're using the 5.x version? If so, I have a work-in-progress update to the docs here, until I can push the 5.x version out. The old docs are still valid, but it (obviously?) doesn't document some of the new features.
Can someone help me to make editable cell "visible", so it could be clear it can be edited? Right now it looks like a simple text and nothing visually suggests, that it can be edited...I´d like to make it look like a standard text field.
This should work:
var oTable = $('#example').dataTable( {
"bServerSide": true,
"sAjaxSource": "/url/",
"fnDrawCallback": function () {
$('#example tbody td').editable( 'url', { // simple editable initialization
"height": "14px",
});
$('#example tbody tr').each(function() {
$.each(this.cells, function(){
$(this).click() //by default all td's have bind for click function, so we simulate clicks for every td
});
});
$('#example tbody td input').live('click', function(){
$(this).select() // to select input
})
}
});
$.editable.types.defaults.reset = function (){ //this function disables reset input editing after submiting
}
UPDATE:
I made a test sample here http://jsfiddle.net/94BZV/31/
Don't forget to put correct url in init of editable to get correct answer passed back to edit field.
are you want this in ASP.net or what? if yes then,if your text is in GridView then you have to set EDITINDEX Value to the rowindex value of the list,as if the EDITINDEX value is -1 then it is static mode then every thing will be displayed in label so you should change it value to Greater Than >-1 Then The Controls will be displayed in TextBoxes So then You can edit the Value in the Controls"