jqGrid कॉलम दिनांकटाइम स्वरूपण

Question

मेरे पास एक वेब सेवा से जेसन डेटा से जुड़ा एक jqGrid (नवीनतम संस्करण 4.6.0) है। मैं m/d/Y H:i A स्रोत डेटा की दिनांक समय में दिनांक फ़ॉर्मेट करने के लिए कोशिश कर रहा हूँ है

'2012-08-20T18:27:25.05' 

'08/20/2012 06:27 PM' 

को स्वरूपित करना चाहिए जो लेकिन

'08/21/2012 03:25 AM' 

स्वरूपण है मैं देख रहा हूँ क्या है उसमें हो रहा है कि पार्सर 18 को छोड़कर और उन घंटों के लिए सीधे 27 पर जा रहा है जो दिन 20 वें और सेट के बजाय 21 वें स्थान पर आते हैं 03:25 बजे का समय। यह मेरे ग्रिडकोल के लिए मेरे फॉर्मेटर्स स्टेटमेंट्स है।

formatter: "date", 
formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y H:i A" }, 

मैं भी कोशिश की ...

formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y g:i A" }, 

और ...

formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y H:i:s A" }, 

कोई भाग्य के साथ

। कोई विचार?

धन्यवाद

अद्यतन: यहाँ पूर्ण स्तंभ प्रारूप सेटिंग्स मैं प्रश्न में स्तंभ और परिणाम का एक स्क्रीनशॉट के लिए लागू है।

{ name: 'APTDATE', 
    index: 'APTDATE', 
    align: "right", 
    editable: true, 
    editrules: { required: true }, 
    formoptions: { rowpos: 3, colpos: 1 }, 
    formatter: "date", 
    formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i A" }, 
}, 

प्रारूपण

साथ

का प्रारूपण

Answer 1

क्षमा के बिना, लेकिन मैं कोई formatoptions जो आप शामिल द्वारा '2012-08-20T18:27:25.05''08/21/2012 03:25 AM' के रूप में प्रदर्शित पुन: पेश नहीं कर सकते। पहले शून्य घंटे प्रदर्शित करने के लिए आप h:i बजाय H:i साथ formatter: "date" का उपयोग करना चाहिए (देखें here पीएचपी तारीख jqGrid में इस्तेमाल किया प्रारूप)

formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i A" } 

The demo प्रदर्शन को सही स्वरूपित तारीख:

UPDATED : मैंने आपके द्वारा पोस्ट किए गए डेमो को डीबग किया। वर्णित समस्या का कारण गलत है grid.locale-en.min.js जो आपने उपयोग किया था। इसे मूल grid.locale-en.js पर प्रतिस्थापित करने से समस्या ठीक होती है।

jqGrid jqGrid फ़ाइलों के पूर्ण न्यूनतम संस्करण प्रदान नहीं करता है। grid.locale-en.js और ui.jqgrid.css के न्यूनतम संस्करण उत्पन्न करने के लिए मैं व्यक्तिगत रूप से Microsoft Ajax Minifier का उपयोग करता हूं। अक्सर मैं jquery.jqGrid.src.js के संशोधित संस्करण का उपयोग करता हूं जिसमें कुछ बग फिक्स शामिल हैं। इसलिए मैं jquery.jqGrid.src.js के संशोधित संस्करण से भी jquery.jqGrid.min.js उत्पन्न करता हूं।JqGrid के मानक पुनर्वितरण में मुझे याद रखने वाली एक और महत्वपूर्ण विशेषता मैप फाइलें हैं जो कम से कम संस्करण (jquery.jqGrid.min.js) का उपयोग करते समय मूल jquery.jqGrid.src.js डीबगर में देखने की अनुमति देती हैं। माइक्रोसॉफ्ट अजाक्स मिनीफायर Source Map फ़ाइल –map:v3 स्विच के उपयोग से उत्पन्न करने की अनुमति देता है।

तो मैं मूल jquery.jqGrid.src.js, grid.locale-en.js और ui.jqgrid.css फ़ाइलें (सभी फाइलों को नीचे दिए गए उदाहरण में वर्तमान निर्देशिका में हैं) माइक्रोसॉफ्ट अजाक्स minifier के निम्नलिखित कॉल के साथ कम से कम:

SET AjaxMinExe=%ProgramFiles(x86)%\Microsoft\Microsoft Ajax Minifier\AjaxMin.exe 
"%AjaxMinExe%" -enc:in utf-8 -clobber:true jquery.jqGrid.src.js -o jquery.jqGrid.min.js -map:v3 jquery.jqGrid.min.map 
"%AjaxMinExe%" -enc:in utf-8 -enc:out utf-8 -clobber:true grid.locale-en.js -o grid.locale-en.min.js -map:v3 grid.locale-en.min.map 
"%AjaxMinExe%" -clobber:true ui.jqgrid.css -o ui.jqgrid.min.css -map:v3 ui.jqgrid.min.map 

मैं का उपयोग कर अपने प्रदर्शन का परीक्षण किया मूल और न्यूनतम jqGrid फ़ाइलें और दोनों एक ही सही दिनांक प्रारूप उत्पन्न करता है।

---

अपने प्रदर्शन के कोड के लिए कुछ अन्य आम टिप्पणी:

• मैं सख्ती से अपने सभी ग्रिडों में gridview: true विकल्प (the answer देखें) जो किसी भी नुकसान के बिना अपने ग्रिड के प्रदर्शन में सुधार होगा उपयोग करने के लिए सलाह देते हैं।
• मैं आपकी परियोजना में मूलui.jqgrid.css शामिल करने की अनुशंसा करता हूं। वर्तमान में आप अपने कस्टम production.min.css में कई सीएसएस नियम निर्धारित करते हैं। यह आपके प्रोजेक्ट की जटिल डिबगिंग करता है और भविष्य में jqGrid के अगले संस्करण में मुश्किल हो जाता है।
• आप निर्दिष्ट नियमों में !important विशेषता का उपयोग करते हैं। मैं आपको ऐसा करने की सलाह नहीं देता हूं। किसी को केवल !important का उपयोग करना होगा यदि किसी को अन्य सीएसएस सेटिंग को ओवरराइट करने की आवश्यकता है जो पहले से ही !important का उपयोग करता है। अन्य मामलों में अधिक विशिष्ट सीएसएस नियम निर्दिष्ट करने के लिए पर्याप्त है। उदाहरण के लिए .ui-jqgrid .ui-jqgrid-bdiv { height: 300px !important; } के बजाय आप jqGrid के height: 300 विकल्प का उपयोग कर सकते हैं या .ui-jqgrid .ui-jqgrid-bdiv { height: 300px; } निर्दिष्ट कर सकते हैं।
• मैं समझता हूं कि अगर कोई bootstrap.css का उपयोग करता है तो उसे कुछ सीएसएस नियम जोड़ना होगा। मैंने विषय के बारे में कुछ सुझाव पोस्ट किया। आप <link> जो bootstrap.min.css और ui.jqgrid.css शामिल करने के बाद निम्नलिखित भूमिकाओं को जोड़ने का प्रयास कर सकते हैं:

<style type="text/css"> 
    .ui-jqgrid .ui-pg-table .ui-pg-input, .ui-jqgrid .ui-pg-table .ui-pg-selbox { 
     height: auto; 
     width: auto; 
     line-height: inherit; 
    } 
    .ui-jqgrid .ui-pg-table .ui-pg-selbox { 
     padding: 1px; 
    } 
    .ui-jqgrid { line-height: normal; } 
    .ui-jqgrid table { 
     border-collapse: separate; 
     border-style: none; 
     border-top-style: none; 
    } 
    .ui-jqgrid table.ui-jqgrid-btable { 
    } 
    .ui-paging-info { display: inline; } 
    .ui-jqgrid .ui-pg-table { border-collapse: separate; } 
    div.ui-jqgrid-view table.ui-jqgrid-btable td { 
     border-left-style: none 
    } 
    div.ui-jqgrid-view table.ui-jqgrid-htable { 
     border-style: none; 
     border-top-style: none; 
     border-collapse: separate; 
    } 
    div.ui-jqgrid-view table.ui-jqgrid-btable th { 
     border-left-style: none 
    } 
    .ui-jqgrid .ui-jqgrid-htable th div { 
     height: auto; 
    } 
    .ui-jqgrid .ui-jqgrid-resize { 
     height: 18px !important; 
    } 
    .ui-jqgrid .ui-pg-table { 
     padding-bottom: 0; 
    } 
    .ui-jqgrid>.ui-jqgrid-pager { 
     border-right-color: inherit !important; 
     border-right-style: solid !important; 
     border-right-width: 1px !important; 
    } 
    .ui-jqgrid tr.jqgrow td { 
     vertical-align: middle; 
    } 
    .ui-jqgrid tr.jqgrow { 
     height: auto; 
    } 
    .ui-jqgrid .ui-jqgrid-pager { 
     height: auto; 
    } 
</style> 

मैं अपना पुराना डेमो जो bootstrap.css भी उपयोग करता है से नियम मिलता है। आपके मामले में आपको शायद अतिरिक्त

.ui-jqgrid .ui-jqgrid-bdiv { 
    height: auto !important; 
} 
.ui-jqgrid tr.jqgrow td button.btn { 
    margin: 2px 0; 
} 

मुझे लगता है कि उपर्युक्त सीएसएस आपके पृष्ठ के रूप में सुधार करेगा।