使用日期选择器在日期文本框中显示的默认日期

时间:2014-07-24 13:17:49

标签: jquery date jquery-ui-datepicker

我正在使用下面的Jquery datepicker。

<script type="text/javascript" src="Custom/jQueryDatePicker/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Custom/jQueryDatePicker/jquery-ui-1.7.2.custom.min.js"></script>
<link type="text/css" href="Custom/jQueryDatePicker/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

<div class='Form_Header_ExtraSpaceAbove'><p class='Form_Header'>Select Date</p>

<input type="text" id="datepicker" style="width:200px;" readonly="true" title="Select date"><br><br>

<script type="text/javascript">

$(document).ready(function() {


    var varName = "Date";

    var today = new Date();

    $("#datepicker").datepicker({

    showOn: 'button', 
    buttonImageOnly: true, 
    showOn: "both",
        onClose: function(dateText, inst) { FormSetFieldValue(varName, dateText); },
    buttonImage: 'Custom/jQueryDatePicker/cal.jpg',
    dateFormat: "d MM yy",
    buttonText: "Pick a date"
    });

    $(".ui-datepicker-trigger").mouseover(function() {
            $(this).css('cursor','pointer');
    });

    $(".ui-datepicker-trigger").css("margin", "0px 0px -10px 0px");

    $("#datepicker").val(FormGetFieldValue(varName));


});



function FormGetFieldValue (fieldName)
{
    return PFSF_GetFieldValueByName("FIELD_" + FieldIDs[fieldName]);
}

function FormSetFieldValue (fieldName, fieldValue)
{
    PFSF_SetControlValue(PFSF_Find('FIELD_' + FieldIDs[fieldName]), fieldValue);
}


</script>
</div>

但是我无法设置表单加载时在文本框中显示的默认日期。仅当我单击日历图标并选择日期时,日期才会显示在日期文本框中。

因此,请在表单加载时帮助我在日期文本字段中默认显示今天的日期,以便在我选择日期之前日期文本框不为空。

2 个答案:

答案 0 :(得分:1)

替换

$("#datepicker").val(FormGetFieldValue(varName));

通过

$("#datepicker").datepicker('setDate',FormGetFieldValue(varName));

答案 1 :(得分:0)

最后添加.datepicker("setDate", new Date());。直播jsfiddle http://jsfiddle.net/tDLcC/

 $("#datepicker").datepicker({

    showOn: 'button', 
    buttonImageOnly: true, 
    showOn: "both",
        onClose: function(dateText, inst) { FormSetFieldValue(varName, dateText); },
    buttonImage: 'Custom/jQueryDatePicker/cal.jpg',
    dateFormat: "d MM yy",
    buttonText: "Pick a date"
    }).datepicker("setDate", new Date());