Simple jQuery Datepicker Example code with demo

Simple jQuery Datepicker Example code with demo

In this Post We Will Explain About is Simple jQuery Datepicker Example code with demo With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to simple date picker in html Example

In this post we will show you Best way to implement simple date picker in jquery, hear for Jquery Datepicker example code with demo using Jquery UI with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Here’s display simple jQuery step by step Datepicker example.

Include External Libs

http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js
</script>

index.html

<html>
<head>
<title>Pakainfo.com -Datepicker example and free download source code</title>
<script type="text/javascript">
$(function () {
$("#date").datepicker();
});
</script>
</head>
<body>
<input id="livedate" type="text" />
</body>
</html>

index.js

In above simple jquery example,option set to date formate id like as a mm/dd/yy but We can change it to simple like as a default format (‘dd-mm-yy’) by changing source code:

<script type="text/javascript">
$(document).ready(function () {
$(function () {
//   $("#mytxtproductDate").date_input();
$("#livedate").datepicker({ dateFormat: 'dd-mm-yy' });
});
});
</script>

OR prevent some users from selecting here weekends ..

<script type="text/javascript">
$(function () {
$("#livedatepicker1").datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
</script>

OR onther way how to disable all datepicker the future dates.

<script type="text/javascript">
             $(function () {
 
                 var date = new Date();
                 var livecmonth = date.getMonth();
                 var livecdate = date.getDate();
                 var livecYear = date.getFullYear();
 
                 $("#livedatepicker1").datepicker({
                     maxDate: new Date(livecYear, livecmonth, livecdate)
                 });
             });
    </script>

Full Example

<html lang="en">
<head>
    <title>Free Download source code php projects</title>
    <script src="1.9.1/jquery.js"></script> 
    <script src="jqueryui/1.11.4/jquery-ui.js"></script> 
    <link href="4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
    <link href="jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">   
</head>
<body>


<div class="container text-center">
     <h2>Simple jQuery Datepicker Example code with demo</h2>
     <strong>Select Any Date:</strong> <input type="text" id="livedatepicker1" class="live from-control">
</div>	

<script type="text/javascript">
    $( "#livedatepicker1" ).datepicker();
</script>

</body>
</html>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is datepicker in jquery code with example And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.


Related FAQ

Here are some more FAQ related to this Article:

  1.   PHP Laravel Check if Array is empty
  2.   Laravel 5.8 get current url with parameters
  3.   Laravel 6 LIKE query example using Eloquent WHERE clause
  4.   Angular 9/8 Material Radio Button Examples
  5.   Remove undefined value from jquery array
  6.   Ajax Shopping Cart PHP MYSQLi Tutorial With Example
  7.   How to display Custom Validation Error Messages in laravel
  8.   jQuery AJAX POST using PHP Tutorial with Example
  9.   datepicker change date format dynamically using jquery
  10.   jQuery Regular Expression Real Time Form Validation Example