Text box appear underneath a JQuery DatePicker

I have a datepicker on my website that converts the selected date to a special date and displays it in a read only text box underneath. The thing is, is I want to use the built in feature in the datepicker where I can have it open and close when clicking a link or button.

Just the link opening the 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

Here is my personal code that I have on an independent page:

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

As you can see, I have all the components I want, but I just don't how make it so when I click the link the first JFiddle, the textbox in the second JFiddle appears under the datepicker. I hope I am being clear about what I am having trouble with, if need be I can provide an image of what I am trying to do.

Some things I have tried are:

  • Using a bootstrap modal or popover with both the datepicker and textbox in it, neither worked how I wanted it to.
  • I have also tried modifying the datepicker but I just messed it up and had to revert it.

Any suggestions? I feel like what I am trying to do is trivial and it is bugging me I can't figure it out.

Answers 1

  • Not a straight forward solution to your problem, but you could use jQuery ui dialog to open a modal with datepicker in it.

    $(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);
    
        } 
      });
      });
    <!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>

    As you already using jQuery ui, you could achieve this without using any additional library or plugins.


Related Articles