Skip to main content

How to attach datepicker with your input text?

Today, we will learn about attaching Datepicker with your input text.
It is a very easy task .
It will just take around 30 seconds..

Let's Start !
Step 1 :
Create html Page having input textbox.
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
   <!-- FOR DATEPICKER -->  
   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
   <!-- FOR BOOTSTRAP -->  
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
   <script src="demodate.js"></script>  
 </head>  
 <body>  
     <input class="datepicker">  
 </body>  
 </html>

In above-stated code snippet, observe Bold Lines ,which are CDN files to apply jquery datepicker .
 jquery-ui.css is css for Jquery
 jquery.min.js is  min for Jquery
 jquery-ui.js is for javascript for Jquery.

 If you want to apply datepicker in your code you must use those 3 CDN files.

 Step 2:
Create a Javascript file and attach it to html Page. I created a file named demodate.js  
So, in above-mentioned snippet, I give a reference for that javascript file.
 $(document).ready(function () {  
   $('.datepicker').datepicker({  
     dateFormat: "dd/mm/yy",  
     startDate: '-3d'  
   });  
 });

Above snippet will call datepicker function .

Now Let's Run a Code

If you still have any doubts relating to this concept, mail me at : dhruvinshah16@gmail.com

Don't forget to subscribe me!
For More Updates stay connected On : Learn2All Facebook Page
Amazing Concepts in Video :  Video On YouTube
Download a Code Using this Link :  Download

Labels

Labels:

Comments

  1. UnknownDecember 21, 2016 at 8:19 AM

    Hii Dhruvin,

    how can we restrict future days in above calendar picker.

    ReplyDelete
  2. UnknownDecember 21, 2016 at 8:41 AM

    Yes you can.
    Set maxdate property of datepicker.

    ReplyDelete

Post a Comment

Popular posts from this blog

How to partition or split DataTable in C#?

Today we will discuss how we can divide or split a very large data table into fixed size of chunks? Scenario: Suppose there is a data table which has 1000 Rows. When you perform for each loop on data table and read each row at that time it will take too much time. If we devide 1000 Rows datatable into 10 fixed sizes (e.g. 100 Rows) datatable, It will take less time. Let's check how to achieve it. Here is a code. private static List<DataTable> SplitTable(DataTable originalTable, int batchSize) { List<DataTable> tables = new List<DataTable>(); int i = 0; int j = 1; DataTable newDt = originalTable.Clone(); newDt.TableName = "Table_" + j; newDt.Clear(); foreach (DataRow row in originalTable.Rows) { DataRow newRow = newDt.NewRow(); newRow.ItemArray = row.ItemArray; newDt.Rows.Add(newRow); i++; if (i == batchSize) ...
6 comments
Read more

How To Lock Objects In Power BI

Overview Sometimes, there is a situation where when we open a report and click on any visual it accidentally nudges a chart a little bit to the right or left. Sometimes, by mistake when viewing a report, the arrangement of visuals scatters a little bit. Microsoft rolls out one new amazing feature to resolve this issue, that is, Lock Objects in Power BI. Advantages of using this feature When our purpose is to only view a report, this feature is a boon for us. Visualization’s position is not changed. Saves a lot of the developer's time to resolve the position related issues. Note   -  This feature is not saved with the report. So, every time you open a report, you need to enable this feature. Now, let’s understand this feature in a brief manner. To understand this, I will first show you one report in which I have not enabled “Lock Objects” feature. Step 1 The below screenshot shows my report which doesn’t have the enabled Lock Objects feature. ...
7 comments
Read more

Create Event Calendar In Power BI

Overview In this article, we will learn how we can create Event Calendar within Power BI. We have a requirement from many of my clients to show Events within the Calendar by Category Colors. In order to achieve that requirement, we can use the custom visual from the marketplace which is “ Calendar by MAQ Software ”. You can directly download it using   URL . At the end of the article, you are able to create Event Calendar as shown in the following screenshot. We have the following data to be shown in the event Calendar. Event Start Date Event End Date Description Category   For your practice, you can download sample data source file and Power BI file using   GitHub . Let’s get started! Step 1 Import “ Calendar by MAQ Software ” from Marketplace or download using the   URL . Once it is imported we can see the visual in visualization pane. Step 2 Drag the “ Calendar by MAQ Software ” visual and set the following property. ...
1 comment
Read more