ax5ui-picker
Version:
A picker plugin that works with Bootstrap & jQuery
384 lines (351 loc) • 15.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../../ax5ui-mask/dist/ax5mask.css"/>
<link rel="stylesheet" type="text/css" href="../../ax5ui-calendar/dist/ax5calendar.css"/>
<link rel="stylesheet" type="text/css" href="../../ax5ui-palette/dist/ax5palette.css"/>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../dist/ax5picker.css"/>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="../../ax5core/dist/ax5core.js"></script>
<script src="../../ax5ui-mask/dist/ax5mask.min.js"></script>
<script src="../../ax5ui-calendar/dist/ax5calendar.js"></script>
<script src="../../ax5ui-palette/dist/ax5palette.js"></script>
<script src="../../ax5ui-formatter/dist/ax5formatter.js"></script>
<script src="../dist/ax5picker.js"></script>
</head>
<body style="padding: 10px;">
<!--http://bootstrap-datepicker.readthedocs.org/en/latest/-->
<!--http://www.sitepoint.com/pure-css3-speech-bubbles/-->
<!--https://css-tricks.com/examples/ShapesOfCSS/-->
<!--https://css-tricks.com/clipping-masking-css/-->
<h1>Date</h1>
<input type="text" class="form-control" data-picker-date="" placeholder="yyyy/mm/dd"/>
<div class="form-group" data-ax5picker="date" style="">
<div class="input-group">
<input type="text" class="form-control" placeholder="yyyy/mm/dd"/>
<span class="input-group-addon">~</span>
<input type="text" class="form-control" placeholder="yyyy/mm/dd"/>
<span class="input-group-addon"><i class="fa fa-calendar-o"></i></span>
</div>
</div>
<div class="form-group">
<div class="input-group" data-ax5picker="date">
<input type="text" class="form-control" placeholder="yyyy/mm/dd"/>
<span class="input-group-addon"><i class="fa fa-calendar-o"></i></span>
</div>
</div>
<h1>Secure-num</h1>
<div class="form-group">
<input type="password" data-ax-path="secure-num" class="form-control" maxlength="4" placeholder="" readonly="readonly"/>
</div>
<h1>Keyboard</h1>
<div class="form-group">
<input type="text" class="form-control" data-ax5picker="keyboard" placeholder="">
</div>
<div class="form-group">
<input type="text" data-ax-path="keyboard" class="form-control" placeholder="" readonly="readonly"/>
</div>
<h1>Numpad</h1>
<div class="form-group">
<input type="text" data-ax-path="numpad" class="form-control" placeholder=""/>
</div>
<h1>Custom</h1>
<div class="form-group">
<input type="text" data-ax5picker="custom" class="form-control" placeholder=""/>
</div>
<h1>Color</h1>
<div class="form-group">
<input type="text" data-ax5picker="color" class="form-control" placeholder=""/>
</div>
<script>
// todo : picker align 기능 추가
ax5.def.picker.date_leftArrow = '<i class="fa fa-chevron-left"></i>';
ax5.def.picker.date_yearTmpl = '%s';
ax5.def.picker.date_monthTmpl = '%s';
ax5.def.picker.date_rightArrow = '<i class="fa fa-chevron-right"></i>';
$(document.body).ready(function () {
var picker = new ax5.ui.picker({});
$('[data-picker-date]').on("change", function () {
console.log("change");
});
picker.bind({
zIndex: 4000,
target: $('[data-picker-date]'),
direction: "auto",
disableChangeTrigger: false,
content: {
type: 'date',
config: {
mode: "month",
selectMode: "day"
},
formatter: {
pattern: 'date(month)'
}
},
onStateChanged: function () {
// console.log(this.values);
}
});
$('[data-ax5picker]').each(function (idx) {
if (this.getAttribute("data-ax5picker") == "date") {
picker.bind({
id: "my-picker-" + idx,
target: this,
content: {
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"
},
mode: "month"
},
formatter: {
pattern: 'date'
}
},
btns: {
today: {
label: "오늘", onClick: function () {
if (this.item.inputLength == 1) {
this.self.setContentValue(this.item.id, 0, ax5.util.date(new Date(), {"return": "yyyy-MM-dd"}));
}
else {
this.self.setContentValue(this.item.id, 0, ax5.util.date(new Date(), {"return": "yyyy-MM-dd"}));
this.self.setContentValue(this.item.id, 1, ax5.util.date(new Date(), {"return": "yyyy-MM-dd"}));
this.self.close();
}
}
},
thisMonth: {
label: "이번달 1일", onClick: function () {
var today = new Date();
if (this.item.inputLength == 1) {
this.self.setContentValue(this.item.id, 0, ax5.util.date(today, {"return": "yyyy-MM-01"}));
}
else {
this.self.setContentValue(this.item.id, 0, ax5.util.date(today, {"return": "yyyy-MM-01"}));
this.self.setContentValue(this.item.id, 1, ax5.util.date(today, {"return": "yyyy-MM"}) + '-' + ax5.util.daysOfMonth(today.getFullYear(), today.getMonth()));
this.self.close();
}
}
},
ok: {label: "확인", theme: "default"}
},
onStateChanged: function (a) {
if(this.state == "open"){
if(this.item && this.item.calendar){
var today = new Date();
this.item.pickerCalendar[0].ax5uiInstance.setSelection([ax5.util.date(today, {'add': {d: 0}})]);
if(this.item.pickerCalendar[1]) this.item.pickerCalendar[1].ax5uiInstance.setSelection([ax5.util.date(today, {'add': {d: 0}})]);
}
}
else if (this.state == "changeValue") {
if (this.item.content.type == "date" && this.values.length > 1) {
if (this.inputIndex == 0) {
}
}
}
}
});
}
else if (this.getAttribute("data-ax5picker") == "custom") {
picker.bind({
target: this,
direction: "top",
contentWidth: 200,
content: function (callback) {
var html = ''
+ '가나다라마바사'
+ '<div style="padding: 10px;">'
+ '<button class="btn btn-default">기능 1</button>'
+ '</div>'
;
callback(html);
}
});
}
else if (this.getAttribute("data-ax5picker") == "secure-num") {
}
else if (this.getAttribute("data-ax5picker") == "keyboard") {
picker.bind({
target: this,
direction: "auto",
content: {
width: 550,
margin: 10,
type: 'keyboard',
config: {
btnWrapStyle: "padding:2px;",
btnStyle: "width: 35px;",
btnTheme: "primary",
specialBtnWrapStyle: "padding:2px;",
specialBtnStyle: "",
specialBtnTheme: " "
}
},
onStateChanged: function () {
//console.log(this);
//if (this.value && this.value.length > 3) {
// picker.close();
//}
}
});
}
else if (this.getAttribute("data-ax5picker") == "color") {
picker.bind({
target: this,
direction: "auto",
content: {
width: 250,
margin: 10,
type: 'color',
config: {
}
},
onStateChanged: function () {
//console.log(this);
//if (this.value && this.value.length > 3) {
// picker.close();
//}
}
});
}
});
picker.bind({
target: $('[data-ax-path="secure-num"]'),
direction: "top",
content: {
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'
}
},
btns: {
today: {
label: "오늘", onClick: function () {
if (this.item.inputLength == 1) {
this.self.setContentValue(this.item.id, 0, ax5.util.date(new Date(), {"return": "yyyy-MM-dd"}));
}
else {
this.self.setContentValue(this.item.id, 0, ax5.util.date(new Date(), {"return": "yyyy-MM-dd"}));
this.self.setContentValue(this.item.id, 1, ax5.util.date(new Date(), {"return": "yyyy-MM-dd"}));
this.self.close();
}
}
},
thisMonth: {
label: "이번달 1일", onClick: function () {
var today = new Date();
if (this.item.inputLength == 1) {
this.self.setContentValue(this.item.id, 0, ax5.util.date(today, {"return": "yyyy-MM-01"}));
}
else {
this.self.setContentValue(this.item.id, 0, ax5.util.date(today, {"return": "yyyy-MM-01"}));
this.self.setContentValue(this.item.id, 1, ax5.util.date(today, {"return": "yyyy-MM"}) + '-' + ax5.util.daysOfMonth(today.getFullYear(), today.getMonth()));
this.self.close();
}
}
},
ok: {label: "확인", theme: "default"}
},
onStateChanged: function () {
console.log(this);
if (this.value && this.value.length > 3) {
picker.close();
}
}
});
picker.bind({
target: $('[data-ax-path="keyboard"]'),
direction: "auto",
content: {
width: 550,
margin: 10,
type: 'keyboard',
config: {
btnWrapStyle: "padding:2px;",
btnStyle: "width: 35px;",
btnTheme: "primary",
specialBtnWrapStyle: "padding:2px;",
specialBtnStyle: "",
specialBtnTheme: " "
}
},
onStateChanged: function () {
//console.log(this);
//if (this.value && this.value.length > 3) {
// picker.close();
//}
}
});
picker.bind({
target: $('[data-ax-path="numpad"]'),
direction: "auto",
content: {
width: 200,
margin: 10,
type: 'numpad',
config: {
btnWrapStyle: "padding:3px;width:25%;",
btnStyle: "width:100%",
btnTheme: "primary",
specialBtnWrapStyle: "padding:3px;width:25%;",
specialBtnStyle: "width:100%;padding-left:0px;padding-right:0px;",
specialBtnTheme: ""
/*
keyArray: [
{value: "7"},
{value: "8"},
{value: "9"},
{label: "BS", fn: "back"},
{value: "4"},
{value: "5"},
{value: "6"},
{value: "-"},
{value: "1"},
{value: "2"},
{value: "3"},
{value: ""},
{value: "."},
{value: "0"},
{value: ""},
{label: "OK", fn: "close"}
]
*/
},
formatter: {
pattern: 'number'
}
},
onStateChanged: function () {
console.log(this);
}
});
});
</script>
</body>
</html>