Change the datebox date and display the new datebox date in the form containing the data-role datebox

Question

I am trying to make a button change the text or value of my datebox form. The value will change if I call $("element").val("value-date") but the form that contains the datebox will not change its text to the value-date. I have refreshed the datebox and that has not worked. Here is my code

HTML:

<div class='container center' style='margin-top:15%; margin-bottom:15%; width:90%; margin-right:auto; margin-left:auto;'>
        <input placeholder="Enter Date" id='comp_date' type='date' data-role='datebox' name='date' data-options='{"mode": "callbox","useTodayButton":true}'/>
        <a data-role="button" id='pick_today' href="#"  data-theme='e' class="reg_button" style="padding:15px; color:black; margin-bottom:50px;">Now</a>
</div>

Javascript:

     $("#pick_today").live("vclick",function()
     {
          var today = new Date();
          var month = today.getMonth();
          var day = today.getDate();
          var year = today.getFullYear();
          var todayText = year + "-" + month + "-" day;
          $("#comp_date").val(todayText);
          $("#comp_date").datebox("refresh");
     }

Answer 1

After a long time spent on this issue, finally got and fixed your problem.

Your code issues are:

1. Symbol "+" is missing on this line

   var todayText = year + "-" + month + "-" + day;

2. On the input tag, mode is calbox not callbox

   data-options='{"mode": "calbox"

3. Month calculation should be +1. Since January starts with Zero (0)

   var month = today.getMonth()+1;

JQuery:

$("#pick_today").live("click", function() {
    var today = new Date();
    var month = today.getMonth()+1;
    var day = today.getDate();
    var year = today.getFullYear();
    var todayText = year + "-" + month + "-" + day;
    $("#comp_date").val(todayText);
});

HTML:

<div class='container center' style='margin-top:15%; margin-bottom:15%; width:90%; margin-right:auto; margin-left:auto;'>
    <input placeholder="Enter Date" id='comp_date' type='date' data-role='datebox' name='date' data-options='{"mode": "calbox","useTodayButton":true}'/>
    <a data-role="button" id='pick_today' href="#"  data-theme='e' class="reg_button" style="padding:15px; color:black; margin-bottom:50px;">Now</a>
</div>​

USED CSS & JS:

http://jquerymobile.com/demos/1.0rc3/jquery.mobile-1.0rc3.min.css
http://jquerymobile.com/demos/1.0rc3/jquery.mobile-1.0rc3.min.js
http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css
http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js

Refer my LIVE DEMO

Answer 2

You are missing id selector and binding 'vclick' inseatd of 'click' function and the function is not properly closed

DEMO: http://jsfiddle.net/Simplybj/n9HLU/4/

And the correct code is here:

$("#pick_today").live("click", function() {
    var today = new Date();
    var month = today.getMonth();
    var day = today.getDate();
    var year = today.getFullYear();
    var todayText = year + "-" + month + "-" + day;
    $("#comp_date").val(todayText);
});