Estoy usando el XDSoft jQuery datetimepicker en mi aplicación (Ruby on Rails 4 (sólo para la información, el no uso de bootstrap datetimepicker)).

Me pregunto si hay una manera de deshabilitar o desactivar un tiempo específico en una fecha específica, por ejemplo deshabilitar sólo 17:00 en 12/17/2014?
disabledDates: ['...'] desactiva una fecha específica.

Traté de disabledDateTimes y disabledTimes pero no funcionan.
Gracias.

  • Estás usando jquery ui datepicker ..? o bootstrap datepicker, o algún otro selector de fecha..? Basado en el plugin que usted está esperando una respuesta..? Las etiquetas en cuestión son muy confusas, por favor, retire las etiquetas innecesarias. el uso de la etiqueta relacionadas con el plugin que estés usando. Si no hay ninguna etiqueta existe, proporcionar un enlace al plugin en cuestión en su lugar.
  • ya que estamos hablando de un datetimepicker y la disabledDates opción, supongo que te refieres a la bootstrap datetimePicker
  • Parece que no hay un activa problema para este.
  • Como se indica claramente por encima de la estoy usando «jQuery datetimepicker» (he añadido Ruby on Rails 4 en paranthesis sólo por la información, yo NO estoy usando bootstrap datetimepicker). Para responder a su ‘puesto que usted está mencionando … deshabilitado la opción de fechas, supongo que te refieres a la de bootstrap datetimepicker’, jQuery datetimepicker tiene la misma opción, consulte el enlace xdsoft.net/jqplugins/datetimepicker/ .
InformationsquelleAutor user2725109 | 2014-12-12

3 Comentarios

  1. 9

    Aquí es un ejemplo de cómo esto puede ser hecho usando el XDSoft DateTimePicker usted está preguntando acerca de.

    Tengo un specificDates matriz que puede utilizar para agregar las fechas que desee destino.

    También tengo un hoursToTakeAway múltiples dimensiones de la matriz que se corresponde con el specificDates matriz donde se puede especificar el horario para llevar.

    HTML

    <input class="eventStartDate newEventStart eventEditDate startTime eventEditMetaEntry" id="from_date" name="from_date" placeholder="Start date and time" readonly="readonly" type="text" />

    Javascript

    var specificDates = ['24/12/2014','17/12/2014'];
    
    var hoursToTakeAway = [[14,15],[17]];
    
    $('#from_date').datetimepicker({
        format:'d.m.Y H:i',
        timepicker: true,
        lang: 'en',
        onGenerate:function(ct,$i){
          var ind = specificDates.indexOf(ct.dateFormat('d/m/Y'));
          $('.xdsoft_time_variant .xdsoft_time').show();
          if(ind !== -1) {
              $('.xdsoft_time_variant .xdsoft_time').each(function(index){
                  if(hoursToTakeAway[ind].indexOf(parseInt($(this).text())) !== -1)              {
                      $(this).hide();        
                  }
              });
          }
        }
    });

    Ejemplo
    El violín

    Básicamente me estoy aprovechando de la onGenerate evento que ocurre después de cada calendario ha sido prestado. Entonces estoy comprobando para ver si la fecha coincide con el día especificado y si lo hace, nos recorrer todo el tiempo los elementos y ocultar las especificadas para la fecha específica.

    Actualizado el Violín implementación de deshabilitar.

    Violín 2

    • Gracias. Su respuesta es casi completa. Me gustaría fade/deshabilitar el tiempo, no ocultar. Puedes hacer eso? Puedes ayudar en esto: he utilizado allowTimes opción para hacer exactamente lo que hizo, pero su solución fue la que yo quería hacer, pero no sabía cómo averiguar acerca de la estructura de datetimepicker objeto. Cómo lo sabía utilizar hoursToTakeAway[ind].indexOf(parseInt($(this).text())) para acceder a un periodo de tiempo determinado? ¿Usted acaba de adivinar y lo hizo de prueba y error? Traté de firebug pero me perdí cuando me miró a los datos del objeto. Cualquiera de las grandes referencias en jQuery depuración de codificación/sería muy apreciada.
    • Lo hice con el fin de averiguar cómo ocultar/desactivar las veces que fue a inspeccionar el DOM (elementos html) y me encontré con que la clase el tiempo del div había y la clase de los padres. El uso de esta información fue capaz de utilizar algunas de las funciones de jQuery para analizar el momento del div y el uso de algunos personalizado matrices soy capaz de comprobar si los elementos se corresponden con el tiempo especificado en la matriz y manipular los elementos… Esperemos que tenga sentido, que he tenido que hacer algunos experimentos con los Eventos para encontrar que el onGenerate evento que funcionó mejor para este propósito.
    • Quizás hay una cosa más que me puede mirar en si tengo tiempo y es que si hace clic en la misma fecha, lo consigue de manera que no se dibujar el calendario ( vas a ver que los elementos se active de nuevo por un momento antes de ser desactivado ). Tengo una idea que, en principio, debería funcionar, pero si eso no es éxito, sería difícil para mí para hacer frente.
    • Gran. Gracias.
    • Puede usted por favor decirme cómo inspeccionar el DOM y encontrar las clases.xdsoft_time_variant .xdsoft_time)? Que plugin? Estoy usando Firefox DOM Inspector, pero no puede ver esas clases.
    • No conozco a nadie, para deshabilitar las fechas después de datepicker se ha generado. El uso de javascript o jQuery? Basado en algunos de los eventos desencadenados.

  2. 1

    Este código está trabajando para mí:

    var specificDates = ['24/12/2014','17/12/2014'];
    
    var hoursToTakeAway = [[14,15],[17]];
    
    $('#from_date').datetimepicker({
        format:'d.m.Y H:i',
        timepicker: true,
        lang: 'en',
        onGenerate:function(ct,$i){
          var ind = specificDates.indexOf(ct.dateFormat('d/m/Y'));
          $('.xdsoft_time_variant .xdsoft_time').show();
          if(ind !== -1) {
              $('.xdsoft_time_variant .xdsoft_time').each(function(index){
                  if(hoursToTakeAway[ind].indexOf(parseInt($(this).text())) !== -1)              {
                      $(this).hide();        
                  }
              });
          }
        }
    });
  3. 1

    Si alguien todavía necesitan solución, puedo escribir el código para desactivar la función de los rangos de tiempo en jquery-ui-selector de fecha.

    Primero necesito init rangos, que será deshabilitado en la fecha actual:

    dateObj1 = new Date(2016,6,22,0);
    dateObj2 = new Date(2016,6,27,10);
    
    diap1 = [dateObj1, dateObj2];
    
    dateObj1 = new Date(2016,6,27,13);
    dateObj2 = new Date(2016,6,27,14);
    
    diap2 = [dateObj1, dateObj2];
    
    dateObj1 = new Date(2016,6,27,20);
    dateObj2 = new Date(2016,6,29,10);
    
    diap3 = [dateObj1, dateObj2];
    
    dateObj1 = new Date(2016,6,27,0);
    dateObj2 = new Date(2016,6,27,13);
    
    diap4 = [dateObj1, dateObj2];
    
    dateObj1 = new Date(2016,7,02,4);
    dateObj2 = new Date(2016,7,02,4,59);
    
    diap5 = [dateObj1, dateObj2];
    
    diapazons = [diap1,diap2,diap3,diap4,diap5];

    Entonces la necesidad de la función, el proceder de este rangos, detectar intersecciones y crear rangos, que se mostrará:

        function getAvailableTimes(restricts, curr_year, curr_month, cur_day)
    {
    day_diaps = [[new Date(curr_year,curr_month,cur_day,0), new Date(curr_year,curr_month,cur_day,23,59,59)]];
    restricts.forEach(function(item, i, arr) {
    day_diaps.forEach(function(day_diap, i_d, arr_d) {
    //console.log('day = '+day_diap.toString());
    if (day_diap[0] >= item[1])
    {
    //console.log(i+' раньше');
    }
    else if (day_diap[1] <= item[0])
    {
    //console.log(i+' позже');
    }
    else if (day_diap[0] >= item[0] && day_diap[1] <= item[1])
    {
    //console.log(i+' закрыт полностью');
    arr_d.splice(i_d,1);
    }
    else if (day_diap[0] >= item[0] && day_diap[1] >= item[1])
    {
    day_diap[0] = item[1];
    //console.log(i+' ранее перекрытие, начало смещено на '+ day_diap.toString());
    }
    else if (day_diap[0] <= item[0] && day_diap[1] <= item[1])
    {
    day_diap[1] = item[0];
    //console.log(i+' позднее перекрытие, конец смещен на '+ day_diap.toString());
    }
    else if (day_diap[0] <= item[0] && day_diap[1] >= item[1])
    {
    new_diap = [item[1],day_diap[1]];
    arr_d.push(new_diap);
    day_diap[1] = item[0];
    //console.log(i+' restrict полностью умещается в диапазон '+ day_diap.toString());
    //console.log(i+' добавлен диапазон '+ new_diap.toString());
    }
    });
    });
    return day_diaps;
    }

    Y el código de datetimepicker:

    <input type="text" id="default_datetimepicker"/>
    <script>
    $.datetimepicker.setLocale('ru');
    var dates_to_disable = ['30-07-2016','31-07-2016','04-08-2016'];
    $('#default_datetimepicker').datetimepicker({
    formatTime:'H:i',
    lang: "ru",
    defaultTime:"10:00",
    formatDate:'d-m-Y',
    todayButton: "true",
    minDate:'01-01--1970', //yesterday is minimum date
    disabledDates:dates_to_disable,
    onGenerate:function(ct,i){
    var dates = jQuery(this).find('.xdsoft_date ');
    $.each(dates, function(index, value){
    year = jQuery(value).attr('data-year');
    month = jQuery(value).attr('data-month');
    date = jQuery(value).attr('data-date');
    diaps = getAvailableTimes(diapazons,year,month,date);
    net_nihrena = true;
    diaps.forEach(function(day_diap, i_d, arr_d) {
    net_nihrena = false;
    });
    if (net_nihrena)
    {
    jQuery(value).addClass('xdsoft_disabled');
    //jQuery(value).addClass('xdsoft_restricted');
    }
    });
    cur_date = ct;
    diaps = getAvailableTimes(diapazons,ct.getFullYear(),ct.getMonth(),ct.getDate());
    var times = jQuery(this).find('.xdsoft_time ');
    $.each(times, function(index){
    var hour = $(this).attr('data-hour');
    var minute = $(this).attr('data-minute');
    cur_date.setHours(hour,minute,0);
    net_takogo_vremeni = true;
    diaps.forEach(function(day_diap, i_d, arr_d) {
    if ((day_diap[0] < cur_date && day_diap[1] > cur_date)  || hour==0)
    {
    net_takogo_vremeni = false;
    }
    });
    if (net_takogo_vremeni)
    {
    $(this).addClass('xdsoft_disabled');
    //$(this).addClass('xdsoft_restricted');
    }
    });
    },
    onSelectDate : function(ct) {
    }
    });
    </script>

Dejar respuesta

Please enter your comment!
Please enter your name here