CODEWITHSUNDEEP
jquerydatebox
lauwis
lauwis

Reputation: 411

JTSage date box not showing in no input box display

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?

enter image description here

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">&times;</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>

enter image description here

And second question

I'm using modes : flipbox . flipbox How to get the value when i click set date like image below ?

enter image description here

Upvotes: 0

Views: 100

Answers (3)

Patrick Hume
Patrick Hume

Reputation: 2214

If you need to hide the input and still get the date, here is an example showing how to get the date at time of model open after setting the date, when you manually click the button to set the date and when the model closes

$(".modal").dialog({
  autoOpen: false,
  width: 500,
  height: 500,
  open: function(event, ui) {
    console.log(`Model Open, Date is ` +
      $('#calDate').datebox('getTheDate').toString())
  },
  close: function(event, ui) {
    console.log(`Model Close Date is ` +
      $('#calDate').datebox('getTheDate').toString())
  }
});
$("#opener").click(function() {
  $(".modal").dialog("open");
  $('#calDate').trigger("datebox", {
    "method": "open"
  });
});


$('#calDate').bind("datebox", function(e, passed) {
  if (passed.method === "set") {
    console.log(`Clicked Set Date Button Date Is Now ` +
      $('#calDate').datebox('getTheDate').toString())
  }
});

jQuery.extend(jQuery.jtsage.datebox.prototype.options, {
  mode: "flipbox",
  useLang: "id",
  overrideSetDateButtonLabel: "Atur tanggal",
  useInline: "true",
  useInlineAlign: "center",
  hideInput: "true",
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jtsage.com/jtsage-datebox/4.4.2/jtsage-datebox-4.4.2.bootstrap4.min.css" />
<link rel="stylesheet" href="https://jtsage.dev/DateBox/css/syntax.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.jtsage.com/external/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="https://jtsage.dev/DateBox/js/doc.js"></script>
<script type="text/javascript" src="https://cdn.jtsage.com/jtsage-datebox/4.4.2/jtsage-datebox-4.4.2.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.jtsage.com/jtsage-datebox/i18n/jtsage-datebox.lang.utf8.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>




<!-- Link to open the modal -->
<div id="ex1" class="modal">
  <input id="calDate" type="text" class="form-control" data-role="datebox" readonly="readonly">

</div>

<button id="opener">open the dialog</button>

Is this what your after ?

Upvotes: 0

Patrick Hume
Patrick Hume

Reputation: 2214

Sorry for the late reply I was away.

This is the calendar working in a model, you have to click the button next the input box when the model is open, not sure if that's the intended design of the Calder contol but if you wanted it to open when the model opens just need to add

$('#calDate').trigger( "datebox", { "method" : "open" });

Note every time you click the button under the calendar it will log the date to the console, that's just for demo purposes so you can see it working

https://jsfiddle.net/PatrickHume/tpfhjwdb/18/

$(function() {

  $('#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",
  });
  $('#calDate').bind("datebox", function(e, passed) {
    if (passed.method === "set") {
      console.log($('#calDate').datebox('getTheDate').toString())
    }
  });
})
.modal{
  width:500px;
  height:500px;
}
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jtsage.com/jtsage-datebox/4.4.2/jtsage-datebox-4.4.2.bootstrap4.min.css" />
<link rel="stylesheet" href="https://jtsage.dev/DateBox/css/syntax.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.jtsage.com/external/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="https://jtsage.dev/DateBox/js/doc.js"></script>
<script type="text/javascript" src="https://cdn.jtsage.com/jtsage-datebox/4.4.2/jtsage-datebox-4.4.2.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.jtsage.com/jtsage-datebox/i18n/jtsage-datebox.lang.utf8.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
  jQuery.extend(jQuery.jtsage.datebox.prototype.options, {
    'useLang': 'en'
  });

</script>


<div id="ex1" class="modal">
  <input id="calDate" type="text" class="form-control" data-role="datebox" readonly="readonly">
  <a href="#" rel="modal:close">Close</a>
</div>

<!-- Link to open the modal -->
<p><a href="#ex1" rel="modal:open">Open Modal</a></p>

I hope this helps

Upvotes: 0

Patrick Hume
Patrick Hume

Reputation: 2214

you should be able to get the date value like so:

$(".btn-outline-secondary").on( "click", function() {
console.log($('#calDate').datebox('getTheDate').toString())
})

As for the other issue, seems to work ok, here is an example, check your against this and see if you missed something:

$('#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",
});
$(".btn-outline-secondary").on("click", function() {
  console.log($('#calDate').datebox('getTheDate').toString())
})
<input id="calDate" type="text" class="form-control" data-role="datebox" readonly="readonly">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jtsage.com/jtsage-datebox/4.4.2/jtsage-datebox-4.4.2.bootstrap4.min.css" />
<link rel="stylesheet" href="https://jtsage.dev/DateBox/css/syntax.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.jtsage.com/external/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="https://jtsage.dev/DateBox/js/doc.js"></script>
<script type="text/javascript" src="https://cdn.jtsage.com/jtsage-datebox/4.4.2/jtsage-datebox-4.4.2.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.jtsage.com/jtsage-datebox/i18n/jtsage-datebox.lang.utf8.js"></script>
<script type="text/javascript">
  jQuery.extend(jQuery.jtsage.datebox.prototype.options, {
    'useLang': 'en'
  });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

I hope this helps

Upvotes: 0

Related Questions