jQuery Selector de Fecha de Validación Problemas

Estoy tratando de validar la entrada de dos cuadros donde el usuario selecciona una fecha – me las he arreglado para llegar lejos como la restricción de que el usuario seleccione una fecha anterior y si se selecciona el primer cuadro de texto como el día de la fecha el siguiente cuadro de entrada debe ser un día de anticipación (fecha futura)

Sobre submit estoy tratando de validar así que si usted no seleccione una de las casillas de entrada te da un mensaje de error.

<asp:Label ID="lblPickupDate" runat="server" Text="Pick-up Date" CssClass="lblPickup"></asp:Label>
<input type="text" class="datePicker" id="validBeforeDatepicker" value="Please select a date" name="pickupdate" /> <span class="ui-icon ui-icon-calendar"></span>

<asp:Label ID="lblReturnDate" runat="server" Text="Return Date" CssClass="lblReturnDate"></asp:Label>
<input type="text" class="datePicker" id="validAfterDatepicker" value="Please select a date" name="returdate" /> <span class="ui-icon ui-icon-calendar"></span>

$(function () {
    $("#validBeforeDatepicker").datepicker({
        showOn: "button",
        buttonImage: "/assets/img/calendar.gif",
        buttonImageOnly: true,
        minDate: 0,
        required: true,
        message: "This is a required field",
        dateFormat: 'dd-mm-yy',
        onClose: function() {$(this).valid();}
    });
});

$(function () {
    $("#validAfterDatepicker").datepicker({
        showOn: "button",
        buttonImage: "/assets/img/calendar.gif",
        buttonImageOnly: true,
        minDate: +1,
        required: true,
        message: "This is a required field",
        dateFormat: 'dd-mm-yy',
        onClose: function() {$(this).valid();}
    });
});

He conjunto obligados a true, por lo que no debería tirar un error de validación si te lo pierdes?

El sitio donde la forma es: http://www.rentruck.co.uk

También he echado un vistazo a esto, pero no puedo parecen a replicar http://keith-wood.name/uiDatepickerValidation.html

InformationsquelleAutor MJCoder | 2012-12-11

2 Comentarios

5

Usted podría tratar de estos dos validación de las bibliotecas para la validación de jQuery UI Datepicker.

Ejemplo de trabajo para H5F

CSS:
```
.valid {
  background: green;
  color: #fff;
}
.error {
  background: red;
  color: #fff;
}
```
HTML:
```
<form id="h5ftest">
    <input type="date" required pattern="\d{2}\/\d{2}\/\d{4}">
</form>
```
jQuery:
```
$(function() {
  H5F.setup( $( "#h5ftest" ) );

  $( "[type=date]" ).datepicker({
    onClose: function() {
      $( this ).focus().blur();
    }
  });
});
```
o Ejemplo de Trabajo para plugin jQuery Validar

CSS:
```
.valid {
  background: green;
  color: #fff;
}
.error {
  background: red;
  color: #fff;
}
```
HTML:
```
<form id="jQueryValidateTest">
    <input type="date" required>
</form>
```
jQuery:
```
$(function() {

  $( "#jQueryValidateTest" ).validate();

  $( "[type=date]" ).datepicker({
    onClose: function() {
      $( this ).valid();
    }
  });
});
```
- perfecto! a mi me funciona bien 🙂 yo he utilizado todos ASP.NET los controles en lugar de tener algunos Controles HTML así.
- Interesante! Me alegro de que funcionó para usted.
- Muchas gracias por hacer mi día bien a través de la solución anterior. Aunque la solución es agradable, no soy capaz de hacer funcionar esta en IE. Cómo hacer que esto funcione en IE ? ¿Hay alguna posibilidad ? @chridam
- Podría usted por favor cree una nueva pregunta que ha exacta de tu problema?
- href=»http://stackoverflow.com/questions/30161644/datepicker-validation-is-not-working-on-using-jquery-plugin» title=»selector de fecha de validación no está trabajando en el uso de jquery plugin»>stackoverflow.com/questions/30161644/… Revise este enlace. He publicado mi nueva pregunta por allí. Hacer algo de necesario. Gracias de antemano.
InformationsquelleAutor chridam

Sobre la Datepicker sitio en View source sección se sugieren para comprobar el rango de fecha de forma manual en onClose evento:

$(function() {
    $( "#from" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});

que cambia el aspecto de la forma – la forma en que lo hice fue restringir al usuario de seleccionar una fecha anterior a la que ahora se clasifica – estoy tratando de hacerlo cuando el usuario hace clic en el botón de enviar se necesita mostrar un mensaje de error pero no puedo utilizar el runat=»server» en el selector de fecha de entrada de campo, ya que no funciona, a continuación,

InformationsquelleAutor KoViMa

2 Comentarios

Dejar respuesta Cancelar respuesta