jQuery यूआई डेटपिकर-दिनांक बदलें प्रारूप




jquery-ui date (16)

मैं यूआई डेटपीकर का उपयोग jQuery यूआई से अकेले स्टैंड पिकर के रूप में कर रहा हूं। मेरे पास यह कोड है:

<div id="datepicker"></div>

और निम्नलिखित जेएस:

$('#datepicker').datepicker();

जब मैं इस कोड के साथ मान वापस करने का प्रयास करता हूं:

var date = $('#datepicker').datepicker('getDate');

मुझे यह वापस कर दिया गया है:

Tue Aug 25 2009 00:00:00 GMT+0100 (BST)

जो पूरी तरह से गलत प्रारूप है। क्या DD-MM-YYYY प्रारूप में इसे वापस लाने का कोई तरीका है?


http://api.jqueryui.com/datepicker/#option-dateFormat

पार्स और प्रदर्शित तिथियों के लिए प्रारूप। यह विशेषता क्षेत्रीयकरण विशेषताओं में से एक है। संभावित स्वरूपों की पूरी सूची के लिए प्रारूप दिनांक समारोह देखें।

कोड उदाहरण निर्दिष्ट तिथिफॉर्म विकल्प के साथ डेटपिकर आरंभ करें।

$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });

Init के बाद, डेटफॉर्म विकल्प प्राप्त करें या सेट करें।

//getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
//setter
$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );

jQuery स्क्रिप्ट कोड के अंदर बस कोड पेस्ट करें।

$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });

यह काम करना चाहिए।


आप बस इस तरह के प्रारूप में इस प्रारूप का उपयोग कर सकते हैं

     $(function() {  
        $( "#datepicker" ).datepicker({
            dateFormat: 'dd/mm/yy',
          changeMonth: true,
          changeYear: true
        });
      });

<input type="text" id="datepicker"></p>

आपको अपने इनपुट फ़ील्ड एचटीएमएल में data-date-format="yyyy-mm-dd" का उपयोग करना चाहिए और जे क्वेरी में प्रारंभिक डेटा पिकर बस सरल की तरह होना चाहिए
$("#issue_date").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true });


कोड के नीचे यह जांचने में सहायता मिल सकती है कि फ़ॉर्म को 1 से अधिक दिनांक फ़ील्ड मिला है या नहीं:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Display month &amp; year menus</title>
    <link rel="stylesheet" href="jquery-ui.css" />
    <script src="jquery-1.8.3.js"></script>
    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
    function pickDate(DateObject){
//      alert(DateObject.name)
       $(function() {
               $("#"+DateObject.name).datepicker({ dateFormat: "dd/mm/yy" }).val()
       });
    }
/*
    $(function() {
        $( "#datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true
        });
    });
*/
    </script>
</head>
<body>

<p>From Date: <input type="text" name="FromDate" id="FromDate" size="9" onfocus="pickDate(this)"/></p>
<p>To Date: <input type="text" name="ToDate" id="ToDate" size="9" onfocus="pickDate(this)" /></p>


</body>
</html>

दिनांक प्रारूप (yy / mm / dd) के साथ दिनांक पिकर के लिए यहां पूरा कोड।

नीचे दिए गए लिंक को कॉपी करें और हेड टैग में पेस्ट करें:

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

   <script type="text/javascript">
       $(function() {
               $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
       });
   </script>

नीचे कोड कॉपी करें और बॉडी टैग के बीच पेस्ट करें:

      Date: <input type="text" id="datepicker" size="30"/>    

यदि आप Start Date और End Date जैसे दो (2) इनपुट प्रकार टेक्स्ट चाहते हैं तो इस स्क्रिप्ट का उपयोग करें और दिनांक प्रारूप बदलें।

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

   <script type="text/javascript">
       $(function() {
               $("#startdate").datepicker({ dateFormat: "dd-mm-yy" }).val()
               $("#enddate").datepicker({ dateFormat: "dd-mm-yy" }).val()
       });

   </script>  

दो इनपुट पाठ जैसे:

      Start Date: <input type="text" id="startdate" size="30"/>    
      End Date: <input type="text" id="enddate" size="30"/>

भविष्य में सबूत दिनांक स्निपेट बॉक्स में से एक है। फ़ायरफ़ॉक्स jquery ui डेटपिकर पर डिफ़ॉल्ट है। अन्यथा एचटीएमएल 5 डेटपिकर का उपयोग किया जाता है। अगर एफएफ कभी भी एचटीएमएल 5 टाइप = "डेट" का समर्थन करता है तो स्क्रिप्ट बस अनावश्यक होगी। यह न भूलें कि सिर टैग में तीन निर्भरताओं की आवश्यकता है।

<script>
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!--Form element uses HTML 5 type="date"-->
<div class="form-group row">
    <label for="date" class="col-sm-2 col-form-label"Date</label>
    <div class="col-sm-10">          
       <input type="date" class="form-control" name="date" id="date" placeholder="date">
    </div>
</div>

<!--if the user is using FireFox it          
autoconverts type='date' into type='text'. If the type is text the 
script below will assign the jquery ui datepicker with options-->
<script>
$(function() 
{
  var elem = document.createElement('input');
  elem.setAttribute('type', 'date');

  if ( elem.type === 'text' ) 
  {
    $('#date').datepicker();
    $( "#date" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );     
  }
});

मुझे लगता है कि ऐसा करने का सही तरीका ऐसा कुछ होगा:

var picker = $('.date-picker');
var date = $.datepicker.formatDate(
    picker.datepicker('option', 'dateFormat'),
    picker.datepicker('getDate'));

इस तरह आप सुनिश्चित करते हैं कि प्रारूप स्ट्रिंग केवल एक बार परिभाषित की गई है और स्वरूप स्वरूप में प्रारूप स्ट्रिंग का अनुवाद करने के लिए आप उसी फ़ॉर्मेटर का उपयोग करते हैं।


मैं इसका उपयोग करता हूं:

var strDate = $("#dateTo").datepicker('getDate').format('yyyyMMdd');

जो Jan 18, 2012 लिए प्रारूप की तिथि " 20120118 " देता है।


मैं डेटपिकर के लिए jquery का उपयोग कर रहा हूं। इसके लिए jqueries का उपयोग किया जाता है

<script src="jqueryCalendar/jquery-1.6.2.min.js"></script>
<script src="jqueryCalendar/jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" href="jqueryCalendar/jqueryCalendar.css">

फिर आप इस कोड का पालन करते हैं,

<script>
     jQuery(function() {
     jQuery( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
                });
</script>

यदि आपको yy-mm-dd प्रारूप में दिनांक की आवश्यकता है, तो आप इसका उपयोग कर सकते हैं: -

$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" });

आप सभी समर्थित प्रारूप https://jqueryui.com/datepicker/#date-formats पा सकते हैं

मुझे 06, दिसंबर 2015 की आवश्यकता थी, मैंने यह किया: -

$("#datepicker").datepicker({ dateFormat: "d M,y" });

यह भी काम करता है:

$("#datepicker").datepicker({
    dateFormat:'d-m-yy'
});

getDate की getDate विधि एक प्रकार का प्रकार देता है, स्ट्रिंग नहीं।

आपको अपने दिनांक प्रारूप का उपयोग करके लौटाए गए मान को स्ट्रिंग में प्रारूपित करने की आवश्यकता है। formatDate के formatDate का उपयोग formatDate समारोह:

var dateTypeVar = $('#datepicker').datepicker('getDate');
$.datepicker.formatDate('dd-mm-yy', dateTypeVar);

प्रारूप विनिर्देशकों की पूरी सूची यहां उपलब्ध है


getDate फ़ंक्शन एक जावास्क्रिप्ट दिनांक देता है। इस तिथि को प्रारूपित करने के लिए निम्न कोड का प्रयोग करें:

var dateObject = $("#datepicker").datepicker("getDate");
var dateString = $.datepicker.formatDate("dd-mm-yy", dateObject);

यह एक उपयोगिता फ़ंक्शन का उपयोग करता है जो डेटपिकर में बनाया गया है:

$.datepicker.formatDate( format, date, settings ) - किसी निर्दिष्ट प्रारूप के साथ एक स्ट्रिंग मान में दिनांक स्वरूपित करें।

प्रारूप विनिर्देशकों की पूरी सूची http://api.jqueryui.com/datepicker/#utility-formatDate


$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()

<script type="text/javascript">
  $(function() {
    $( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
  });
</script>




jquery-ui-datepicker