How to Add DateTime Picker In Laravel Using JQuery CDN | Bootstrap DateTimepicker
By the end of this article you can confidently use DataTime Picker in any kind of your web project . You can use it in Laravel , Normal HTML project and many more .In this article we will see how to use date time picker using JQuery .
If don't know about JQuery then don't worry you just need to follow the steps and it will be done . If you are looking for Bootstrap DateTime Picker , then let me tell you bootstrap does not provide any datetime picker . you have to use JQuery for it or you can code it manually . After using JQuery you can design it using Bootstrap .
Follow the steps to add datetime picker in your project ..
Step 1 :
Just copy these following codes one by one any paste it inside your head tag .
<link rel="stylesheet" href="https://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>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
For Both DateTime :
<script> $( function() { $( "#datepicker" ).datetimepicker({ changeMonth: true, changeYear: true }); } ); </script>
For Only Time :
<script>
$( function() {
$( "#datepicker" ).timepicker({
changeMonth: true,
changeYear: true
});
} );
</script>
For Only Date :
<script>
$( function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
} );
</script>
Step 2 :
Add id = " datepicker " to your input field .
<input type="text" id="datepicker">
That's it your datetime picker is ready to use
Output :
Hope you understand this well . This is only a JQuery datetime picker example that you can use in your any web project just by using those CDNs .
Thank you for reading this article 😊
For any query do not hesitate to comment -:)
