Show active date in a restrict range datepicker of jQuery

Navigation
-2

I have a dynamic calendar in jQuery , in which I disable certain days, depending on the current day. And if it's Friday, Saturday or Sunday, I disable the whole week that comes next.

The issue, is that I need to show the date that remains active to select in textbox .

My code: 

<!-- CSS -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">

<!-- JS --> 
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

<?php

    /*
    dias de la semana en numero
    0-> domingo
    6-> sabado
    */

    $dia = intval(date("w"));

    switch ($dia) {

        case 1:
            $dias = 7;
            $date = "";
        break;

        case 2:
            $dias = 6;
            $date = "";
        break;

        case 3:
            $dias = 5;
            $date = "";
        break;

        case 4:
            $dias = 4;
            $date = "";
        break;

        // viernes
        case 5:
            $dias = 10;
            $date = "";
        break;

        // sabado
        case 6:
            $dias = 10;
            $date = "";
        break;

        // domingo
        case 0:
            $dias = 10;
            $date = "";
        break;

    }
?>

<table border="1" align="center" class="sample">
    <tr style="height:25px">
        <th width="20%"  align="LEFT" >&nbsp;Fecha: &nbsp;&nbsp;</th>
        <td>
            <input type="text" id="txt_fecha" name="txt_fecha" readonly="1" value="">
        </td>
        <input type="hidden" id="nro_dia" name="nro_dia" value="<?php echo $dias; ?>" />
    </tr>
</table>

<script type="text/javascript">

    $(function() {

        //Array para dar formato en español
        $.datepicker.regional["es"] = {
            closeText: "Cerrar", 
            prevText: "Previo", 
            nextText: "Próximo",
            monthNames: ["Enero","Febrero","Marzo","Abril","Mayo","Junio", "Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
            monthNamesShort: ["Ene","Feb","Mar","Abr","May","Jun", "Jul","Ago","Sep","Oct","Nov","Dic"],
            monthStatus: "Ver otro mes",
            yearStatus: "Ver otro año",
            dayNames: ["Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado"],
            dayNamesShort: ["Dom","Lun","Mar","Mie","Jue","Vie","Sáb"],
            dayNamesMin: ["Do","Lu","Ma","Mi","Ju","Vi","Sa"],
            dateFormat: "dd/mm/yy",
            firstDay: 0, 
            initStatus: "Selecciona la fecha",
            isRTL: false
        };

        $.datepicker.setDefaults($.datepicker.regional["es"]);

        //miDate: fecha de comienzo D=días | M=mes | Y=año
        //maxDate: fecha tope D=días | M=mes | Y=año

        $("#txt_fecha").focusin(function () {
            var dias = $("#nro_dia").val();
            var maxDate_d = dias+"D";
            //alert(date);
            $("#txt_fecha" ).datepicker({
                dateFormat: "yy-mm-dd",
                firstDay: 1,
                minDate: maxDate_d
            });
        });

    });
</script>

In the field txt_fecha the active date that remains after disabling the days should be shown, is that understood?

    
asked by x_Mario 08.08.2016 в 22:15
source

2 answers

0

You just have to apply the setDate () method after starting the datePicker, with the same variable you used for the minDate property: 

    $( "#txt_fecha" ).datepicker({
        dateFormat: "yy-mm-dd",
        firstDay: 1,
        minDate: maxDate_d
    });
    $("#txt_fecha").datepicker("setDate", maxDate_d);
    
answered by 09.08.2016 в 00:15
0

Try it in several ways, including as indicated by @Shaz (grateful for your answer ..)

In the PHP section at the beginning, where I have the switch case, leave it like this; 

<?php
/*
dias de la semana en numero
0-> domingo
6-> sabado
*/
$dia=intval(date('w'));
// echo "dia:".$dia."\n";
$today=date('Y-m-d');

switch($dia){
    case 1:
        $dias=7;
    break;

    case 2:
        $dias=6;
    break;

    case 3:
        $dias=5;
    break;

    case 4:
        $dias=4;
    break;
    // viernes
    case 5:
        $dias=10;
    break;
    // sabado
    case 6:
        $dias=10;
    break;
    // domingo
    case 0:
        $dias=10;
    break;
}
$date=date('Y-m-d', strtotime('+'.$dias.' day',strtotime($today)));
?>

... and the HTML stayed that way; 

<table border="1" align="center" class="sample">
<tr style="height:25px">
    <th width="20%"  align="LEFT" >&nbsp;Fecha: &nbsp;&nbsp; </th>
    <td><input type='text' id='txt_fecha' name='txt_fecha' readonly='1' onChange="BuscarActividades(this.value);" value='<?php echo $date; ?>'></td>
    <input type="hidden" id="nro_dia" name="nro_dia" value="<?php echo $dias; ?>" />
</tr>
</table>

In this way, when loading the site in the date field, it shows the active date after the restriction rule that is required.

THANKS !!

    
answered by 09.08.2016 в 15:54
How to generate the .IPA installer for IOS IPhone in an Ionic2 project? SQL Server and SQL Server Express