Saturday, 28 December 2013

fromdate todate selecter in jquery

bootstrap-datepicker Fromdate to date selecter

javascript 

 var nowTemp = new Date();
 var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
         
       var checkin = $('#fromdate').datepicker({format:'dd-mm-yyyy',
               onRender: function(date) {
                      return date.valueOf() < now.valueOf() ? 'disabled' : '';
             }
           }).on('changeDate', function(ev) {
               if (ev.date.valueOf() > checkout.date.valueOf()) {
                    var newDate = new Date(ev.date);
                    newDate.setDate(newDate.getDate());
                    checkout.setValue(newDate);
          }
             checkin.hide();
             $('#todate')[0].focus();
       }).data('datepicker');
       
       var checkout = $('#todate').datepicker({format:'dd-mm-yyyy',
                      onRender: function(date) {
                            return date.valueOf() < checkin.date.valueOf() ? 'disabled' : '';
                      }
       }).on('changeDate', function(ev) {
                        checkout.hide();
       }).data('datepicker');

Html  twitter bootstrap

   <div id="datecontainer">  
                           <div class="control-group">
                              <label class="control-label">From Date:</label>
                                <div class="controls">
                                <div class="input-append date" id="fromdate" data-date="" data-date-format="dd-mm-yyyy">
                                <input class="span2" size="16" type="text" value="">
                                <span class="add-on"><i class="icon-th"></i></span>
                               </div>
                             </div>
                           </div>
           
                            <div class="control-group">
                              <label class="control-label">To Date:</label>
                                 <div class="controls">
                                   <div class="input-append date" id="todate" data-date="" data-date-format="dd-mm-yyyy">
                                     <input class="span2" size="16" type="text" value="">
                                     <span class="add-on"><i class="icon-th"></i></span>
                                  </div>
                                </div>
                             </div>          
                    </div>

        Your valuable feedback question, or comments about this article are always welcome.

No comments:

Post a Comment