Bootstrap3-datepicker and Jquery.form.js

The two controls are relatively simple and are introduced together.

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

The effect is as follows:

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

Bundles. ADD (stylebundle("~/content/css""~/content/bootstrap.css" "~/content/site.css""~/ Content/datepicker3.css "));      

Bundles. ADD (scriptbundle " ~/bundles/ Bootstrap "). Include ( "~/scripts/bootstrap.js" ,  "~/scripts/respond.js"  "~/scripts/ Bootstrap-datepicker.js "  "~/scripts/bootstrap-datepicker.zh-cn.js" )); 

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

<typeclassplaceholder= "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 selectedCLEARBTN:true,//Clear ButtonTODAYBTN:true,//Today buttonFormat: "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:

<Divclass= "Input-group input-medium date-picker input-daterange"Data-date-format= "Yyyy-mm-dd">    <inputname= "Dtbegin"class= "Form-control"style= "FONT-SIZE:13PX;"type= "text"value="">    <spanclass= "Input-group-addon">To</span>    <inputname= "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 ({    "ZH-CN",    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 is changed.             $ (this). Parents ("form"). Ajaxsubmit ({                function  (event, position,total,percent) {                    //percent is the percentage                     console.log (percent);                }            }) ;        });    }); </script>

Bootstrap3-datepicker and Jquery.form.js