JQuery plugin This point problem (actual combat)

Daterangepicker is a JavaScript component that is used to select dates.

Resources Direct Search Daterangepicker can, of course, good-looking style may be based on Bootstrap.

Official website: http://www.daterangepicker.com/

Build the project Environment

Daterangepicker JS based on jQuery and moment

CSS based on Bootstrap

HTML code

Input Box Select Date

Label to display the selected time

Button1 Clear Label Time

Button2 re-assignment label time

JS Code Implementation function

1. Input uses the plug-in and sets the callback function to assign the value of the control selection to the label. Use the method to view the official website, not the focus of this article.

$ ("input[name=callbackdate]"). Daterangepicker (
  {
     Singledatepicker:true,//Show only single date selection
  },function (Start, end, label) {
      var date = new Date (start);
      
         Date.getfullyear () + "year" +
         (Date.getmonth () + 1) + "month" +
         Date.getdate () + "Day")
  }
)

2. Button1 Click event Settings

$ ("#clearLabelTime"). Click (function () {  {
     $ ("#showTime"). HTML ("label Time:");
}

3. Button2 Click event Settings

Excuse me! Excuse me!! Excuse me!!! How is it implemented?

One way to regain input time, write a method. If this is the case, there is a yarn relationship with this.

Since it is time to reset the label, it must have been set before, when set? Call the callback function after clicking the time control. (Oh, yes, another way is to re-click the time on the time control, which is the equivalent of a re-selection).

So the plugin has not provided a method is: After the time selection, re-call function? Check the source code (don't ask why, the official website did not provide, but I do not believe he did not write this method) after finding:

Where CB is the method that the callback function binds to the Daterangepicker object. This refers to the question in the object that can be seen in the first article.

If this is true, then it is very good to solve, according to normal people's thinking, will call Daterangepicker place to set the variable, and then call the Notify method Oh. I tried it too:

var DatePicker = $ ("..."). Daterangepicker ({
  ...
  },function (...) {
   ...
  }
)

$ ("#setLabelTime"). Click (function () {  {
    Datepicker.notify ();
}

However, the browser error does not notify method.

Output DatePicker object A look at,#￥%......&

The DatePicker object is actually a JQuery object $ ("input[...]").

What???

Continue to see the source code:

This code is called the entry, return this,this what is it?

$.fn. This is the extension of the JQuery object, Daterangepicker is a method of extension (the object method in which this point refers to the same reference to the previous article). This points to the jquery object $ ("input[...]").

What should I do at this time? Give It up? How can it be.

Look at the sixth line of code, new a Daterangepicker object, so if we can find a way to get this object, is it all right? To dry, modify this code as follows:

Re-run the code, OH.

About plugin author code

Of course, the question of what object is returned in the code, which object is returned, I don't understand what the author is thinking. If I were to write the plugin, I would definitely not return a jquery object because there was no need. However, there are many methods in the code that are bound to the Daterangepicker prototype ...

Well, this article is mainly an example of this in different circumstances of the point of the problem.

If you want the code content, you can find the contact information in the public menu, or add QQ group 422033835

JQuery plugin This point problem (actual combat)