Javascript 文本框显示在JQuery日期选择器下面_Javascript_Jquery_Html_Datepicker

Javascript 文本框显示在JQuery日期选择器下面

javascript jquery html

Javascript 文本框显示在JQuery日期选择器下面,javascript,jquery,html,datepicker,Javascript,Jquery,Html,Datepicker,我的网站上有一个日期选择器，可以将所选日期转换为特殊日期，并将其显示在下方的只读文本框中。问题是，我想使用datepicker中的内置功能，在单击链接或按钮时可以打开和关闭它仅打开日期选择器的链接： <input id="hiddenDate" type="hidden" /> <a href="#" id="pickDate">Select Date</a> $(function() { $('#hiddenDate').datepicker({

我的网站上有一个日期选择器，可以将所选日期转换为特殊日期，并将其显示在下方的只读文本框中。问题是，我想使用datepicker中的内置功能，在单击链接或按钮时可以打开和关闭它

仅打开日期选择器的链接：

 <input id="hiddenDate" type="hidden" />
 <a href="#" id="pickDate">Select Date</a>

 $(function() {
 $('#hiddenDate').datepicker({
    changeYear: 'true',
    changeMonth: 'true',
    startDate: '07/16/1989',
    firstDay: 1
 });
 $('#pickDate').click(function (e) {
    $('#hiddenDate').datepicker("show");
    e.preventDefault();
 });
 });


$（函数（）{
$（'hiddenDate'）。日期选择器({
变更年：“正确”，
changeMonth:'正确'，
开始日期：1989年7月16日，
第一天：1
});
$（'#pickDate'）。单击（函数（e）{
$（'hiddenDate'）。日期选择器（“显示”）；
e、 预防默认值（）；
});
});

以下是我在独立页面上的个人代码：

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.25">
     <meta name="description" content="">
      <meta name="author" content="">   
      <title>Calendar Converter</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
     rel = "stylesheet">
   <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
   <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script>
      $( function(){
        $( "#datepicker" ).datepicker();
        });
    </script>
 </head>
 <body>
 <div id="calendar"></div>

 <p><font font face="Verdana">Output:    </font> <input class="target" type="text" id="datepicker2" size="19" readonly></p>
 </div>



 <script>
 $( document ).ready(function() {
 $("#hidden_calendar").hide();
 });

 $( ".target" ).change(function() {

 });

 $('#calendar').datepicker({
 minDate: '2017-02-26', //Base Date
 dateFormat: 'yy-m-d',
 inline: true,
 onSelect: function(dateText, inst) { 

    var date2 = $(this).datepicker('getDate');
    var date1 = new Date("November 10, 2010 00:00:00");
    var oneDay = 24*60*60*1000;
    var start = 100;
    var diff =  Math.floor(( date2 - date1 ) / 86400000); 
    var output = start + Math.floor(diff/7);




    $('#datepicker2').val(output);

 }
 });    

 $("#hide_calendar").click(function(){
    $("#hidden_calendar").toggle();
 });

 </script>
 </body>
 </html>


日历转换器
$（函数（）{
$（“#日期选择器”）.datepicker（）；
});
输出：
$（文档）.ready（函数（）{
$（“隐藏的日历”）.hide（）；
});
$（“.target”）.change（函数（）{
});
$（“#日历”）。日期选择器({
minDate:'2017-02-26'，//基准日期
日期格式：“yy-m-d”，
是的，
onSelect:function（dateText，inst）{
var date2=$（this.datepicker（'getDate'）；
var date1=新日期（“2010年11月10日00:00:00”）；
var One Day=24*60*60*1000；
var启动=100；
var diff=数学楼层（（日期2-日期1）/86400000）；
var输出=启动+数学楼层（差异/7）；
$（'#datepicker2'）.val（输出）；
}
});    
$（“隐藏日历”）。单击（函数（）{
$（“隐藏日历”）.toggle（）；
});

正如你所看到的，我有我想要的所有组件，但我不知道怎么做当我点击链接第一个JFiddle时，第二个JFiddle中的文本框出现在日期选择器下。我希望我清楚自己遇到了什么问题，如果需要的话，我可以提供一个我正在努力做的形象

我尝试过的一些事情是：

使用带有日期选择器和文本框的引导模式或popover，两者都不能满足我的要求
我也尝试过修改日期选择器，但我只是把它搞砸了，不得不恢复

有什么建议吗？我觉得我正在尝试做的事情很琐碎，它困扰着我，我想不出来。

这不是解决问题的直接方法，但您可以使用jQuery ui对话框打开一个包含日期选择器的模式

$（函数（）{
$（“#对话框”）。对话框({
自动打开：错误，
最小宽度：350，
展示：{
效果：“盲”，
持续时间：1000
},
隐藏：{
效果：“淡出”，
持续时间：1000
}
});
$（“#开启器”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（“对话框”）。对话框（“打开”）；
});
$（“#日历”）。日期选择器({
minDate:'2017-02-26'，//基准日期
日期格式：“yy-m-d”，
是的，
onSelect:function（dateText，inst）{
var date2=$（this.datepicker（'getDate'）；
var date1=新日期（“2010年11月10日00:00:00”）；
var One Day=24*60*60*1000；
var启动=100；
var diff=数学楼层（（日期2-日期1）/86400000）；
var输出=启动+数学楼层（差异/7）；
$（'#datepicker2'）.val（输出）；
} 
});
});

JQuery日期选择器
输出：
我喜欢这样！谢谢，非常有帮助！