Using the value of one datapicker in another

Asked

Viewed 774 times

2

I’m trying to use this DataPicker to catch the day he selects, add 7 more days and from these days, return only Saturdays. Follow the code. Code updated, now only remaining to add the 7 days.

$("#data-inicio").datepicker({
    beforeShowDay: function(date){ return [date.getDay() == 1, ""] },
    minDate: current,
    onSelect: function (selectedDate) {
        $("#data-retorno").datepicker("option", "minDate", selectedDate);
        $("#data-retorno").datepicker("refresh");
    }
});
   $("#data-retorno").datepicker({
    onClose: function (selectedDate) {
        $("#data-inicio").datepicker("option", "maxDate", selectedDate);
    },
    beforeShowDay: function(date){ return [date.getDay() == 5, ""] },    
    });

});

  • You want this feature when the user changes the date or when the page loads?

  • the variable dateObjetc is with the value of a date selected from another datepicker, but also, when I try to do another datepicker based on the date of that variable, nothing happens.

  • Is it anything like that? https://jsfiddle.net/ddw8ya41/ OBS: Not implemented the sum of 7 days yet. I just wonder if the idea is on track...

  • Example, the guy selects the day 01/05, on my second datepicker, it will only return, FRIDAYS from the day 01/05, ie the minDate of the second datepicker, has to be the date selected from the first datepicker.

  • I’ve already done it here: $("#data-inicio").datepicker({
 beforeShowDay: function(date){ return [date.getDay() == 1, ""] },
 minDate: current,
 onClose: function(dateText, inst) {
 $("#data-retorno").val(dateText);
 }
 });
 $("#data-retorno").datepicker({
 beforeShowDay: function(date){ return [date.getDay() == 5, ""] }, 
 });
}); But in this script, it plays right in 2 datepicker the value selected in the first, but in my case, I wanted it to set the second’s minDate with the date selected from the first.

  • Have you looked at the example I provided in jsfiddle? I just updated: https://jsfiddle.net/ddw8ya41/2/

  • I tidied up your code, now it’s returning from that selected day, and how do I now add up to 7 more days? I edited my question, the current code is updated.

  • Add to minDate, inside onSelect function, selectedDate + 7: $("#data-retorno").datepicker("option", "minDate", selectedDate + 7); apparently it worked right here.

  • returned to me July 2070.

  • KKKK, it’s true, I saw it now. I’ll check

  • @Michelhenriq believes that now it is right, only you modify the rest as you need: https://jsfiddle.net/ddw8ya41/3/

  • There is only one however, in my code, the getDate of the first datapicker is set for next month, and in this case, you are giving this current getDate, IE, when I open the calendar, is appearing to me the month of May, but when I click, it stores the month of April. You could use the same month you’re selected?

Show 8 more comments

1 answer

2


With some information passed by the author through the chat, we arrive at a code with the expected result by the same:

Javascript:

$(document).ready(function () {
    //Data atual
    var current = new Date();
    //Somará 30 dias
    var aux = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 30);
    if (aux.getDay() != 1) {
        var nextMonth = new Date(aux.getFullYear(), aux.getMonth() + 1, 1);
        var days = Math.floor((nextMonth - aux) / (1000 * 60 * 60 * 24))

        if (days < 7) current = new Date(aux.getFullYear(), aux.getMonth(), aux.getDate() + days);
        else current = aux;
    } else {
        current = aux;
    }

    $("#data-inicio").datepicker({
        minDate: current,
        dateFormat: 'dd/mm/yy', //Formato da data
        beforeShowDay: function (date) {
            return [date.getDay() == 1, ""]
        },
        onSelect: function (selectedDate) {
            //Limpamos a segunda data, para evitar problemas do usuário ficar trocando a data do primeiro datepicker e acabar burlando as regras definidas.
            $.datepicker._clearDate($("#data-retorno"));
            //Aqui está a "jogada" para somar os 7 dias para o próximo datepicker.
            var data = $.datepicker.parseDate('dd/mm/yy', selectedDate);
            data.setDate(data.getDate('dd/mm/yy') + 7); //Soma 7 dias a data atual
            $("#data-retorno").datepicker("option", "minDate", data); //Aplica a data
        }
    });
    //Segundo datepicker
    $("#data-retorno").datepicker({
        dateFormat: 'dd/mm/yy', //Formatação
        onClose: function (selectedDate) {
            $("#data-inicio").datepicker("option", "maxDate", selectedDate);
        },
        beforeShowDay: function (date) {
            return [date.getDay() == 5, ""]
        }
    });

});

HTML for example:

<input type="text" id="data-inicio" name="data-inicio" />
<input type="text" id="data-retorno" name="data-retorno" />

In operation: https://jsfiddle.net/ddw8ya41/6/

  • Booked show man, thank you very much !

  • @Michelhenriq for nothing, any doubt we are here for that.

  • @Michelhenriq, you need to start marking the answers to your questions as you accept. This helps others in the future and the community :)

  • Just one thing, for example, if I select a date we go there: 01/06 start and 12/06 return, when I click on start, only have as an option to select the day 01 and the day 08, it is possible to give a clear for the user to select any second, in case he wanted to change?

  • @Paulorodrigues, I already voted.

  • @Michelhenriq is not just a vote I’m talking about accept. About your doubt, I believe it is only to remove the onClose of the second datepicker, has no need to maxDate from what I understand.

  • Answer accepted and file changed, working properly.

  • I think I have to make a check, if I select the day 22/06, he does not throw me for July, and I stay in June yet.. https://jsfiddle.net/ddw8ya41/6/

  • What happens is that the minDate for the other calendar is on the 29th. What you can do is, change the number of months displayed by adding this parameter: numberOfMonths: 2,, I believe it is the easiest and practical way not to fill in checks. Example: https://jsfiddle.net/ddw8ya41/8/

  • 1

    @Michelhenriq, look at it here if that’s it.

  • that’s right, thanks !

Show 6 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.