picker will be able to enter a value for the input element through the other UI.
bind(Options)
var picker = new ax5.ui.picker();
picker.bind({
target: $("#input"),
direction: "top",
contentWidth: 200,
content: function (callback) {
var html = ''
+ 'HTML CONTENT'
;
callback(html);
}
);
picker.bind({
zIndex: 5000,
id: "my-picker-01",
target: $("#input"),
direction: "top",
contentWidth: 200,
content: {
width: 270,
margin: 10,
type: 'date',
config: {
// calendar UI config
},
formatter: {
pattern: 'date'
}
},
btns: {
ok: {label: "확인", theme: "default"}
}
);
Type: Number
Type: String
picker unique id
Type: Dom Element | jQuery Object
".input-Group" elements that are the target of the picker
Type: String
"top|left|right|bottom|auto"
Type: Function|Object
- Function
function (callback) {
var html = 'HTML CONTENT';
callback(html);
}
- Object
{
width: 270,
margin: 10,
type: 'date',
config: {
// calendar UI config
},
formatter: {
// formatter UI config
}
}
-
width
Number
-
margin
Number
-
type
String
- date
- secure-num
-
config
Object
-
formatter
Object
{
width: 270,
margin: 10,
type: 'date',
config: {
control: {
left: '<i class="fa fa-chevron-left"></i>',
yearTmpl: '%s',
monthTmpl: '%s',
right: '<i class="fa fa-chevron-right"></i>'
},
lang: {
yearTmpl: "%s년",
months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
dayTmpl: "%s"
}
},
formatter: {
pattern: 'date'
}
}
{
width: 200,
margin: 10,
type: 'secure-num',
config: {
btnWrapStyle: "padding:3px;width:25%;",
btnStyle: "width:100%",
btnTheme: "info btn-sm",
specialBtnTheme: " btn-sm"
},
formatter: {
pattern: 'number'
}
}
Type: Number
If the content type of the function, recommended to set this value.
Type: Object
{
ok: {label: "확인", theme: "default"}
}
Type: Function
onStateChanged
function can be defined in setConfig method or new ax5.ui.picker initialization method.
However, you can us to define an event function after initialization, if necessary
var picker = new ax5.ui.picker({
onStateChanged: function(){
console.log(this);
}
});
picker.onStateChanged = function(){
console.log(this);
}
setContentValue(boundObjectId, inputSeq, value)
Type: String
picker unique id
.input-group's input seq
open(boundObjectId)
Type: String
picker unique id
close()
ax5picker({bindConfigs})
$('[data-ax5picker="date"]').ax5picker({
direction: "top",
content: {
width: 270,
margin: 10,
type: 'date'
}
});
ax5picker("open")
$('[data-ax5picker]').ax5picker("open");
ax5picker("close")
$('[data-ax5picker]').ax5picker("close");
ax5select("setValue", inputSeq, value)
$('[data-ax5picker]').ax5picker("setValue", 0, "optionValue2");