JTSage 日期框不显示在没有输入框显示
[英]JTSage date box not showing in no input box display
问题描述
目前我正在尝试在我的模式中添加 JTSage 日期框。
如果我使用正常方式（显示输入文本并单击输入字段），它将显示日期框。
但我正在尝试使用No Input Box No Input Display 。
在检查页面时。 我只需要在下面实现代码，日期框就会自动显示。
但就我而言，日期框根本没有显示。
<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>
有什么我想念的吗？
编辑：
<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",
});
它通过使用上面的代码修复
但是还有另一个错误，如下图所示，它没有直接显示当前日期。 我需要对日期框做一个小手势，以便它移动到当前日期。 但是为什么我要触摸它才能使它起作用呢？
更新：
我在模态体内运行日期框。 当我在没有模态的情况下使用它时，它运行正常。 有人可以帮助找到解决方案吗？
<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>
第二个问题
我正在使用modes: flipbox 。 Flipbox如何在单击set date时获取值，如下图所示？
3 个解决方案
解决方案1
0 2022-07-15 23:09:31
您应该能够像这样获得日期值：
$(".btn-outline-secondary").on( "click", function() {
console.log($('#calDate').datebox('getTheDate').toString())
})
至于另一个问题，似乎工作正常，这是一个例子，检查你的这个，看看你是否遗漏了一些东西：
$('#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>
我希望这有帮助
解决方案2
0 2022-07-27 22:32:06
对不起，我不在的时候回复晚了。
这是在 model 中工作的日历，当 model 打开时，您必须单击输入框旁边的按钮，不确定这是否是 Calder 控件的预期设计，但是如果您希望它在 Z20F3Z35E630DAF394D8C4 打开时打开630DAF49DFA858F添加
$('#calDate').trigger( "datebox", { "method" : "open" });
请注意，每次单击日历下的按钮时，它都会将日期记录到控制台，这仅用于演示目的，因此您可以看到它正在工作
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>
我希望这有帮助
解决方案3
0 2022-07-29 17:04:02
如果您需要隐藏输入并仍然获取日期，这里有一个示例显示如何在设置日期后打开 model 时获取日期，当您手动单击按钮设置日期时以及 model 关闭时
$(".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>
这是你的追求吗？
在javascript中提交表单后如何在输入框中显示日期字段？
[英]How to display the date field in input box after submitting the form in javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.