How to Custom Date Format in TSWA

As we know, once you set the Format and CustomFormat of DateTimeControla in WorkItemType like

<Control FieldName="FinishedDate" Type="DateTimeControl" Label="Finished Date:" LabelPosition="Left" Format="Custom" CustomFormat="yyyy-MM-dd" />

The value of Format could be

{
    Custom = 8,
    Long = 1,
    Short = 2,
    Time = 4
} When you choose Custom, the control will use the CustomFormat.

 

Team Explorer will display the date in correct format, but TSWA will not.The reason why TSWA still show as a long time is that it does not format the value of the textbox when page loaded, so we need to format it manually.

Furthermore, when you save the workitem, the page will perform a asynchronous postback. This cause the textbox display the date in long time format again. The best way is to subscribe the onSuccess event and format the value. But I did not find such an event to subscribe, so I format the value occasionally. The workaround is as below.

Add following code to the end of  C:\Program Files\Microsoft Visual Studio 2008 Team System Web Access\Web\UI\Controls\WorkItems\EditWorkItem.ascx

 

<script type="text/javascript">


    window.onload = init;

    function init() {
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            if (input.className == "DTPInput") {
                var d = eval("_" + input.id.replace("_txt", ""));
                d.init();

                var date = new Date(d.m_input.value);
                if (date > 0) {
                    d.m_input.value = DateUtility.format(new Date(d.m_input.value), d.m_config, d.m_config.Format);
                }

                setInterval("FormatDate('" + "_" + input.id.replace("_txt", "") + "')", 1000);
                
            }
        }
    }


    function FormatDate(id) {


        var d = eval(id);
        
        var date=new Date(d.m_input.value);
        if (date >0) {
            d.m_input.value = DateUtility.format(new Date(d.m_input.value), d.m_config, d.m_config.Format);
        }
    }

</script>