输入[type = date]格式值在php中动态生成

时间:2015-08-09 13:50:21

标签: javascript php jquery html5 date-formatting

我有一个动态生成值的输入

<input name="etd" type"date" value="<?php echo $row[0]; ?>">

为了支持html5日期输入,为该值分配了日期格式yyyy-mm-dd,并且正确显示了html5浏览器中的mm/dd/yyyy格式。

问题出现在非html5浏览器上,其中分配的值直接显示为文本(格式yyyy-mm-dd)。我尝试将此值转换为使用 jQuery 格式化mm/dd/yyyy,如下所示:

<script>
    $('input[type="date"]').each({  

        var now = new Date($(this).attr('value'));
        var day = ("0" + now.getDate()).slice(-2);
        var month = ("0" + (now.getMonth() + 1)).slice(-2);     
        var today = now.getFullYear()+"-"+(month)+"-"+(day);        
        $(this).val(today);

    }); 
</script>

但是没有用,我是 jQuery 的新手,所以我想,它就是它的一部分。

更新:

我正在使用此代码在不支持html5的浏览器上放置日期选择器,这不能解决我从数据库中检索到的日期问题,但if子句在某种程度上可以区分html5浏览器。我想也许我可以使用这个条件来过滤jQuery代码(我正在寻找的代码)

<script>
    $(function() {
        if (!Modernizr.inputtypes['date']) {
            $('input[type=date]').datepicker({
                dateFormat: 'mm/dd/yy'
            });
        }
    });
</script>

2 个答案:

答案 0 :(得分:1)

试试吧; 这是Fiddle link

HTML:

<input name="etd" type="date" value="1919-03-12">

JS:

$( document ).ready(function() {

    $('input[type=date]').each(function (this){  

       var datestring = $(this).val(); 
       var dateobj    = new Date(datestring);

       var formattedstring = dateobj.getUTCDate()+"/"+dateobj.getUTCMonth()+"/"+dateobj.getUTCFullYear();

       $(this).val(formattedstring);

    });

});

另请注意,当您设置日期值时,对于单个值,前面应该为零。例如,第7个月应该是07。

顺便说一句,在您的代码中,您错过 = 签到类型“日期”,请更正:)

答案 1 :(得分:0)

在JavaScript中,您实际上可以在字符串上使用split。比通过Date对象传递它容易得多。

$('input[type="date"]').each(function(){  

    var now = $(this).attr('value').split("-");
    var today = now[1]+"/"+now[2]+"/"+now[0]; //mm/dd/yyyy        
    $(this).val(today);

}); 

split会使用分隔符将字符串破解成数组。在这种情况下破折号。创建以下数组:

['yyyy', 'mm', 'dd'];

现在,您可以将这些数组片段重新排列为所需的字符串。

演示:

&#13;
&#13;
$('input[type="date"]').each(function(){  

    var now = $(this).attr('value').split("-");
    var today = now[1]+"/"+now[2]+"/"+now[0]; //mm/dd/yyyy        
    $(this).val(today);

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" value="2015-08-09" />
&#13;
&#13;
&#13;

相关问题