Estoy usando el selector de fecha para seleccionar las fechas en dos campos de fecha (a partir de la fecha y hasta la fecha).

En los que, el valor predeterminado de relieve la fecha es la fecha de hoy. Necesito cambiar el valor predeterminado de relieve la fecha para otro día en el segundo selector de fecha. (como ejemplo, hoy en día + 8 días).

¿Cómo puedo hacer esto correctamente ?

siguientes son mis datepickers,

$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker("option", "dateFormat", "yy-mm-dd"); //ISO 8601
$( "#datepicker2" ).datepicker();
$( "#datepicker2" ).datepicker("option", "dateFormat", "yy-mm-dd");
});

Gracias.

———————————- Actualización ———————————————–

Tras la captura de pantalla de Michael,

Cómo cambiar predeterminado destacó que

Pongo el siguiente,

$( "#datepicker2" ).datepicker("option", "defaultDate", +2);

Se pueden ver todavía el 21 día (de hoy) es de Destacar y 23 limita con la línea negra. Necesito ver 23 se parece a 21 con una alta iluminación. No hay necesidad de resaltar 21.

6 Comentarios

  1. 5
        $( "#datepicker" ).datepicker("option", "defaultDate", +8);

    Fuente: http://api.jqueryui.com/datepicker/#option-defaultDate

    EDIT: La fecha actual siempre se destacó como parte de la datepicker. No hay ninguna opción para desactivar esta característica. Es para dejar claro al usuario de lo que «hoy» es. Sin embargo, puede anular el aspecto gráfico de este w/un poco de CSS:

        .ui-datepicker-today a.ui-state-highlight {
            border-color: #d3d3d3;
            background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;;
            color: #555555;    
        }
       .ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight {
            border-color: #aaaaaa;
            background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
            color: #212121;
        }

    De trabajo jsfiddle: http://jsfiddle.net/EpWud/

    Esto asume que usted está usando el tema por defecto, pero usted puede hacer esta misma práctica para cualquier tema. Sólo reemplazar los estilos como el código de arriba. Este CSS es incompleta, sin embargo. Usted tendrá que hacer modificaciones para otros casos, como el :hover estado.

    • Esta es la buena. Pero la fecha resaltada es todavía la fecha de hoy. Y la fecha de hoy+8 está bordeado por una línea de color negro. Necesito cambiar el valor predeterminado seleccionado fecha de hoy fecha de hoy+8 fecha.
    • Puedes publicar algunas capturas de pantalla de lo que está haciendo y lo que quiere hacer con él. Creo que hay una confusión en lo que en realidad estamos pidiendo.
    • Sí Se Entiende. Pongo la captura de pantalla y actualizar el post.
    • Traté de hacerlo en jQuery y terminó con css como el tuyo.
  2. 1

    Una pequeña modificación a la respuesta seleccionada en jQuery UI DatePicker de cambio que se destacó «hoy» de la fecha

    //Get users 'today' date
    var localToday = new Date();
    localToday.setDate(tomorrow.getDate()+1); //tomorrow
    
    //Pass the today date to datepicker
    $( "#datepicker" ).datepicker({
        showButtonPanel: true,
        localToday: localToday    //This option determines the highlighted today date
    });

    He anulado 2 datepicker métodos para condicionalmente utilizar un valor nuevo para el «hoy» de la fecha en lugar de un new Date(). La nueva configuración se denomina localToday.

    Reemplazar $.datepicker._gotoToday y $.datepicker._generateHTML como este:

    $.datepicker._gotoToday = function(id) {
        /* ... */
        var date = inst.settings.localToday || new Date()
        /* ... */
    }
    
    $.datepicker._generateHTML = function(inst) {
        /* ... */
        tempDate = inst.settings.localToday || new Date()
        /* ... */
    }

    Aquí un demo que muestra el código completo y uso: http://jsfiddle.net/NAzz7/5/

    • Esta respuesta implica un análisis profundo!
  3. 0

    Yo no estaba contento con la forma en la interfaz de usuario del Núcleo muestra el defaultDate con la endeble frontera y todo. Después de mucho ensayo y error, he añadido un método de enfoque para el segundo selector de fecha y utiliza el setDate método.

    $('#datepicker2').datepicker().focus(function(){
       $(this).datepicker('setDate',+2);
    });

    Esto le dará la fecha seleccionada con un color de fondo basada en el tema y hoy en día se conservan, también, es de fondo cuando se abre el selector de fecha. El único inconveniente aquí es que si usted no acabar seleccionando una fecha en el selector de fecha, tienes que volver y borrar el campo de entrada.

    Parece un poco de un hash como generalmente no me gusta usar el método de enfoque, pero me quedo con ella.

  4. 0

    Esto es posible mediante el cambio de la variable bajo _generateHTML en jquery-ui.js

    today = this._daylightSavingAdjust(
                    new Date("Your Date Here") ), //clear time
  5. 0

    Uso onSelect opción. Debe se parece a esto:

    JS:

    $('#datepickerID').datepicker({
                        onSelect: function(dateText, inst) {
                            $('#ui-datepicker-div').addClass("calendar-piced");
                        },
                        showButtonPanel: true,
                        gotoCurrent: true
                    });

    CSS:

    #datepickerID{
        &.calendar-piced{
            .ui-datepicker-today{
                a{
                    background: #f6f6f6;
                    border: 1px solid #c5c5c5;
                    color: #454545;
                }
            }
        }
    }

    • En «onSelect’ se define la función que será llamada cuando una fecha seleccionada. Después de seleccionar una fecha, puedo agregar la clase de contenedor de datepicer. Luego con css/sass cambio de estilo para el vínculo en <td class=»ui datepicker-hoy»>
  6. 0

    Otra solución para resaltar la defaultDate es reemplazar una clase CSS que corresponde a la elegida defaultDate:

    .ui-datepicker td.ui-datepicker-days-cell-over a {
        background: #7ca600;
    }

    Demo jsfiddle: http://jsfiddle.net/0vjadze4/ (resalte tanto today y defaultDate)

    Por supuesto, usted puede combinar eso con la respuesta proporcionada por Mickael, para resaltar sólo defaultDate:`

    .ui-datepicker td.ui-datepicker-days-cell-over a {
        background: #7ca600;
    }
    .ui-datepicker-today a.ui-state-highlight {
        border-color: #d3d3d3;
        background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;;
        color: #555555;    
    }
    .ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight {
        border-color: #aaaaaa;
        background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
        color: #212121;
    }

    Demo jsfiddle: http://jsfiddle.net/43svpe80/1/ (resaltar sólo defaultDate)

Dejar respuesta

Please enter your comment!
Please enter your name here