Calendar with restrictions with HTML, JavaScript, CSS

0

I need help. I seek to implement a form where one of the fields is a calendar, which has the following characteristics:

1) Saturdays and Sundays disabled.

2) That does not allow to select previous dates.

3) As the shipments of the products are made 48 hours after placing the order, the idea is that, if today is Monday, the first available date is from Wednesday onwards. p>

I have searched through several internet sites but nobody can give me the correct solution. The best I could find is this calendar:

link

If someone has knowledge of how to do this, I would appreciate it.

Greetings!

    
asked by Damian Ricobelli 11.10.2018 в 04:59
source

1 answer

1

Ok, to do this one option that I recommend is flatpickr.js , it is a pretty light plugin and totally programmable.

In this answer I do not explain how to install it but to guide you in how you could solve the problem with the plugin, I leave you the following code example :

    // Seleccionamos la  etiqueta que queremos convertir con el plugin:

$(".selector").flatpickr({

  // Agregamos nuestra configuracion deseada, en este caso solo haremos que no sean seleccionables los dias no deseados.

  // Con disable condicionamos que si date.getDay() es igual al dia de la semana no deseado, este se desactive. 

  "disable": [
    function(date) {
        // return true to disable
        return (date.getDay() === 0 || date.getDay() === 6);

    }
  ]  

});

Here you have a functional example .

And that would be everything, I recommend that you give a pass through the documentation as it is worth it, it is a pretty rich plugin, especially in information, there are all its functions and you also have some examples.

  

NOTE : You can work on JQuery and on JavaScript Vanilla.

I hope you have been helpful, greetings.

CDN - Documentation

    
answered by 11.10.2018 / 06:14
source