Bootstrap DatePicker calls a method after the date is selected

First of all, I thank NetEase lofter bo Master Ivy Blog, I just realized the problem, I hope to the back with these several plug-in children's shoes a reminder, do not make the same mistakes with me.

This is the blog written by Lvy blogger: http://10305101ivy.blog.163.com/blog/static/5847658920135434648580/

API call on the Internet a lot, I do not introduce, we own Baidu. But be sure to pay attention to their different uses.

The main point here is the difference:

First, the DatePicker of Bootstrap:

2013 Bootstrap fire, followed by the introduction of many use plugins, including Bootstrap's DatePicker

GitHub Open Source Address: Https://github.com/eternicode/bootstrap-datepicker

Online Documentation: http://bootstrap-datepicker.readthedocs.org/en/latest/

Second, DateTimePicker:

This project is a branch of the Bootstrap-datetimepicker project and the original project does not support time selection.
Other parts have also been improved and enhanced, such as the load process, which adds support for the ISO-8601 date format.

Specifically, you can look at this http://www.bootcss.com/p/bootstrap-datetimepicker/.

Third, the DatePicker of jquery:

The JQuery UI is powerful, and the date selector plugin DatePicker is a flexible plug-in that allows us to customize how it is presented, including date formats, languages, limit selection date ranges, add related buttons, and other navigation.
Official address: Http://docs.jquery.com/UI/Datepicker, official example: http://jqueryui.com/demos/datepicker/.

A good address for DIY JQuery UI interface effects site http://jqueryui.com/themeroller/

I used Bootstrap's datepicker before.

Then I used jquery's DatePicker call method to confuse the two.

$ (' #job-calendar '). DatePicker ({
DateFormat: "Yyyy-mm-dd",
Language: "ZH-CN",
Onselect:gotodate
});

function GoToDate (EV) {

Window.location.href = "xxxx.html" + "? Date= "+ ev.date.getFullYear (). ToString () +"-"+ (Ev.date.getMonth () +1). ToString () +"-"+ ev.date.getDate (). ToString () ;
}

Not get the choice date I want, the effect of page jump. Think it is a version of the problem, after the latest version of the replacement or not. Only later found that there are two DatePicker plug-ins.

The following is an API call method for Bootstrap's datepicker.

$ (' #job-calendar '). DatePicker ({
DateFormat: "Yyyy-mm-dd",
Language: "ZH-CN",
Onselect:gotodate
}). On (' ChangeDate ', gotodate);

Mainly want to let everybody notice is, see clearly oneself use is which plug-in, go to find corresponding API, some subtle difference really enough toss a long time.

Described below

simple use of Bootstrap-datepicker

Say DatePicker first. The address on GitHub is: Https://github.com/eternicode/bootstrap-datepicker.

In the bundle, refer to adding JS and CSS references.

Bundles. ADD (New Stylebundle ("~/content/css"). Include ("~/content/bootstrap.css", "~/content/site.css", "~/content/datepicker3.css"));

Then is the HTML page code, very simple, a label can:

<input type= "text" class= "DatePicker" placeholder= "Please select Date"/>

Then write the JS format:

<script type= "Text/javascript" >
    $ (function () {
        $ (". DatePicker"). DatePicker ({
            language: "ZH-CN",
            autoclose:true,//automatically hide the date selection box when selected
            clearbtn:true,//Clear button
            todaybtn:true,//today button
            format: "YYYY-MM-DD"/ /date format, see Http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
        });
    });
</script>

So, the basic function is realized, it is easier.

DatePicker has a series of methods, such as getting/setting the date, the basic format is:

$ ('. DatePicker '). DatePicker (' method ', arg1, arg2);

For example, get the current date:

$ (". DatePicker"). DatePicker ("GetDate"). toLocaleString ();//Get
$ (". DatePicker"). DatePicker ("SetDate", ' 2014-01-25 ');//settings

This datepicker has a more practical function, in many cases we give the customer to choose a time period, all requirements start time must be less than the end time, this feature DatePicker has helped us achieve.
Add the following HTML tags:

<div class= "Input-group input-medium date-picker input-daterange" data-date-format= "Yyyy-mm-dd" >
    < Input name= "Dtbegin" class= "Form-control" style= "font-size:13px" type= "text" value= "" >
    <span class= " Input-group-addon "> to </span>
    <input name=" dtend "class=" Form-control "style=" FONT-SIZE:13PX; "type= "Text" value= "" >
</div>

Two input in a div, format-related can be set in the Div, do not need to reset each subsequent.

Do the following JS:

$ (". Date-picker"). DatePicker ({
    language: "ZH-CN",
    autoclose:true
});

The effect is as follows:

When the customer chooses a start time that is larger than the end time, the end time automatically becomes the start time.

DatePicker Introduction is complete.

The following describes Jquery.form.js

GitHub Project Address: http://jquery.malsup.com/form/

Many articles can be found in the park, plus the Ajax.beginform () in MVC now implements the functionality of the related asynchronous forms. But asynchronous file upload this function is very good, plus the progress bar display, in the previous period of time the company project felt very practical.

<form method= "POST" action= "@Url. Action (" Receivefile ", new {controller =" Home "})" Enctype= "Multipart/form-data" >
    <input type= "file" name= "File1"/>
</form>

When defining the form label, pay attention to Enctype= "Mutipart/form-data".

<script type= "Text/javascript" >
    $ (function () {
        $ ("[Name=file1]"). Change (function () {// Triggers an asynchronous submit form event when the file changes.
            $ (this). Parents ("form"). Ajaxsubmit ({
                uploadprogress:function (event,position,total,percent) {
                    // Percent is the percentage of
                    console.log (percent);});
        }
); </script>

The above use is transferred from: http://www.cnblogs.com/mymint/p/4512463.html