Tuesday, May 30, 2017

jQuery Validator - Datetime validate custom with "from date" and "to date"

 jQuery.validator.addMethod("nulldate", function (value, element, params) {  
     if (value.length == 0)  
       return false;  
     return true;  
   }, 'Từ ngày phải nhỏ hơn hoặc bằng đến ngày, vui lòng kiểm tra lại');  
   jQuery.validator.addMethod("beetwenTime", function (value, element, params) {  
     var formDateTime = moment($(element).parent().data("DateTimePicker").date(), 'MM/DD/YYYY HH:mm');  
     var toDateTime = moment($(params).parent().data("DateTimePicker").date(), 'MM/DD/YYYY HH:mm');  
     if (toDateTime.diff(formDateTime, 'minutes') > 0) {  
       $(params).removeClass('border-error');  
       return true;  
     } else {  
       $(params).addClass('border-error');  
       return false;  
     }  
   }, 'Thời gian từ không được lớn hơn thời gian tới, vui lòng kiểm tra lại!');  
   jQuery.validator.addMethod("LimitTime", function (value, element, params) {  
     if ($("#txtTDate").val().length > 0) {  
       var formDateTime = moment($(params).parent().data("DateTimePicker").date(), 'MM/DD/YYYY HH:mm');  
       var toDateTime = moment($(element).parent().data("DateTimePicker").date(), 'MM/DD/YYYY HH:mm');  
       return toDateTime.diff(formDateTime, 'days') > -92;  
     } else  
       return true;  
   }, 'Chỉ tìm kiếm được tối đa 92 ngày');  
HTML
 <div class="col-sm-12">  
         <div class="col-sm-6">  
           <!--#region Từ ngày-->  
           <div class="form-group form-group-sm">  
             <label class="col-sm-4 control-label">Từ ngày</label>  
             <div class="col-sm-8">  
               <div class="input-group input-group-sm input-datetime" id="divFromDate">  
                 <input type="text" id="txtFDate" name="d1"  
                     class="form-control input-sm datetime-mask" style="margin-top: 0">  
                 <span class="input-group-addon">  
                   <span class="glyphicon glyphicon-calendar"></span>  
                 </span>  
               </div>  
             </div>  
           </div>  
           <!--#endregion-->  
         </div>  
         <div class="col-sm-6">  
           <!--#region Đến ngày-->  
           <div class="form-group form-group-sm">  
             <label class="col-sm-4 control-label">Đến ngày</label>  
             <div class="col-sm-8">  
               <div class="input-group input-group-sm input-datetime" id="divToDate">  
                 <input type="text" id="txtTDate" name="d2"  
                     class="form-control input-sm datetime-mask" style="margin-top: 0">  
                 <span class="input-group-addon">  
                   <span class="glyphicon glyphicon-calendar"></span>  
                 </span>  
               </div>  
             </div>  
           </div>  
           <!--#endregion-->  
         </div>  
       </div>  
INIT
   $('#divFromDate').data("DateTimePicker").date(Sv.DefaultDate().FormDate);  
   $('#divToDate').data("DateTimePicker").date(Sv.DefaultDate().ToDate);  
   ////Max date  
   $('#divFromDate').data("DateTimePicker").maxDate(Sv.DefaultDate().MaxDate);  
   $('#divToDate').data("DateTimePicker").maxDate(Sv.DefaultDate().MaxDate);  
HOW TO USE
 $('#btnSearch').on('click', function () {  
     $('#txtTDate').rules('add', {  
       required: true,  
       messages: {  
         required: 'Bạn phải nhập/ chọn ngày để tìm kiếm',  
       }  
     });  
     $('#txtFDate').rules('add', {  
       required: true,  
       beetwenTime: '#txtTDate',  
       LimitTime: '#txtTDate',  
       messages: {  
         required: 'Bạn phải nhập/ chọn ngày để tìm kiếm',  
         beetwenTime: 'Từ ngày phải nhỏ hơn hoặc bằng đến ngày.',  
         //LimitTime: 'Bạn phải nhập/ chọn ngày để tìm kiếm'  
       }  
     });  
     //$('#txtFDate').rules('add', {  
     //  required: true,  
     //  LimitTime: '#txtTDate',  
     //  messages: {  
     //    required: 'Bạn phải nhập/ chọn ngày để tìm kiếm'  
     //  }  
     //});  
     if (!$('#frmReport').valid()) return;  
     $table.bootstrapTable('refresh');  
   });  

No comments:
Write comments