Skip to main content
Commonmark migration
Origen Enlace

Por lo general el datePicker es un elemento para seleccionar fechas. Otra cosa es que quieras actualizarlo desde otro input (lo cual sería algo extraño pero bueno, todo es posible).

Si quieres recuperar la fecha seleccionada, tienes que crear en el datepicker una función onSelect, la cual recibirá del mismo elemento la fecha en parámetro.

Por ejemplo:

$("#myDatePicker").datepicker({
    /*Formato deseado en la salida*/
    dateFormat: "yy-mm-dd",
    onSelect: function (date) {
        console.log(date);
    }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  <p>Fecha: <input type="text" id="myDatePicker" readonly /></p>


###EDICIÓN

EDICIÓN

Veamos algo parecido a lo que dices que tienes: una tabla donde por cada celda hay una fecha concreta.

Si la información se encuentra en el id de cada celda (o en otra parte). No tiene ningún sentido abrir un datepicker para seleccionar algo que ya conoces.

Este código te muestra cómo al hacer clic sobre cualquier celda obtienes el valor que hay en su atributo id. Puedes trabajar con ese valor, sin necesidad de obligar al usuario a establecer de nuevo la fecha. En este caso tu propia tabla hace la misma función que haría un datepicker:

document.querySelectorAll(".table td").forEach(function(elem) {
  elem.addEventListener('click', getDate, false);
});

function getDate() {
  var theDate = this.id;
  console.log(theDate);
  alert(theDate);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />
<table class="table is-bordered">
  <tr>
    <td id="20180101">1</td>
    <td id="20180102">2</td>
    <td id="20180103">3</td>
    <td id="20180104">4</td>
    <td id="20180105">5</td>
  </tr>
</table>

Por lo general el datePicker es un elemento para seleccionar fechas. Otra cosa es que quieras actualizarlo desde otro input (lo cual sería algo extraño pero bueno, todo es posible).

Si quieres recuperar la fecha seleccionada, tienes que crear en el datepicker una función onSelect, la cual recibirá del mismo elemento la fecha en parámetro.

Por ejemplo:

$("#myDatePicker").datepicker({
    /*Formato deseado en la salida*/
    dateFormat: "yy-mm-dd",
    onSelect: function (date) {
        console.log(date);
    }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  <p>Fecha: <input type="text" id="myDatePicker" readonly /></p>


###EDICIÓN

Veamos algo parecido a lo que dices que tienes: una tabla donde por cada celda hay una fecha concreta.

Si la información se encuentra en el id de cada celda (o en otra parte). No tiene ningún sentido abrir un datepicker para seleccionar algo que ya conoces.

Este código te muestra cómo al hacer clic sobre cualquier celda obtienes el valor que hay en su atributo id. Puedes trabajar con ese valor, sin necesidad de obligar al usuario a establecer de nuevo la fecha. En este caso tu propia tabla hace la misma función que haría un datepicker:

document.querySelectorAll(".table td").forEach(function(elem) {
  elem.addEventListener('click', getDate, false);
});

function getDate() {
  var theDate = this.id;
  console.log(theDate);
  alert(theDate);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />
<table class="table is-bordered">
  <tr>
    <td id="20180101">1</td>
    <td id="20180102">2</td>
    <td id="20180103">3</td>
    <td id="20180104">4</td>
    <td id="20180105">5</td>
  </tr>
</table>

Por lo general el datePicker es un elemento para seleccionar fechas. Otra cosa es que quieras actualizarlo desde otro input (lo cual sería algo extraño pero bueno, todo es posible).

Si quieres recuperar la fecha seleccionada, tienes que crear en el datepicker una función onSelect, la cual recibirá del mismo elemento la fecha en parámetro.

Por ejemplo:

$("#myDatePicker").datepicker({
    /*Formato deseado en la salida*/
    dateFormat: "yy-mm-dd",
    onSelect: function (date) {
        console.log(date);
    }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  <p>Fecha: <input type="text" id="myDatePicker" readonly /></p>


EDICIÓN

Veamos algo parecido a lo que dices que tienes: una tabla donde por cada celda hay una fecha concreta.

Si la información se encuentra en el id de cada celda (o en otra parte). No tiene ningún sentido abrir un datepicker para seleccionar algo que ya conoces.

Este código te muestra cómo al hacer clic sobre cualquier celda obtienes el valor que hay en su atributo id. Puedes trabajar con ese valor, sin necesidad de obligar al usuario a establecer de nuevo la fecha. En este caso tu propia tabla hace la misma función que haría un datepicker:

document.querySelectorAll(".table td").forEach(function(elem) {
  elem.addEventListener('click', getDate, false);
});

function getDate() {
  var theDate = this.id;
  console.log(theDate);
  alert(theDate);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />
<table class="table is-bordered">
  <tr>
    <td id="20180101">1</td>
    <td id="20180102">2</td>
    <td id="20180103">3</td>
    <td id="20180104">4</td>
    <td id="20180105">5</td>
  </tr>
</table>

se añadieron 1345 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

Por lo general el datePicker es un elemento para seleccionar fechas. Otra cosa es que quieras actualizarlo desde otro input (lo cual sería algo extraño pero bueno, todo es posible).

Si quieres recuperar la fecha seleccionada, tienes que crear en el datepicker una función onSelect, la cual recibirá del mismo elemento la fecha en parámetro.

Por ejemplo:

$("#myDatePicker").datepicker({
    /*Formato deseado en la salida*/
    dateFormat: "yy-mm-dd",
    onSelect: function (date) {
        console.log(date);
    }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  <p>Fecha: <input type="text" id="myDatePicker" readonly /></p>


###EDICIÓN

Veamos algo parecido a lo que dices que tienes: una tabla donde por cada celda hay una fecha concreta.

Si la información se encuentra en el id de cada celda (o en otra parte). No tiene ningún sentido abrir un datepicker para seleccionar algo que ya conoces.

Este código te muestra cómo al hacer clic sobre cualquier celda obtienes el valor que hay en su atributo id. Puedes trabajar con ese valor, sin necesidad de obligar al usuario a establecer de nuevo la fecha. En este caso tu propia tabla hace la misma función que haría un datepicker:

document.querySelectorAll(".table td").forEach(function(elem) {
  elem.addEventListener('click', getDate, false);
});

function getDate() {
  var theDate = this.id;
  console.log(theDate);
  alert(theDate);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />
<table class="table is-bordered">
  <tr>
    <td id="20180101">1</td>
    <td id="20180102">2</td>
    <td id="20180103">3</td>
    <td id="20180104">4</td>
    <td id="20180105">5</td>
  </tr>
</table>

Por lo general el datePicker es un elemento para seleccionar fechas. Otra cosa es que quieras actualizarlo desde otro input (lo cual sería algo extraño pero bueno, todo es posible).

Si quieres recuperar la fecha seleccionada, tienes que crear en el datepicker una función onSelect, la cual recibirá del mismo elemento la fecha en parámetro.

Por ejemplo:

$("#myDatePicker").datepicker({
    /*Formato deseado en la salida*/
    dateFormat: "yy-mm-dd",
    onSelect: function (date) {
        console.log(date);
    }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  <p>Fecha: <input type="text" id="myDatePicker" readonly /></p>

Por lo general el datePicker es un elemento para seleccionar fechas. Otra cosa es que quieras actualizarlo desde otro input (lo cual sería algo extraño pero bueno, todo es posible).

Si quieres recuperar la fecha seleccionada, tienes que crear en el datepicker una función onSelect, la cual recibirá del mismo elemento la fecha en parámetro.

Por ejemplo:

$("#myDatePicker").datepicker({
    /*Formato deseado en la salida*/
    dateFormat: "yy-mm-dd",
    onSelect: function (date) {
        console.log(date);
    }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  <p>Fecha: <input type="text" id="myDatePicker" readonly /></p>


###EDICIÓN

Veamos algo parecido a lo que dices que tienes: una tabla donde por cada celda hay una fecha concreta.

Si la información se encuentra en el id de cada celda (o en otra parte). No tiene ningún sentido abrir un datepicker para seleccionar algo que ya conoces.

Este código te muestra cómo al hacer clic sobre cualquier celda obtienes el valor que hay en su atributo id. Puedes trabajar con ese valor, sin necesidad de obligar al usuario a establecer de nuevo la fecha. En este caso tu propia tabla hace la misma función que haría un datepicker:

document.querySelectorAll(".table td").forEach(function(elem) {
  elem.addEventListener('click', getDate, false);
});

function getDate() {
  var theDate = this.id;
  console.log(theDate);
  alert(theDate);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />
<table class="table is-bordered">
  <tr>
    <td id="20180101">1</td>
    <td id="20180102">2</td>
    <td id="20180103">3</td>
    <td id="20180104">4</td>
    <td id="20180105">5</td>
  </tr>
</table>

Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

Por lo general el datePicker es un elemento para seleccionar fechas. Otra cosa es que quieras actualizarlo desde otro input (lo cual sería algo extraño pero bueno, todo es posible).

Si quieres recuperar la fecha seleccionada, tienes que crear en el datepicker una función onSelect, la cual recibirá del mismo elemento la fecha en parámetro.

Por ejemplo:

$("#myDatePicker").datepicker({
    /*Formato deseado en la salida*/
    dateFormat: "yy-mm-dd",
    onSelect: function (date) {
        console.log(date);
    }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  <p>Fecha: <input type="text" id="myDatePicker" readonly /></p>