Problems, need help? Have a tip or advice? Post it here.
14 posts Page 1 of 2
Hi there,

Can someone help me with a snippet?

What I have and what I want.
I have a form with a datepicker, and I want that the client to be able in the admin area to select specific dates so he can make does dates disabled at the front-end because his rooms are full booked at does dates.

Hope that somebody can help me quick with a snippet.
Any Help :)
Hi,

I don't suppose you are employing Couch's calendar feature anywhere in your setup, are you?
This form+datepicker you have on the front-end, please let me know more about it - is it a databound-form? Do you persist the reservations?

Please let me know.
Hi KK,

If its possible to use the calender of Couchcms please let me know.
But I am thinking about to use the date picker of query or something similar ( https://jqueryui.com/datepicker/)

Yes it is a data bound form.

Lets assume that I use the date picker from jquery at the link. I wanted to be possible that the client can login at the back end and set for example that 20 June is fully booked. If he does so, then at the front-end the date picker will disable 20 June to book.

The form is a booking form. The customer will enter the basic stuff (name, address, email etc.) So only the date picker must be editable for the client at the back end.
JQuery datepicker has a 'beforeShowDay' callback (http://api.jqueryui.com/datepicker/#opt ... oreShowDay) that we can use to specify dates that won't be selectable.

An example from http://jsfiddle.net/CxNNh/3747/ -
Code: Select all
var booked = ["2017-06-14","2017-06-15","2017-06-18"]

$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ booked.indexOf(string) == -1 ]
    }
});

So we now only need to dynamically output the 'booked' array above using data fetched from Couch backend.

One way can be to use a repeatable-region containing an editable region of type 'datetime'.
The admin can create a new row for every booked out date setting it with the correct value.

On the frontend, we loop through the rows of the repeatable-region to output the JS 'booked' array we saw above.

Do you think this will do?
Please try implementing it and feel free to ask me if you happen to need any help with it.
Tnx KK awesome,

I wil try it out, I will let you know if it worked.
This picker has similar functionality with disabled dates
http://amsul.ca/pickadate.js/api/#method-get-disable
Tnx trendoman for the datepicker,

And KK,

It works fine you can see it in the screenshots, but hope you or someone else can make it more user friendly.
Now the user must use the brackets and the comma at the end. It would be nice if its possible to use a format like this;

2017,4,20 instead of [2017,4,20],

And if you check the view source image you will see that there is allot of space between the code, not that it bothers me but maybe there is a simple solution for that :)

Attachments

As I had mentioned in my last post, you'll find it much easier to use type 'datetime' editable region in the repeatable block (as opposed to the plain 'text' you are using now).

This way, on the back-end, the user will only have to choose a date from dropdowns instead of manually entering the error prone brackets version. On the frontend, you can format the inputted data to whatever pattern is required. Please give it a try.

As for the spaces, that is nothing to worry about as HTML specs mandates ignoring multiple spaces.
Tnx KK I have overlooked it,

Best support ever!
14 posts Page 1 of 2