Textfeld erscheint unter einem JQuery DatePicker

Ich habe ein Datepicker auf meiner Website, das das ausgewählte Datum in ein spezielles Datum konvertiert und es in einem schreibgeschützten Textfeld darunter anzeigt. Die Sache ist, will ich die eingebaute Funktion im Datepicker verwenden, wo ich es öffnen und schließen kann, wenn ich auf einen Link oder eine Schaltfläche klicke.Textfeld erscheint unter einem JQuery DatePicker

Gerade die Verknüpfung der Datumsauswahl zu öffnen:

<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

Hier ist meine persönliche Code, den ich auf einer unabhängigen Seite haben:

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

Wie Sie kann sehen, ich habe alle Komponenten, die ich habe Möchte, aber ich mache es einfach nicht so, wenn ich auf den Link das erste JFiddle klicke, erscheint das Textfeld im zweiten JFiddle unter dem Datepicker. Ich hoffe, dass ich mir darüber im Klaren bin, mit was ich Probleme habe, wenn es sein muss, dass ich mir ein Bild davon machen kann, was ich zu tun versuche.

Einige Dinge, die ich versucht habe, sind:

eine Bootstrap-modal oder popover Verwendung sowohl mit dem Datepicker und Textbox darin, weder gearbeitet, wie ich es wollte.
Ich habe auch versucht, die Datumsauswahl zu ändern, aber ich habe es einfach vermasselt und musste es rückgängig machen.

Irgendwelche Vorschläge? Ich habe das Gefühl, dass das, was ich versuche, trivial ist, und es nervt mich, dass ich es nicht herausfinden kann.

Quelle

2017-03-11 MicrosoftDave

Keine einfache Lösung für Ihr Problem, aber Sie könnten jQuery ui Dialog verwenden, um ein Modal mit Datumsauswahl zu öffnen.

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

Wie Sie bereits jQuery UI verwenden, können Sie dies ohne Verwendung einer zusätzlichen Bibliothek oder Plugins erreichen.

Quelle

2017-03-11 11:54:26 azs06

Ich mag das! Danke, sehr hilfreich! – MicrosoftDave

Textfeld erscheint unter einem JQuery DatePicker

Antwort

Verwandte Themen