Débutant. UI Datepicker et Dialog, lorsque j'intègre le champ "input", le Datepicker ne fonctionne plus
Bonjour,
J'essaie d'inclure dans une boite de dialogue générée via le plugin "Dialog" un "input text" associé au plugin Datepicker.
Dans un premier temps j'ai testé les 2 plugins "cote à cote" sans problème. j'ai bien ma boite de dialogue et mon input et bien associé à Datepicker.
Cependant lorsque j'intègre le champ "input" dans le Dialog, le Datepicker ne fonctionne plus. De plus je n'ai aucun message d'erreur.
Je présume que mon manque de connaissance de jquery est en cause.....
Pourriez vous m'indiquer comment faire ?
Merci
Ci-dessous ma page de test.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<html>
<head>
<meta charset="utf-8">
<title>Essai framework Jquery</title>
<link type="text/css" href="css/Themes/start/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<!--
<script type="text/javascript" src="js/development-bundle/ui/minified/jquery.ui.slider.min.js"></script>
-->
<script type="text/javascript">
$(document).ready(function()
{
$('#date').datepicker({
showAnim : 'fold',
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
onClose : function(){
//alert($('#date').val());
}
});
$(function() {
$("button").button();
$( "#dialog" ).dialog( "destroy" );
$( "#dialog-modal" ).dialog({
autoOpen : false,
height: 240,
modal: true,
show: "drop",
hide: "puff",
speed:"slow",
close: function(){
$('#dialog-modal').empty();
//$( "#dialog-modal" ).dialog( "destroy" );
}
});
$('#go').click(function(){
$('#dialog-modal').dialog("option", "position", 'center' );
$( "#dialog-modal" ).dialog( "open" );
$( "#dialog-modal" ).append('<input type="text" name="date" id="date" />');
//setTimeout(function(){$("#dialog-modal").dialog("close");},2000);
return false;
});
});
});
</script>
<style>
</style>
</head>
<body>
<div id="dialog-modal" title="test dialog box">
</div>
<input type="text" name="date" id="date" />
<button id="go">Open the box</button>
<br>
<div>
<button>Button Label</button>
</div>
</body>
</html> |
