更改日期框日期并在包含数据角色日期框的表单中显示新的日期框日期

时间:2012-10-04 16:13:06

标签: jquery html5 jquery-mobile datebox

我正在尝试创建一个按钮来更改我的日期框表单的文本或值。如果我调用$(“element”)。val(“value-date”),则值将更改,但包含日期框的表单不会将其文本更改为value-date。我刷新了日期框,但没有用。 这是我的代码

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");
     }

2 个答案:

答案 0 :(得分:2)

在这个问题上花了很长时间后,终于找到并解决了你的问题。

您的代码问题是:

  1. 此行中缺少符号"+"

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

  2. 在输入标记上,模式为calbox而不是callbox

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

  3. 月份计算应为+1。自1月份以Zero (0)

    开头

    var month = today.getMonth()+1;

  4. 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>​
    

    使用CSS&amp; 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
    

    参考我的 LIVE DEMO

答案 1 :(得分:1)

你缺少id选择器和绑定'vclick'的'click'功能,并且函数没有正确关闭

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

正确的代码在这里:

$("#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);
});