Getting different date pattern when using dojo.for

问题:

I have changed the datePattern of dijit/form/DateTextBox by providing an attribute

<form dojoType="dijit.form.Form" data-dojo-id="calc_form" id="calc_form">

    <input type="text" data-dojo-type="dijit/form/DateTextBox" data-dojo-id="CONTRACT_DATE"
           id="CONTRACT_DATE" name="CONTRACT_DATE" 
           constraints="{datePattern:'MM-dd-yyyy', strict:true}" />
</form>

i.e the attribute is constraints="{datePattern:'MM-dd-yyyy', strict:true}" and I got the date pattern shown correctly in the page as '01-28-2016'.

But when I tried to get the JSON of the form containing the dijit/form/DateTextBox using dojo.formToJson("formID"), I am getting a different value then the assigned pattern: '2016-01-28'

Why? Is there any solution for that?

回答1:

The sole purpose of datePattern is to format the way the user types the date into the DateTextBox.

No matter what format the user types the date in, internally Dojo works in the ISO date format by design. This also makes it easier on you, the programmer.

If you're looking into converting ISO into another proprietary format, there's a module for that.

require(['dojo/date/locale'], function(locale) {
    var date = locale.parse('2016-01-28', {
        datePattern: 'yyyy-MM-dd',
        selector: 'date'
    });
    var formattedDate = locale.format(date, {
        datePattern: 'MM-dd-yyyy',
        selector: 'date'
    });
    console.log(formattedDate);
});

回答2:

The probleme is in the dojo.formToJson it return the default date format whatever you specify the format in the dijit/form/DateTextBox input.

So , I suggest to format the date inside the generated jsonForm ,

here is a solution :

First import the required js ,

//AMD loading
require(["dojo/date/locale","dojo/json"],
function(locale,JSON){
    ......
})

"dojo/date/locale" used here to change date pattern

"dojo/json" used to Parse o json Object or reverse (Object to String)

then declare the formatJsonFormDates function ( params are explained in the code it return a new jsonForm with formatted date)

helps you to convert all date at ones if there is many dates in the Form, by passing the name attribute of the input date in an Array parameter

//helper function
/**
 * The function get  generated 'form' from dojo.formToJson(HTML from),
 * and replaces all string Date to the desired format 
 * ("YYYY-MM-dd" to "MM-dd-YYYY" by exemple)
 *
 * @param string jsonForm Value of generated jsonForm(HTML from)
 * @param Object form Value of the Dijit.form.Form
 * @param Array dateFieldsNames string array Values of date form fields to be formatted
 * @param string datepattern Values of the wanted Dateformat // "mm-dd-YYYY"
 *
 * @return string jsonFormObject Value of new Returned jsonForm with desired date format
 */

var formatJsonFormDates  = function(jsonForm,form,dateFieldsNames,datepattern){
    //if no field passed to the function return default
    if(!fieldsNames.length && fieldsNames.length < 1 ) return jsonForm;

    jsonFormObject = JSON.parse(jsonForm);
    for(var i = 0; i<fieldsNames.length ;i++){
        //check if field is an instance of Date
        if(form.getValues()[fieldsNames[i]] instanceof Date) {
            newDate = locale.format(form.getValues()[fieldsNames[i]],{datePattern: datepattern, selector: "date"});
            jsonFormObject[fieldsNames[i]] = newDate;
        }
    }
    return JSON.stringify(jsonFormObject);
}

finnaly , after getting your jsonForm apply the function on it :

var formData = dojo.formToJson("yourFormID");
//I recomoand  to use dijit/registry  instead of dijit 

formData = formatJsonFormDates(formData,dijit.byId("yourFormID"),["CONTRACT_DATE"],"MM-dd-yyyy");

.