web-dev-qa-db-fra.com

Comment restreindre la plage de dates d'un sélecteur de date jQuery en donnant deux dates?

J'ai deux dates qui sont stockées dans la base de données et je la sélectionne à l'aide de $ .ajax (). Ce dont j'ai besoin, c'est d'afficher les valeurs datepicker entre les dates que j'ai sélectionnées dans la base de données.

Voici mon code pour it.Mais ça ne fonctionne pas correctement

function setDatePickerSettings(isFisc) {
        var fSDate, fEDate;
        $.ajax({
            type: "POST",
            url: '../Asset/Handlers/AjaxGetData.ashx?fisc=1',
            success: function(data) {
                alert(data);
                var res = data.split("--");//data will be 4/4/2010 12:00:00--5/4/2011 12:00:00 
                var sDate = res[0].split(getSeparator(res[0]));
                alert("Separator " + getSeparator(res[1]) + " Starts " + sDate);
                var eDate = res[1].split(getSeparator(res[1]));
                alert("End " + eDate);
                alert("sub " + sDate[0]);
                fSDate = new Date(sDate[2].substring(0, 4), sDate[0], sDate[1]);
                alert("Starts " + fSDate.substring(0, 4));
                fEDate = new Date(eDate[2].substring(0, 4), eDate[0], eDate[1]);
                alert("eND " + fEDate.toString());

            }

        });
          var dtSettings = {
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
        buttonImage: clientURL + 'images/calendar.png',
        buttonImageOnly: true,
        showStatus: true,
        showOtherMonths: false,
        dateFormat: 'dd/mm/yy',
        minDate:fSDate, //assigning startdate
        maxDate:fEDate //assigning enddate
    };

    return dtSettings;
}

Les pls fournissent une solution. J'ai besoin du sélecteur de date/heure qui requiert des valeurs comprises dans cette plage. Merci d'avance 

jqueryjquery-uijquery-ui-datepicker
14
kbvishnu

Votre syntaxe est incorrecte pour minDate/maxDate. Vous pouvez lire la documentation sur le site Web de jQuery UI où se trouve la démo . Je vous suggère de l'examiner pour l'adapter à votre cas particulier. Cela ressemble à quelque chose comme ça:

$( ".selector" ).datepicker({ minDate: new Date(2007, 1 - 1, 1) });

ou

ce qui suit fera en sorte que vous ne pouvez rien choisir avant aujourd'hui.

$( ".selector" ).datepicker({ minDate: 0 });

et cela fera en sorte que vous ne pouvez rien choisir avant demain

$( ".selector" ).datepicker({ maxDate: 1 });

Edit: Voici comment vous insérez votre propre date, mais j'ai un problème à faire en sorte que le format DateFormat fonctionne correctement, comme vous pouvez le constater, le format DateFormat est spécifié, mais le format que je mets en fait ignore le format de date.

$("#txtDateStart").datepicker({dateFormat:'mm/dd/yy', minDate: new Date(2010,11,12) });
40
The Muffin Man

Cela a fonctionné pour moi.

$('#date-time-picker').datepicker({
    format: 'YYYY-MM-DD',
    useCurrent: false,
    showClose: true,
    minDate: '2018-02-01',
    maxDate: '2018-03-15',
})
1
Parag Tyagi -morpheus-

Je sais que ceci est un article ancien, mais le bogue soulevé par @TheMuffinMan concernant l'impossibilité d'utiliser le format de date avec les options de restriction de date est réel et semble apparaître uniquement lorsque les options sont en ligne, comme dans son exemple.

Si vous devez utiliser ce format, et si quelqu'un est toujours intéressé, vous pouvez utiliser les options de formatage de la date comme dernière option de l'ensemble. Par exemple, le code ci-dessous fonctionne parfaitement pour moi.

var minDate = -20;
var maxDate = "+1M +10D" 

$('body').on('focus',".datepicker", function(){
    $(this).datepicker({ minDate: minDate, maxDate: maxDate },{dateFormat: "dd/mm/yy"});
});

J'espère que ça aide quelqu'un d'autre.

0
Alexander

J'ai utilisé celui-ci et j'ai eu la sortie.Merci à tous

 function setFiscDatePickerSettings() {

        var fSDate, fEDate, sDate, fEDate;
        var dtSettings;
        sDate = document.getElementById("<%=hdfFiscStart.ClientID %>").value.split(getSeparator(document.getElementById("<%=hdfFiscStart.ClientID %>").value));
        eDate = document.getElementById("<%=hdfFiscEnd.ClientID %>").value.split(getSeparator(document.getElementById("<%=hdfFiscEnd.ClientID %>").value));
        fSDate = new Date(sDate[2].substring(0, 4), sDate[0] - 1, sDate[1]);
        fEDate = new Date(eDate[2].substring(0, 4), eDate[0] - 1, eDate[1]);
        dtSettings = {
            changeMonth: true,
            changeYear: true,
            showOn: 'both',
            buttonImage: clientURL + 'images/calendar.png',
            buttonImageOnly: true,
            showStatus: true,
            showOtherMonths: false,
            dateFormat: 'dd/mm/yy',
            minDate: fSDate, maxDate: fEDate
        };

        return dtSettings;
    }


    function bindFiscalDatePicker() {
        var inputDt = $("input.datepicker_fisc");
        inputDt.addClass("numbers_only");
        inputDt.addClass("allow_special");
        inputDt.attr("symbolcodes", "/");
        inputDt.datepicker(setFiscDatePickerSettings());
    }
0
kbvishnu