jQuery如何在不使用日期选择器时将今天的日期从输入拆分为月、日、年答案

【问题标题】：jQuery how to split today's date from input into month, day, year when datepicker NOT usedjQuery如何在不使用日期选择器时将今天的日期从输入拆分为月、日、年
【发布时间】：2011-06-03 05:11:26
【问题描述】：

我有一个日期选择器输入，其中填充了页面加载时的今天日期。使用 datepicker 时，将日期拆分为月、日和年，并放入三个隐藏字段，这些字段与 post 数据一起发送到服务器。当用户决定今天的日期很好并且不使用日期选择器时，问题就出现了；如何将日期片段放入这三个隐藏字段？

我尝试将今天的日期分解为多个片段并将其添加到这些字段中，但我尝试将其添加到 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" />

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

将您的 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); 
});

【讨论】：

完美运行！使用该功能是个好主意！谢谢，DAC
当用户在文本框中手动输入日期时，我们如何运行 populateHidden()？因为它现在不会发生。
@dac: 钩入文本框上的.keyup() 事件。不过，这意味着您在致电 populateHidden() 之前需要进行一些验证。

【解决方案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)
    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);

【讨论】：