By jquery UI datepicker Ways

the last time I did a project airfare, the search process was used tickets via datepicker. Apparently remembered this in my blog does not have this problem, but in fact do not be hard for you to countless new jobs, it will certainly be a useful document.

we will use a very familiar jquery plugin and it’s famous jQuery UI, this is a very popular library for making a web coder, it contains the applications that you use often, such as dialog (effect popup when click on something and a popup will show up), datepicker (used to make date picker with many interesting options) and a more functions that I enjoyed more was autocomplate (for when you have so many choices that you can not hold in the dropdown menu, it will automatically display the corresponding results when you type any character in the textbox).

jQuery UI addition there are many other great content for you to explore in future articles I will make manual autocomplate.

What we have now started okay, first you copy the following 3 lines of code put in the header:

Source code

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

to explain briefly the new disciples understandable introductory always okay, the first line of code for jquery ui css, 2nd line is the jquery library and the last paragraph is jQuery UI. You can download this file and save 3 on your hosting or you can use this as well, help you speed up web page loading very pretty if you do it this way with many other file.

then you create a textbox as follows:

Source code

<p>Date: <input type="text" id="datepicker"></p>

brought textbox id is “datepicker” okay

The next is the most important part, you copy the following code into jquery okay:

Source code

<script type="text/javascript">
$(function()
{
    $('.ngaydi').datepicker(
    { 
        showOn: 'button',
        buttonImage: 'images/icon/blank.png',
        buttonText: '',
        buttonImageOnly: true,
        minDate: 0,
        dateFormat: 'dd/mm/yy',
        defaultDate: +0,
        dayNamesMin: ["CN", "H", "B", "T", "N", "S", "B"],
        monthNames: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'],
        beforeShow: function() {
            //các functions khác nếu bạn muốn thực hiện
      }
    });
</script>

‘m looking at the code above you also know little about how it works, right? Can you replace the words of my own liking. If you do not want to show button (the button next to the text box), then you can cut down the period:

Source code

showOn: 'button',
buttonImage: 'images/icon/blank.png',
buttonText: '',
buttonImageOnly: true,

mindate: 0 is hidden the day was over, only to show from the current date onwards

DateFormat: ‘dd / mm / yy’ date format after selecting

Other variables mostly display configuration only, this you can find out okay.

cso you can see an example here

customizable parameters of the datepicker you can see here

In addition to making some of you will not because of a lack of interface errors on the image, you can download the jQuery UI package here

which is available for the image files you use. I wish you success, vocational code is one profession that academic knowledge never before!

Tags Cloud