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

Read Also:  Angular 2 interview questions Answers

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

Read Also:  Laravel 6 Eloquent LEFT JOIN Query Example Tutorial

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. Read Also:  Laravel Pagination Example Tutorial
  2. Read Also:  CSS Modal Popup Box Window Plugins
  3. Read Also:  html web page examples with source code
  4. Read Also:  datepicker change date format dynamically using jquery
  5. Read Also:  Laravel Check and uncheck all checkbox using jquery
  6. Read Also:  date time picker jquery
  7. Read Also:  jQuery Get the Text Value of Selected Option
  8. Read Also:  Laravel 6 orderBy for Multiple columns
  9. Read Also:  subquery in sql
  10. Read Also:  Extract XML Response in PHP Example
CLOSEX