relu / contact-form-7-datepicker

Datepicker for Contact Form 7 Wordpress Plugin based on JQueryUI's datepicker (NO LONGER MAINTAINED)
http://wordpress.org/plugins/contact-form-7-datepicker/
28 stars 34 forks source link

Problem with custom minDate jQuery #88

Open 247creative opened 10 years ago

247creative commented 10 years ago

Hi Relu,

I have been using the Contact Form 7 Datepicker plugin on a WP-based site, but seem to have run into something of an issue with the minDate value!

We've had to use some custom jQuery to modify how the date picker works, but for some reason, it's not working correctly, whereas it does behave itself if we use the native CF7 date function (however, as the dates need to be formatted in dd/mm/yy, the forms can't be submitted using CF7 as they don't pass its inbuilt mm-dd-yyyy requirements) - do you have any idea how we can get the script below to play ball with your date picker plug-in? There are actually two date pickers that need to use the following (each one is on a separate form).

function daysInMonth(iMonth, iYear){ return 32 - new Date(iYear, iMonth, 32).getDate(); }

    var currentTime = new Date();
    var day = currentTime.getDate();
    var t = (day > 1) ? 3 : 2;
    var month = currentTime.getMonth() + t;
    var year = currentTime.getFullYear();

    if(month > 12){ 
        month = month - 12;
        year = year + 1;
    }

    jQuery('#freeze-start-date').datepicker({
            dateFormat: 'dd/mm/yy',
            minDate: "01/" + month + "/" + year,
            onClose: function(dateText, inst) {
                if(dateText != "") {
                    var how = jQuery("#menu-1451").val();
                    how = parseInt(how);
                    var end1 = dateText.split('/');

                    var begin = "01/" + end1[1] + "/"+end1[2];
                    var end3 = end1[2];
                    var end2 = end1[0];
                    if(end2 != "01") {
                        alert("Freeze can only start from 1st day of the month");
                    }
                    end2 = daysInMonth(end1[1]-1-1+how,end1[2]);

                    emonth = parseInt(end1[1],10) - 1 + how;
                    if(emonth > 12) {
                        emonth = emonth - 12;
                        end3 = parseInt(end3,10)+1;
                    }
                    if(emonth <= 9) emonth = "0"+emonth;
                    jQuery("#freeze-start-date").val(begin);
                    jQuery("#freeze-end-date").val(end2+"/"+emonth+"/"+end3);
                }
            }
    });

    jQuery('#cancel-date').datepicker({ 

            dateFormat: 'dd/mm/yy',
            minDate: "01/" + month + "/" + year,
            onClose: function(dateText, inst) {
                if(dateText != "") {
                    var end1 = dateText.split('/');
                    var begin = "01/" + end1[1] + "/"+end1[2];
                    if(end1[0] != "01") 
                    {
                        alert("Cancellation is allowed only on the 1st day of the month");
                    }
                    jQuery('#cancel-date').val(begin);
                }
            }           
    });
relu commented 10 years ago

Checkout http://api.jqueryui.com/datepicker/#option-minDate You're not setting the minDate option proerly, you are also reinitializing the datepicker.

You need to do this: jQuery('#freeze-start-date').datepicker('option', 'minDate', new Date(year, month, 1));

Same goes for the onClose handler.

Another thing, I see you are using the dd/mm/yyyy format, that will fail because of the validation. The validation is pretty primitive and just works with strtotime() From php.net:

Note:

Dates in the m/d/y or d-m-y formats are disambiguated by looking at the separator between the various components: if the separator is a slash (/), then the American m/d/y is assumed; whereas if the separator is a dash (-) or a dot (.), then the European d-m-y format is assumed.

That being said, dd/mm/yyyy is an invalid format for strtotime(). You can either use the dd-mm-yyyy format or dd.mm.yyyy or some other variation. Ideally I would need to come up with another solution for date value validation, but I don't have the time right now or the interest to do so unfortunately. I do accept pull requests though, if you think you can find a better solution, do let me know :)

On Wed, Nov 27, 2013 at 3:01 PM, 247creative notifications@github.comwrote:

Hi Relu,

I have been using the Contact Form 7 Datepicker plugin on a WP-based site, but seem to have run into something of an issue with the minDate value!

We've had to use some custom jQuery to modify how the date picker works, but for some reason, it's not working correctly, whereas it does behave itself if we use the native CF7 date function (however, as the dates need to be formatted in dd/mm/yy, the forms can't be submitted using CF7 as they don't pass its inbuilt mm-dd-yyyy requirements) - do you have any idea how we can get the script below to play ball with your date picker plug-in? There are actually two date pickers that need to use the following (each one is on a separate form).

function daysInMonth(iMonth, iYear){ return 32 - new Date(iYear, iMonth, 32).getDate(); }

var currentTime = new Date();
var day = currentTime.getDate();
var t = (day > 1) ? 3 : 2;
var month = currentTime.getMonth() + t;
var year = currentTime.getFullYear();

if(month > 12){
    month = month - 12;
    year = year + 1;
}

jQuery('#freeze-start-date').datepicker({
        dateFormat: 'dd/mm/yy',
        minDate: "01/" + month + "/" + year,
        onClose: function(dateText, inst) {
            if(dateText != "") {
                var how = jQuery("#menu-1451").val();
                how = parseInt(how);
                var end1 = dateText.split('/');

                var begin = "01/" + end1[1] + "/"+end1[2];
                var end3 = end1[2];
                var end2 = end1[0];
                if(end2 != "01") {
                    alert("Freeze can only start from 1st day of the month");
                }
                end2 = daysInMonth(end1[1]-1-1+how,end1[2]);

                emonth = parseInt(end1[1],10) - 1 + how;
                if(emonth > 12) {
                    emonth = emonth - 12;
                    end3 = parseInt(end3,10)+1;
                }
                if(emonth <= 9) emonth = "0"+emonth;
                jQuery("#freeze-start-date").val(begin);
                jQuery("#freeze-end-date").val(end2+"/"+emonth+"/"+end3);
            }
        }
});

jQuery('#cancel-date').datepicker({

        dateFormat: 'dd/mm/yy',
        minDate: "01/" + month + "/" + year,
        onClose: function(dateText, inst) {
            if(dateText != "") {
                var end1 = dateText.split('/');
                var begin = "01/" + end1[1] + "/"+end1[2];
                if(end1[0] != "01")
                {
                    alert("Cancellation is allowed only on the 1st day of the month");
                }
                jQuery('#cancel-date').val(begin);
            }
        }
});

— Reply to this email directly or view it on GitHubhttps://github.com/relu/contact-form-7-datepicker/issues/88 .

Aurel Canciu +40740208777