Question

我的网站上有一个日期选择器，可以将所选日期转换为特殊日期，并将其显示在下方的只读文本框中。问题是，我想在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();
 });
 });

JFiddle of above

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

 <!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>

Here is a JFiddle for the above code

正如你所看到的，我拥有了我想要的所有组件，但是当我点击第一个JFiddle的链接时，我就不知道如何实现它，第二个JFiddle中的文本框出现在datepicker下面。我希望我清楚自己遇到了什么问题，如果需要，我可以提供我想要做的事情的形象。

我尝试过的一些事情是：

使用带有日期选择器和文本框的引导程序模式或弹出窗口，它们都没有按照我想要的方式工作。
我也尝试过修改datepicker，但我把它搞砸了，不得不还原它。

有什么建议吗？我觉得我想做的事情是微不足道的，这让我烦恼，我无法理解。

Answer 1

不是您问题的直接解决方案，但您可以使用jQuery ui对话框打开带有datepicker的模式。

＆＃13;

$(function(){
    $("#dialog").dialog({
      autoOpen: false,
      minWidth: 350,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "fadeOut",
        duration: 1000
      }
    });
 
    $("#opener").on( "click", function(e) {
    	e.preventDefault();
      $( "#dialog" ).dialog( "open" );
    });
      $('#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);

    } 
  });
  });

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JQuery Datepicker</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div id="dialog" title="Basic dialog">
<div id="calendar"></div>
<lable>Output:</lable>
  <input class="target" type="text" id="datepicker2" size="19" readonly>
</div>
 
<a href="#" id="opener">Select Date</a>
</body>
</html>

＆＃13;

正如您已经使用jQuery ui，您可以在不使用任何其他库或插件的情况下实现此目的。

文本框出现在JQuery DatePicker下面

1 个答案: