How can validation timepicker min and max time selection?

Question

How can validation time picker min and max time selection?

I am creating a calendar date click showtime input and then I have to click add button to show dynamic rows time input fields so I can add validation one date-time range min and max time

var startDateTime = '09:30:20'
var dates = new Array();
var time = new Date();

function add30Min(oldTime) {
  // var newDateTime =  moment(oldTime, "HH:mm")
  //             .add(30, 'minutes')
  //             .format('HH:mm');
  return oldTime;
}

function minus30Min(oldTime) {
  // var newDateTime =  moment(oldTime, "HH:mm")
  //             .subtract(30, 'minutes')
  //             .format('HH:mm');
  return oldTime;
}

function checkTimeValidation(elm, date) {

}
// when start time change, update minimum for end timepicker
function tpStartSelect(time, endTimePickerInst) {
  // $('#timepicker_end').timepicker('option', {
  //     minTime: {
  //         hour: endTimePickerInst.hours,
  //         minute: endTimePickerInst.minutes
  //     }
  // });
}
// when end time change, update maximum for start timepicker
function tpEndSelect(time, startTimePickerInst) {
  // $('#timepicker_start').timepicker('option', {
  //     maxTime: {
  //         hour: startTimePickerInst.hours,
  //         minute: startTimePickerInst.minutes
  //     }
  // });
}
var myControl = {
  create: function(tp_inst, obj, unit, val, min, max, step) {
    $('')
      .appendTo(obj)
      .spinner({
        min: min,
        max: max,
        step: step,
        change: function(e, ui) { // key events
          // don't call if api was used and not key press
          if (e.originalEvent !== undefined)
            tp_inst._onTimeChange();
          tp_inst._onSelectHandler();
        },
        spin: function(e, ui) { // spin events
          tp_inst.control.value(tp_inst, obj, unit, ui.value);
          tp_inst._onTimeChange();
          tp_inst._onSelectHandler();
        }
      });
    return obj;
  },
  options: function(tp_inst, obj, unit, opts, val) {
    if (typeof(opts) == 'string' && val !== undefined)
      return obj.find('.ui-timepicker-input').spinner(opts, val);
    return obj.find('.ui-timepicker-input').spinner(opts);
  },
  value: function(tp_inst, obj, unit, val) {
    if (val !== undefined)
      return obj.find('.ui-timepicker-input').spinner('value', val);
    return obj.find('.ui-timepicker-input').spinner('value');
  }
};

function setDefaultTime(time) {
  console.log('Selected Time is:' + time)
}

function setTimePickerDynamic() {
  $('.start_event_time_picker').timepicker({
    dateFormat: '',
    timeFormat: 'HH:mm',
    datepicker: false,
    controlType: myControl,
    ampm: true,
    dropdown: true,
    onClose: function(dateText, $i) {
      var id = $(this).attr('id');
      var endTimeId = $('#' + id).parents('.divTime').find('.end_event_time_picker').attr('id');
      var startDateTextBox = $('#' + endTimeId);
      // if(startDateTextBox.val() != '') {
      //    var testStartDate = new Date(startDateTextBox.val());
      //    var testEndDate = new Date(dateText);
      //    if(testStartDate > testEndDate){ 
      //                     startDateTextBox.val(add30Min(dateText));
      //                 }
      // } else {
      //    startDateTextBox.val(add30Min(dateText));

      // }
    },
    onSelect: function(dateText, el) {
      tpStartSelect();
      var id = $(this).attr('id');
      var element = $(this),
        text;
      // get access to this Timepicker instance
      var timepicker = element.timepicker();
      text = timepicker.format(dateText);

      $('#' + id).parents('.divTime').find('.end_event_time_picker').timepicker('option', {
        'minTime': text,
        'timeFormat': 'HH:mm'
      });
      setDefaultTime(dateText);

      // var this=$(this);
      // checkTimeValidation(this, dateText);               
    },
    beforeShow: function(dateText) {
      var id = $(this).attr('id');
      var split_id = id.split("_");
      var firstIndex = parseInt(split_id[3]);
      var secondIndex = parseInt(split_id[4]);
      var elm = $(this);
      // checkTimeValidation(elm, dateText);        
    },
  }).attr('readonly', 'readonly');
  $('.end_event_time_picker').timepicker({
    dateFormat: '',
    timeFormat: 'HH:mm',
    datepicker: false,
    controlType: myControl,
    ampm: true,
    onClose: function(dateText, $i) {
      var id = $(this).attr('id');
      var endTimeId = $('#' + id).parents('.divTime').find('.start_event_time_picker').attr('id');
      var startDateTextBox = $('#' + endTimeId);
      // if(startDateTextBox.val() != '') {
      //    var testStartDate = new Date(startDateTextBox.val());
      //    var testEndDate = new Date(dateText);
      //    if(testStartDate > testEndDate){
      //                     startDateTextBox.val(minus30Min(dateText));
      //                 }
      //             } else {
      //    startDateTextBox.val(minus30Min(dateText));
      // }


    },
    onSelect: function(dateText, el) {
      var id = $(this).attr('id');
      console.log($('#' + id).parents('.divTime').find('.start_event_time_picker').val());
      console.log(dateText);
      var timepicker = element.timepicker();
      text = timepicker.format(dateText);

      $('#' + id).parents('.divTime').find('.start_event_time_picker').timepicker('option', {
        'maxTime': text,
        'timeFormat': 'HH:mm'
      });


    },
    beforeShow: function(dateText) {
      var id = $(this).attr('id');
      var split_id = id.split("_");
      var firstIndex = parseInt(split_id[3]);
      var secondIndex = parseInt(split_id[4]);

    }
  }).attr('readonly', 'readonly');
}

function addDate(date) {
  if ($.inArray(date, dates) < 0) dates.push(date);
}

function removeDate(index, date) {
  $(".div" + date).remove();
  dates.splice($.inArray(date, dates), 1);
}

function printArray(date) {
  var printArr = new String;
  var j = 0;
  dates.forEach(function(val, i) {
    var id = $("#event_dates" + val);
    if (id.length == 0) {
      ++j;
      printArr += 'event_dates_times[scheduling_date_' + i + '][date]
' + '
' + '
';
    }
  });
  $('#show_calender_div').append(printArr);
  setTimePickerDynamic();
}
// Adds a date if we don't have it yet, else remove it
function addOrRemoveDate(date) {
  var index = $.inArray(date, dates);
  if (index >= 0) {
    removeDate(index, date);
  } else {
    addDate(date);
    printArray(date);
  }
}
// Takes a 1-digit number and inserts a zero before it
function padNumber(number) {
  var ret = new String(number);
  if (ret.length == 1) ret = "0" + ret;
  return ret;
}
$("#mdp-demo").multiDatesPicker({
  dateFormat: 'dd-mm-yy',
  maxPicks: 5,
  minDate: 0,
  onSelect: function(dateText) {
    addOrRemoveDate(dateText);
  },
  beforeShowDay: function(date) {
    var year = date.getFullYear();
    // months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009"
    var month = padNumber(date.getMonth() + 1);
    var day = padNumber(date.getDate());
    // This depends on the datepicker's date format
    var dateString = month + "-" + day + "-" + year;
    var gotDate = $.inArray(dateString, dates);
    if (gotDate >= 0) {
      // Enable date so it can be deselected. Set style to be highlighted
      return [true, "ui-state-highlight"];
    }
    // Dates not in the array are left enabled, but with no extra style
    return [true, ""];
  }
});
$(document).on('click', '.btn_add_mtinput_time', function() {
  // $(".btn_add_mtinput").click(function(e){
  var max = 3;
  var total = $(this).parents(".dynamicDivDate").children('.divTime').length;
  var lastid = $(this).parents(".dynamicDivDate").children(".divTime:last").attr("id");
  var checkinput = $(this).parents(".dynamicDivDate").children(".divTime:last");
  if (checkinput.find('.start_event_time_picker').val() == '' || checkinput.find('.end_event_time_picker').val() == '') {
    // alert('Please select time then add new fields');
    // return false;
  }
  var split_id = lastid.split("_");
  var nextindex = Number(split_id[1]) + 1;
  // console.log($(this).parents(".dynamicAddRemoveMain").siblings('.divTime').length);
  if (total < max) {
    var id = $(this).parents(".dynamicAddRemoveMain").parents('.dynamicDivDate').attr('id');
    var split_id = id.split("_");
    var getindex = parseInt(split_id[1]) + 1;
    $(this).parents(".dynamicAddRemoveMain").parents('.dynamicDivDate').append('
' + '
');
    setTimePickerDynamic();
  } else {
    alert("Maximum limit 3");
  }
});
$(document).on('click', '.btn_remove_mtinput_time', function() {
  $(this).parents('.divTime').remove();
});

This calendar multiple dates selected then show the new rows with input start and end time. then click the add button show new row for selected date start time and end time how can validation start time and end time every new row and previous rows.

How can validation timepicker min and max time selection?

0 Answers