A Pen by Philoreiser on CodePen.
Last active
May 9, 2019 21:33
-
-
Save Philoreiser/c7d8e61d8d7058848ac1539206f32c50 to your computer and use it in GitHub Desktop.
jquery-datepicker-trigger
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> | |
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> | |
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> | |
</head> | |
<body> | |
<div> | |
Year: <input type="text" id="year" value="2019"> | |
</div> | |
<div> | |
Month: <input type="text" id="month" value="5"> | |
</div> | |
Date: <input type='hidden' class='date' id="datepicker"> | |
<button id="pick">Pick</button> | |
<input type="text" id="showdate"> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$( function() { | |
$("#pick, #showdate").on('click', function(){ | |
let yy = $('#year').val(); | |
let mm = $('#month').val() - 1; | |
$('.date').datepicker("setDate", new Date(yy,mm,1)); | |
$(".date").datepicker("show"); | |
}); | |
$(".date").datepicker({ | |
onSelect: function(dateText) { | |
display("Selected date: " + dateText + ", Current Selected Value= " + this.value); | |
$(this).change(); | |
} | |
}).on("change", function() { | |
display("Change event"); | |
let pick_date = new Date($(this).val()); | |
$("#showdate").val( pick_date.getDate() ); | |
}); | |
function display(msg) { | |
$("<p>").html(msg).appendTo(document.body); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment