Currently I'm trying to add JTSage date box in my modal.
If i'm using normal way (show the input text and click the input field), it will show the date box.
But i'm trying to use No Input BoxNo Input Display.
While inspect the page. I just need to implement code below and date box will show automatically.
But in my case, the date box is not showing at all.
<div class="form-group">
<div class="input-group" style="display:none">
<input id="calDate" type="text" class="form-control" data-role="datebox" data-options='{"mode":"flipbox","useInline":"true","hideInput:"true"}' readonly="readonly">
</div>
</div>
Is there something i miss?
EDIT:
<input id="calDate" type="text" class="form-control" data-role="datebox" readonly="readonly">
$('#calDate').datebox({
mode: "flipbox",
useLang:"id",
overrideSetDateButtonLabel:"Atur tanggal",
useInline:"true",
useInlineAlign:"center",
hideInput:"true",
beforeOpenCallback:"abc",
beforeOpenCallbackArgs:"def",
openCallBack:"ghi",
openCallBackArgs:"jkl",
closeCallBack:"mno",
closeCallBackArgs:"pqr",
});
It fixed by using code above
But there is another error, Like image below, it's not directly showing current date. I need to give a little gesture to the date box so it moves to current date. But why i should touch it to make it works?
UPDATE :
I run the date box inside modal-body. When i use it without modal, it runs correctly. Can someone help to find the solution ?
<body>
<button type="button" id="call"class="btn btn-primary">ABC</button>
</body>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> Detail</h4>
</div>
<div class="modal-body" id="modal-content">
<div class="form-group">
<div class="input-group" >
<input id="calDate" type="text" class="form-control" data-role="datebox" readonly="readonly">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$("#call").click(function(e){
$("#myModal").modal("show");
});
$('#calDate').datebox({
mode: "flipbox",
useLang:"id",
overrideSetDateButtonLabel:"Atur tanggal",
useInline:"true",
useImmediate:"true",
useInlineAlign:"center",
hideInput:"true",
beforeOpenCallback:"abc",
beforeOpenCallbackArgs:"def",
openCallBack:"ghi",
openCallBackArgs:"jkl",
closeCallBack:"mno",
closeCallBackArgs:"pqr",
});
</script>
And second question
I'm using modes : flipbox . flipbox How to get the value when i click set date like image below ?
you should be able to get the date value like so:
As for the other issue, seems to work ok, here is an example, check your against this and see if you missed something:
I hope this helps