Thursday, January 25, 2018

Skptricks CSS html html5 javascript jquery web development JQuery Date Picker With Example

JQuery Date Picker With Example

by on January 25, 2018 in , , , , ,
In this tutorial we are going to discuss Jquery UI Datepicker. This is a smallest and powerful jQuery UI datepicker, which provide lots of functionalities and very easy to use and integrate in web based application.

Lets get started and follow the below steps  :
  1. Make sure to insert the JQuery library file.
  2. Make sure to insert the datedropper JS file and  datedropper CSS stylesheet file.
  3. Make sure to insert input tag and set "text" to the "type" property.
  4. Last step to Initialize datedropper  script.
JQuery Date Picker

Lets see the complete example to select date from date picker.


example-1.html
<!doctype html>
<html>

<head>
    <!-- custom css -->
    <link href="datedropper.css" rel="stylesheet" type="text/css" />
    <!-- jQuery lib -->
    <script src="jquery.min.js"></script>
    <!-- dateDropper lib -->
    <script src="datedropper.js"></script>
    <style>
        input {
            display: inline;
            width: 30%;
            padding: 10px;
            margin: 15px;
            border: solid 1px #BDC7D8;
            margin-bottom: 20px;
        }
        input {}
    </style>
</head>

<body>
    <div style="width:500px;margin: 0px auto;">
        <!-- tag element -->
        Select Your Date :
        <input type="text" data-large-mode="true" data-translate-mode="true" data-auto-lang="true" readonly="">
        <!-- init dateDropper -->
        <script>
            $('input').dateDropper();
        </script>

    </div>
</body>

</html>

Output :
example-2.html
<!doctype html>
<html>

<head>
    <!-- custom css -->
    <link href="datedropper.css" rel="stylesheet" type="text/css" />
    <!-- jQuery lib -->
    <script src="jquery.min.js"></script>
    <!-- dateDropper lib -->
    <script src="datedropper.js"></script>
    <style>
        input {
            display: inline;
            width: 20%;
            padding: 10px;
            margin: 15px;
            border: solid 1px #BDC7D8;
            margin-bottom: 20px;
        }
        input {}
    </style>
</head>

<body>
    <div style="width:500px;margin: 0px auto;">
     <h1> Credit Card Expiry Date. </h1> <br>
        <!-- tag element -->
        <input type="text" data-format="m" data-translate-mode="true" data-id="datedropper-1" readonly="">

        <input type="text" data-format="Y" data-translate-mode="true" data-id="datedropper-1" readonly="">

        <!-- init dateDropper -->
        <script>
            $('input').dateDropper();
        </script>

    </div>
</body>

</html>

 Output :


Other Customization options are as follow :

Set the Default Date : 
<input type="text"  data-default-date="11-13-2016"   />

Disable the Dates in Date Picker :
<input type="text"  data-disabled-days="12/13/2016,12/14/2016,12/15/2016"  />

Set the Date Picker Language :
<!- english -->
<input type="text"  data-lang="en"  />
<!- Italian -->
<input type="text"  data-lang="it"  />
<!- Arabic -->
<input type="text"  data-lang="ar"  />
<!- Greek -->
<input type="text"  data-lang="gr"  />

 Set Max Year :
<input type="text"  data-max-year="2030"  />

 Set Min Year :
<input type="text"  data-min-year="1994"  />

Please do follow the below Link to learn about this date picker :
http://felicegattuso.com/projects/datedropper/ 

This is all about Jquery UI date picker.
Hope you like this tutorial and in case of any issue please do comment in comment box below.

By at
Tags: , , , , ,

1 comment:

Subscribe to: Post Comments (Atom)