sub_startdate adding to a calendar

Hello All,

So we have implemented the sub_frequency code into the form, but is there a way to implement the sub_startdate and tie it to the element so that our uses can select when they want the payments to start.

Thank you
Comments
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Thanks for posting - I believe you're wanting to support a calendar widget as part of the form for the customer to select a start date for their subscription, is that right?

    If so - that's definitely possible to do. You would set up your form with the sub_startdate input, and attach a calendar widget to it. HTML5 has a date/time input type, but cross-browser support isn't great, so using a javascript library is probably still your better approach to ensure a consistent experience for your users.

    I've just created a page on our wiki for showing approaches for that using two different libraries - you can see that here: https://wiki.foxycart.com/v/2.0/snippets/date_picker_for_sub_startdate
  • @fc_adam Thank you. This helped a lot. I appreciate it.
  • @fc_adam Here is a question. so we have the sub_start date implemented with a datepicker but when we are testing and select the date as today, it will display this on the checkout ("20181204 does not represent a date in the future") Is there a way for us to implement a way for the customer to choose today's date if they want the subscription to start today?
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Good question. It should be ok to select todays date - but as you're seeing, the cart is complaining that it's not todays date. Our validations currently require the start date be in the future - but I can definitely see how allowing it to be today makes sense too. We'll ticket that on our side to look into for a future enhancement.

    For now - you could set up your add to cart form to initially hide the "sub_startdate" datepicker option, and instead show a checkbox for the customer to designate that they want the subscription to start at a future date. If they don't check that, then you wouldn't pass any "sub_startdate" parameter with the form, allowing the sub to start immediately. If they did check it though, then you'd show the datepicker, and restrict it to only allow them to select a date starting with tomorrows date.

    Could that work with your set up?
  • @fc_adam I was able to figure this out by writing some javascript to fix this.
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981, awesome, thanks for the update!
  • @fc_adam So I think that I ran into a snag when I created the calendar for support in Safari. So when I do select a date from the calendar, I get this error in Safari now and I'm not sure what I did or need to do to fix this. Here is the error: 12/14/2018 must be a valid date in the yyyymmdd format, a valid day of the month in the dd or d format, or the subscription frequency format such as 1m or 30d (one month or thirty days in the future). Here is the code I have for the datepicker to work in safari:
    <script type="text/javascript">
    var datefield=document.createElement("input")
    datefield.setAttribute("type", "date")
    if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
    document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
    }
    </script>

    <script>
    if (datefield.type!="date"){ //if browser doesn't support input type="date", initialize date picker widget:
    jQuery(function($){ //on document.ready
    $('#date').datepicker();
    altFormat: "yyyy-mm-dd"

    });
    }
    </script>
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Thanks for including your code there. The error you're seeing is coming from the cart, and is saying that the subscription start date is being submitted as a format "mm/dd/yyyy", where as the cart requires "yyyy-mm-dd".

    As Safari doesn't currently include a date picker UI, it'll fall back to the jQuery datepicker you're initializing. For that initialization code - you're currently just loading it using the default configuration. I see you've added an "altFormat" configuration option - but with where it's included, it's not actually included inside the datepicker configuration.

    For your code - you could try doing this:
    jQuery(function($){ //on document.ready
    $('#date').datepicker({
    dateFormat: "yyyy-mm-dd"
    });
    });
    That should hopefully get it working correctly for you. The "altFormat" configuration option you were trying to use can work too - but relies on an alternate field to populate the value, rather than the displayed text input the customer sees - so requires some additional set up to work with the hidden input.

    I hope that helps!
  • @fc_adam Thank you for the help on the datepicker. One other question, so we have an option on our form for a customer to do a one time payment, but we want the customer to have the ability to choose the date they want to have the one time payment taken out. Whenever we set the date for the one time payment we get an error: does not appear to be a valid subscription frequency. Please use this format: Xd, Xw, Xm, Xy where X is a number. Here is the code for what we have for the sub_frequency: <select name="sub_frequency" id="subFreq" class="form-control">
    <option value="1m">Monthly (Preferred)</option>
    <option value="3m">Quarterly</option>
    <option value="6m">2X Annually</option>
    <option value="1y">Annually</option>
    <option value="">One-time</option>
    </select>

    Is there a way to do this for the one time payment for a future payment?

    Thank you
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Good question. We don't currently support a future dated one-off payment, but you can achieve a similar set up still using subscriptions. What you would do is set up the subscription with any frequency, let the customer select the start date, and then set the end date dynamically to one day after the start date. That would ensure that the customers subscriptions will start on that day, but then be ended the following day, ensuring that only one payment is taken.

    If a product isn't a subscription, but a normal one-off product, then the payment will always be taken immediately on checkout.

    I hope that helps!
  • @fc_adam How would you set the end date dynamically?
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Good question - sorry for not being more specific there. You would utilise the onSelect event from the datepicker to update a hidden end date input. You'd also need to change that field on change of the frequency select too - so a customer doesn't end up with an end date for a normal subscription if they change from a one-off payment to a normal sub.

    That could look like this, merging in with your existing datepicker code:
    $('#date').datepicker({
    dateFormat: "yyyy-mm-dd",
    onSelect: function(selectedDate, dateField) {
    var selected = new Date(selectedDate);
    selected.setDate(selected.getDate() + 1);
    var endDate = selected.getFullYear()+ "-" + ("0"+(selected.getMonth()+1)).slice(-2) + "-" + ("0" + selected.getDate()).slice(-2);
    $("input[name='sub_enddate']").val(endDate);
    }
    });
    Then you'd also need this additional jQuery event hook to clear out the end date field as required:
    jQuery("#subFreq").on("change", function() {
    if (jQuery("#subFreq").val() != "1d") {
    $("input[name='sub_enddate']").val("");
    }
    });
    Both of those code blocks assume that you've updated your sub_frequency dropdown like this, making the one off subscription have a 1d frequency, and have included a hidden sub_enddate field:
    <select name="sub_frequency" id="subFreq" class="form-control">
    <option value="1m">Monthly (Preferred)</option>
    <option value="3m">Quarterly</option>
    <option value="6m">2X Annually</option>
    <option value="1y">Annually</option>
    <option value="1d">One-time</option>
    </select>
    <input type="hidden" name="sub_enddate" value="">

    Ah actually - I just realised this approach relies on the customer always selecting a date that the charge occurs. Is that going to be always the case? Or do you need to allow the customer to not select a future date, and so just leave it as a charge for today?
  • @fc_adam we have it setup so that if the customer wants the charge to happen at that point then they know that they need to leave it blank. I’m going to try your suggestion to see if that is going to work for us in the morning. I will let you know first thing in the morning. Thank you
  • kdawg1981kdawg1981 Member
    edited December 2018
    @fc_adam Good Morning Adam,
    I entered the above blocks of code and ran a test to see what it would look like in the cart. I was able to set the future date for the one time payment, but under the details in the card it shows the following:
    Subscription Details
    Frequency: Every Day
    Start Date: 2018-12-21
    Next Date: 2018-12-22 image

    I think the scripts that you included are working correctly, but not inserting it into the end date value for the hidden field.
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Hmm, that doesn't look like it's working quite right, does it. Is your page online somewhere that we could take a look at it? If it is, and you'd prefer to keep it private, you can whisper it to me by checking the "Whisper" box when replying and entering my forum username in the input that appears.
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Thanks for whispering those details - we'll look into this and follow-up as soon as we're able.
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    We've just whispered you some details with a slightly new approach that should hopefully correct the issues you were seeing. Let us know if you have any further questions!
  • @fc_adam thank you so much for your help. It works like a charm. I really appreciate it
  • @fc_adam one question where in the code would I be able to add a day for the end date
  • @fc_adam When running the new code, it's no longer adding the day but keeping the same day as we set in the calendar field. Shouldn't it be moving it forward one day for the end date?
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Sorry for the delay - to confirm - you're saying that the end date that is dynamically being added is being set to the same day as the start date, rather than one day in the future?

    In testing on my side, it is adding a day there, at least for me. Could I confirm what browser you're using when it's not adding it? Could you update the link you sent earlier in a whisper with the new code you're using so we can confirm there too?
  • kdawg1981kdawg1981 Member
    edited December 2018
    Here is another link if the above doesn’t work.
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Thanks for the video and confirming your browser in a whisper. Could you update the public page you sent over previously with the updated code? I'd like to see if I can replicate what you're seeing on our side. When testing with the code we provided earlier, it's adding a day there as expected.
  • @fc_adam We can't update the current link until this is fixed. I have tested this in Chrome, Opera, and in Safari. The End date is still showing the same as the start date. Here is a screenshot from Safari I took.
    image

    Can you send me screenshot of what you are seeing along with the code you are using? I don't get why it's working for you but not for me or the other guy I work with. There has to be something that was not put in to the script that you have that I don't.
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    The code I'm testing with is the code I linked to on pastebin in the whisper from the 20th of December. In terms of what I'm seeing - it's basically the same as you, except the end date is on the day after the start date.

    If you're unable to update the existing "cyas_support.html" page, is it possible for you to send us a copy of the full HTML code for the page as it is currently for you while testing? We can try to replicate from that.
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Thanks for sharing your code with me via whisper. Trying out that same code on my side locally (on a mac), in Chrome, Safari and Firefox it's always adding a day to the end date for me.

    I'm going to check in with some other teammates to see if they can replicate it happening. We'll follow up as we have more information for you.
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Ah, we've got it! It turns out it was an issue related to timezones when javascript was creating the date from just the date string. It factored in the timezone and was resulting in US based timezones being set to a day earlier than it should.

    If you look for this line:
    var selected = (selectedDate == "") ? new Date() : new Date(selectedDate);
    You can update it to be the following and that should get it working for you:
    var selected = new Date(selectedDate + " 00:00:00");
    Thanks for your patience while we worked through that one!
  • @fc_adam

    Hi Adam, Thank you for getting back to me. I would have never factored in the timezone into the issue. In all the troubleshooting I did, I always kept going back to that line in the script and thinking that it had to do something with that line. I tested it out with the new line of code and it is working like it should be. Thank you for all the help on this. I really appreciate it.
Sign In or Register to comment.