jquery - rango - ¿Cómo hacer que la fecha pasada no sea seleccionable en el calendario completo?

datepicker rango de fechas

Question

El problema es cómo deshabilitar la selección en FECHAS ANTERIORES en la vista mes / semana del calendario completo.

Quiero que el usuario no tenga permiso para hacer clic / seleccionar las fechas pasadas.

Aquí hay un fragmento de código en Google que estoy intentando implementar en la representación de eventos:

selectable: true,
selectHelper: false,
select: function(start, end, allDay) {
        var appdate = jQuery.datepicker.formatDate(''<?php echo $DPFormat; ?>'', new Date(start));
        jQuery(''#appdate'').val(appdate);
        jQuery(''#AppFirstModal'').show();
    },
    eventRender: function(event, element, view)
    {
        var view = ''month'' ;
       if(event.start.getMonth() !== view.start.getMonth()) { return false; }
    },

Pero no está funcionando sin embargo.

Intenté también debajo de CSS y esto me ayudó a ocultar solo el texto de la fecha pasada, pero seleccionable todavía está trabajando en el cuadro de fecha pasada.

.fc-other-month .fc-day-number {
     display:none;
}

Estoy realmente atascado con este problema. Por favor que alguien me ayude. Gracias...

Answer 1

A continuación se muestra la solución que estoy usando ahora:

        select: function(start, end, jsEvent, view) {
            if (moment().diff(start, ''days'') > 0) {
                $(''#calendar'').fullCalendar(''unselect'');
                // or display some sort of alert
                return false;
            }

Answer 2

En FullCalendar v3.0, existe la propiedad selectAllow :

selectAllow: function(info) {
    if (info.start.isBefore(moment()))
        return false;
    return true;          
}

Answer 3

En Fullcalendar lo logré con el evento dayClick. Pensé que es la forma más sencilla de hacerlo.

Aquí está mi código ...

 dayClick: function (date, cell) {
              var current_date = moment().format(''YYYY-MM-DD'')
              // date.format() returns selected date from fullcalendar
              if(current_date <= date.format()) {
                //your code
              }
            }

Espero que ayude a que las fechas pasadas y futuras sean inelegibles.

Answer 4

En fullcalendar 3.9, es posible que prefiera el validRange function parameter :

validRange: function(nowDate){
    return {start: nowDate} //to prevent anterior dates
},

Inconveniente: esto también oculta eventos antes de esa fecha y hora.

Answer 5

Esto es lo que estoy usando actualmente

También se agregó la función .add () para que el usuario no pueda agregar un evento a la misma hora

select: function(start, end, jsEvent, view) {
               if(end.isBefore(moment().add(1,''hour'').format())) {
               $(''#calendar'').fullCalendar(''unselect'');
               return false;
             }

Answer 6

Gracias a esta respuesta , he encontrado la siguiente solución:

$(''#full-calendar'').fullCalendar({
    selectable: true,
    selectConstraint: {
        start: $.fullCalendar.moment().subtract(1, ''days''),
        end: $.fullCalendar.moment().startOf(''month'').add(1, ''month'')
    }
});

Answer 7

He estado usando la opción validRange .

validRange: { start: Date.now(), end: Date.now() + (7776000) // sets end dynamically to 90 days after now (86400*90) }

Answer 8

He intentado este enfoque, funciona bien.

$(''#calendar'').fullCalendar({
   defaultView: ''month'',
   selectable: true,
   selectAllow: function(select) {
      return moment().diff(select.start) <= 0
   }
})

¡Disfrutar!

Answer 9

Lo he hecho en mi calendario completo y está funcionando perfectamente.

Puede agregar este código en su función de selección.

 select: function(start, end, allDay) {
    var check = $.fullCalendar.formatDate(start,''yyyy-MM-dd'');
    var today = $.fullCalendar.formatDate(new Date(),''yyyy-MM-dd'');
    if(check < today)
    {
        // Previous Day. show message if you want otherwise do nothing.
        // So it will be unselectable
    }
    else
    {
        // Its a right date
        // Do something
    }
  },

Espero que te ayude.

Answer 10

Me gusta este enfoque:

select: function(start, end) {
    if(start.isBefore(moment())) {
        $(''#calendar'').fullCalendar(''unselect'');
        return false;
    }
}

Básicamente, deshabilitará la selección en los tiempos anteriores al "ahora".

Deseleccionar método

Answer 11

No necesitas un programa largo, solo prueba esto.

checkout.setMinSelectableDate(Calendar.getInstance().getTime());    
Calendar.getInstance().getTime() 

Nos da la fecha actual.

Answer 12

Puedes combinar:

-cubrir texto por CSS como se menciona en la pregunta

- Desactivar el botón PREV en el mes actual

-controlar la fecha en dayClick / eventDrop etc:

dayClick: function(date, allDay, jsEvent, view) {
    var now = new Date();
    if (date.setHours(0,0,0,0) < now.setHours(0,0,0,0)){
        alert(''test'');
    }
    else{
         //do something
    }
}

Answer 13

Puedes usar esto

var start_date= $.fullCalendar.formatDate(start,''YYYY-MM-DD'');
var today_date = moment().format(''YYYY-MM-DD'');
if(check < today)
   {
      alert("Back date event not allowed ");
      $(''#calendar'').fullCalendar(''unselect'');
      return false
   }