Jquery ui datepicker - altfield as a div, not an input

Question

I am using the altfield and altformat options on jquery ui datepicker to display a friendly date for the user, having the date formatted for the database in a hidden field. The only thing I do not want the date to show to the user in the input field (visually it assumes that they can enter it), I just want it to be shown as text. I know that I can create an input window so that it does not look as if it is one, but I would prefer to just use the div and update the text. However, it only works with the input field, if you set it to id div, it does nothing.

Can anyone solve this problem?

Answer 1

I got it to display in a div using this in onSelect:

onSelect: function(dateText, inst) {
//formatDate Requires a new date object to work
      var myDate = new Date(dateText);

//Set a new var with different format to use
      var newFormat = $.datepicker.formatDate("DD, d MM, yy", myDate);
//Choose the div you want to replace
      $("#yourselctorhere").html(newFormat);
    }
  });

Answer 2

The answer is to type = hidden, then select a value and assign it to the text of your div

$("myPicker").datepicker({
altField: "#altInput",

.

var hiddenDate = $("[name='altInput']").attr('value');
$("#myDate").text(hiddenDate);}
});

.

<input id = "altInput" type = "hidden"/>
<div id = "myDate"></div>

Answer 3

Using Css: P

.div,.div:focus{
    display:block;
    background:#fff;
    border:0px;
    color:#333
}
<input type="text" class="div" readonly id="altInput" />

Answer 4

the best way to find this is in jquery.ui.datepicker-cc.js file

first find the _updateAlternative function and change this line:

$(altField).each(function() { $(this).val(dateStr); });

For example, I changed this:

$(altField).each(function() { $(this).val(dateStr); $(this).text(dateStr); });

Now you can put alternate text in any element you want. Hope this helps.