jQuery如何将今天的日期从输入分为未使用datepicker的月,日,年

时间:2011-06-03 05:11:27

标签: jquery datepicker

我有一个datepicker输入,在页面加载时填充今天的日期。使用datepicker时,日期将分为月,日和年,并放入三个隐藏字段,这些字段将使用发布数据发送到服务器。当用户决定今天的日期没有问题并且不使用日期选择器时,就会出现问题。如何将日期片段分成这三个隐藏的字段?

我尝试将今天的日期分成几部分并将其添加到这些字段中,但我尝试将其添加到jQuery或使用普通JavaScript的每一种方式都打破了整个过程。以下是我想要构建的工作代码:

的jQuery

$(function() {
    //set your date picker
        $("#CI").datepicker({
        dateFormat: 'mm/dd/yy',
        changeMonth: true,
        changeYear: true,
        showOn: "both",
        buttonImage: "css/images/calendar-green.gif",
        buttonImageOnly: true,
        buttonImageText: "Calendar",
        beforeShow: function(dateText, instance) { 
            $("#CI").datepicker('setDate', new Date());
        },
        onSelect: function(dateText, instance) {
            var pieces = dateText.split("/");
             $("#CID").val(pieces[0]);
             $("#CIM").val(pieces[1]);
             $("#CIY").val(pieces[2]);
         }                
    })

    //get the current date
    var todaysDate = new Date();
    //format the date in the right format (add 1 to month because JavaScript counts from 0)
    formatDate = (todaysDate.getMonth() + 1) + '/' + 
                         todaysDate.getDate() + '/' + 
                         todaysDate.getFullYear();
    //set the input value
    $('#CI').val(formatDate);       
});

HTML

<input type='text' id='CI' name="CI">
<input type="text" name="CID" id="CID" />
<input type="text" name="CIM" id="CIM" />
<input type="text" name="CIY" id="CIY" />

2 个答案:

答案 0 :(得分:2)

将您的onSelect()功能拆分为一个单独的功能,可以将它们调用两次。

执行这两项任务具有相同的功能,可以处理对功能或HTML结构的任何更改。

所以...

$(function() {
    function populateHidden(dateText){
        var pieces = dateText.split("/");
        $("#CID").val(pieces[0]);
        $("#CIM").val(pieces[1]);
        $("#CIY").val(pieces[2]);
    }
    //set your date picker
    $("#CI").datepicker({
        dateFormat: 'mm/dd/yy',
        changeMonth: true,
        changeYear: true,
        showOn: "both",
        buttonImage: "css/images/calendar-green.gif",
        buttonImageOnly: true,
        buttonImageText: "Calendar",
        beforeShow: function(dateText, instance) { 
            $("#CI").datepicker('setDate', new Date());
        },
        onSelect: populateHidden
    })

    //get the current date
    var todaysDate = new Date();
    //format the date in the right format (add 1 to month because JavaScript counts from 0)
    formatDate = (todaysDate.getMonth() + 1) + '/' + 
                         todaysDate.getDate() + '/' + 
                         todaysDate.getFullYear();
    //set the input value
    $('#CI').val(formatDate); 
    populateHidden(formatDate); 
});

答案 1 :(得分:0)

使用以下代码:

   //get the current date
    var todaysDate = new Date();
    //format the date in the right format (add 1 to month because JavaScript counts from 0)
    var month = todaysDate.getMonth() + 1 ;
    var date = todaysDate.getDate();
    var year =todaysDate.getFullYear() ;

    formatDate = month + '/' +
                   date+ '/' +
                   year;
    //set the input value
    $('#CI').val(formatDate);       

    $("#CID").val(date);
    $("#CIM").val(month);
    $("#CIY").val(year);