google-code-export / calendardateselect

Automatically exported from code.google.com/p/calendardateselect
Other
0 stars 0 forks source link

add in - inline image for open cal #124

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago

If you use this initialize, you can click on last 20px input to show cal-popup

<code type="text/css">
input.cal-input{
  width:65px;
    padding-right:20px;     
  background-color:white;
    background-repeat:no-repeat;    
    background-position:100% 50%;
    background-image:url(images/calendar.gif);
}
input.cal-input.over{
    cursor:pointer;
}
</code>

<code type="text/javascript">
var DateInput = Class.create({
    initialize: function(el){
      this.element = $(el);
      this.options = Object.extend({
          calClass:null,
          overClass:'over',
          year_range:7,

          _btn_width: 20,
          _show:0
      }, arguments[1] || { });
      if(this.options.spinClass)
        this.element.addClassName(this.options.spinClass);

Event.observe(this.element,'mousemove',this.onMouseMove.bindAsEventListener(this
));

Event.observe(this.element,'mouseout',this.onMouseOut.bindAsEventListener(this))
;

Event.observe(this.element,'click',this.onClick.bindAsEventListener(this));

    },
    onMouseMove:function(event){
      var of = this.element.cumulativeOffset();// [left, top] 
      var show = (Event.pointerX(event) > of[0] + this.element.getWidth() -
this.options._btn_width)
                ? 1 : 0;
      if (show !== this.options._show) {
        this.options._show = show;
        if(show==0)
          this.element.removeClassName(this.options.overClass);
        else
          this.element.addClassName(this.options.overClass);
      }

    },
    onMouseOut: function(ev){
      this.element.removeClassName(this.options.overClass);
    },
    onClick: function(ev){
      if(this.options._show == 1)
        new CalendarDateSelect( this.element, this.options );
    }
});
</code>

<usage>
<input id="strippubdate" name="strippubdate" type="text" class="cal-input" />
  <script type="text/javascript">
       var cal = new DateInput($('strippubdate'));
  </script>
</usage>

Original issue reported on code.google.com by wojciech...@gmail.com on 8 Jul 2008 at 10:51

Attachments:

GoogleCodeExporter commented 9 years ago

Original comment by timchar...@gmail.com on 30 Nov 2008 at 8:20

GoogleCodeExporter commented 9 years ago

Original comment by timchar...@gmail.com on 30 Nov 2008 at 8:31