如何使用特定格式格式化字符串变量

Question

我的案子需要帮助。我是JS的新手。我从当前页面获得值(10/19/2016)，并尝试创建Date对象。但如果日期是(19/10/2016)，它会给我一个NaN页面。我需要这样的格式(MyVar，"dd/mm/yy")在任何时候的变量。怎么可能呢，我被这件事难住了。

<link href="{!$Resource.fullCalendarCSS}" rel="stylesheet" />
<link href="{!$Resource.fullCalendarPrintCSS}" rel="stylesheet" media="print" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//code.jquery.com/jquery-1.8.3.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="{!$Resource.JqueryDateFormatJS}"></script>
<script src="{!$Resource.JqueryDateFormatMinJS}"></script>
<script src="{!$Resource.DateFormatJS}"></script>
<script src="{!$Resource.DateFormatMinJS}"></script>
<script src="{!$Resource.fullCalendarMinJS}"></script>
<script type='text/javascript'>
     $.noConflict();
     jQuery(document).ready(function() {
        tempValue = '{!$CurrentPage.parameters.startDate}';

        newDate1 = $.datepicker.formatDate("mm/dd/yy", new Date(tempValue));
        console.log(newDate1);
        newDate = new Date(newDate1);
        console.log(newDate);

        d = newDate.getDate();
        m = newDate.getMonth();
        y = newDate.getFullYear();           
    //We need to wrap everything in a doc.ready function so that the code fires after the DOM is loaded 
    //Call the fullCallendar method. You can replace the '#calendar' with the ID of the dom element where you want the calendar to go. 
        jQuery('#calendar').fullCalendar({
            year: y,
            month: m,
            date: d,                                                   
            defaultView: 'agendaDay',
            slotMinutes: 15,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: false,
            events:
            [
                //At run time, this APEX Repeat will reneder the array elements for the events array
                <apex:repeat value="{!events}" var="e">
                    {
                        title: "{!e.title}",
                        start: '{!e.startString}',
                        end: '{!e.endString}',
                        url: '{!e.url}',
                        allDay: {!e.allDay},
                        className: '{!e.className}',
                    },
                </apex:repeat>
            ]
        });           
    });    
</script>

我使用fullCalendar和DateFormat插件。

如果我的变量tempValue的格式为"mm/dd/yy"，我可以这样定义日期对象:

date = new Date(tempVal) ----> Thu Oct 20 2016 00:00:00 GMT+0300 (Russia TZ 2 Standard Time)

，如果vy变量的格式是"dd/mm/yy"，它会给我错误的"Invalid date"。

我需要得到tempValue只在格式"mm/dd/yy"，即使它的格式"dd/mm/yy"。

Answer 1

Javascript Date()期望一些日期字符串格式…
但不是dd/mm/yyyy。

你注意到了。

那么，既然已经有了正确的日期选择器，为什么不简单地用.split来检索部件呢?

如果你想对日期进行计算，比如找出两个日期之间的差异，那么使用这些拆分部分将正确的格式传递给Date()。

// Commented out because we don't have this value here in this snippet.
//tempValue = '{!$CurrentPage.parameters.startDate}';
// I used this date value instead...
tempValue = "24/09/2016";
console.log(tempValue);
//newDate1 = $.datepicker.formatDate("mm/dd/yy", new Date(tempValue));
//console.log(newDate1);
//newDate = new Date(newDate1);
// Get the splitted values
var dateTemp = tempValue.split("/");
d = dateTemp[0];
m = dateTemp[1];
y = dateTemp[2];
console.log("d: " + d);
console.log("m: " + m);
console.log("y: " + y);
// To perform calculations, you'll need this.
calcDate1 = new Date(m + "/" + d + "/" + y);
console.log(calcDate1.toString());

Just run the snippet and check the console...<br>
;)

Answer 2

所以最后我找到了解决方案…确切的问题是在User区域设置中，因此区域设置为English (united states)的用户具有'M/d/yyyy'日期格式，因此我们需要编写代码来为每种区域设置日期格式创建date对象。

最后:

<script type='text/javascript'>
     $.noConflict();
     jQuery(document).ready(function() {
        tempValue = '{!$CurrentPage.parameters.startDate}';
        var userLang = UserContext.dateFormat;
        var dateTemp = tempValue.split("/");
        d1 = dateTemp[0];
        m1 = dateTemp[1];
        y1 = dateTemp[2];
        y='';
        d='';
        m='';      
        console.log(userLang);     
        if (userLang === "M/d/yyyy") {                           
            newDate = new Date(d1 + "/" + m1 + "/" + y1);
            d = newDate.getDate();
            m = newDate.getMonth();
            y = newDate.getFullYear();                                                                                               
        };
        if (userLang === "dd/MM/yyyy") {                           
            newDate = new Date(m1 + "/" + d1 + "/" + y1);
            d = newDate.getDate();
            m = newDate.getMonth();
            y = newDate.getFullYear();                                                                                               
        };            

    //We need to wrap everything in a doc.ready function so that the code fires after the DOM is loaded 
    //Call the fullCallendar method. You can replace the '#calendar' with the ID of the dom element where you want the calendar to go. 
        jQuery('#calendar').fullCalendar({
            year: y,
            month: m,
            date: d,                                                   
            defaultView: 'agendaDay',
            slotMinutes: 15,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: false,
            events:
            [
                //At run time, this APEX Repeat will reneder the array elements for the events array
                <apex:repeat value="{!events}" var="e">
                    {
                        title: "{!e.title}",
                        start: '{!e.startString}',
                        end: '{!e.endString}',
                        url: '{!e.url}',
                        allDay: {!e.allDay},
                        className: '{!e.className}',
                    },
                </apex:repeat>
            ]
        });           
    });    
</script>

我认为这不是最好的解决方案，但如果你有什么主意，请告诉我。

谢谢!