jQuery如何在不使用datepicker的情况下将今天的日期从输入中拆分为月，日，年 [英] jQuery how to split today's date from input into month, day, year when datepicker NOT used

问题描述

我有一个日期选择器输入，当页面加载时，该输入由今天的日期填充.使用datepicker时，日期分为月，日和年，并放入三个隐藏的字段，这些字段与发布数据一起发送到服务器.当用户确定今天的日期合适并且不使用日期选择器时，就会出现问题.如何将日期片段放入这三个隐藏字段中?

I have a datepicker input that is populated with today's date when the page loads. When datepicker is used, the date is split into month, day, and year and put into three hidden fields that are sent to the sever with the post data. The problem comes when the user decides today's date is fine and doesn't use the datepicker; how do I get the date pieces into those three hidden fields?

我试图将今天的日期分成几部分，并将其添加到这些字段中，但是我尝试将其添加到jQuery或使用普通JavaScript的每一种方法都破坏了整个过程.这是我想建立的工作代码:

I tried breaking out today's date into pieces and adding it to those fields but every way I've tried to add it into jQuery or using plain JavaScript breaks the whole thing. Here is the working code that I'd like to build on:

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" />

推荐答案

将onSelect()功能拆分为一个单独的函数，可以将它们调用两次.

Split out your onSelect() functionality into a separate function, which can them be called twice.

具有执行两个任务的相同功能，使您可以处理对功能或HTML结构的任何更改.

Having the same function performing both tasks allows you to deal with any changes to your functionality or HTML structure.

所以...

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

这篇关于jQuery如何在不使用datepicker的情况下将今天的日期从输入中拆分为月，日，年的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！