jQuery UI DatePicker - तिथि प्रारूप बदलें

Question

मैं jQuery UI से UI DatePicker का उपयोग अकेले स्टैंड बीनने वाले के रूप में कर रहा हूं। मेरे पास यह कोड है:

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

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

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

जब मैं इस कोड के साथ मान लौटाने की कोशिश करता हूं:

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

मुझे यह लौटाया गया है:

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

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

Comments

सही, धन्यवाद, $ .datepicker.formatDate ("yy-mm-dd", नई तिथि (2007, 1 - 1, 26) क्यों नहीं है; डॉक्यूमेंटेशन में काम करते हैं?

— हेन डु प्लेसिस

Answer 1

यहाँ आपके कोड के लिए एक विशिष्ट है:

var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();

अधिक सामान्य जानकारी यहाँ उपलब्ध है:

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

Comments

यह सिर्फ मुझे वही स्वरूप देता है जैसा कि मैंने तारीख-तारीख में निर्दिष्ट किया था और dd-mm-yy को नहीं। संस्करण 1.10 का उपयोग कर। नीचे दिया गया उत्तर ठीक काम करता है।

— टॉमी

yyमुझे दे रहा है 2015। मैं केवल कैसे प्राप्त कर सकता हूं 15?

— SearchForKnowledge 21

@SearchForKnowledge बस उपयोग करें y।

— दिनांक

ध्यान दें कि यदि आप पहले से ही एक अलग प्रारूप को परिभाषित कर चुके हैं, तो यह काम नहीं करता है, आपको तब करना चाहिए$("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy" ).val()

— जोओ पिमेंटेल फेरेरा

पुराने संस्करणों में format: 'dd-mm-yyyy',काम करना चाहिए

— TarangP

Answer 2

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

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

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

Comments

.selectorऔर #datepickerसमान नहीं हैं। अपने कोड को शब्दशः चिपकाने से काम नहीं चलेगा।

— डेव जार्विस

Answer 3

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

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

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

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

Answer 4

यहाँ दिनांक प्रारूप (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"/>    

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

   <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"/>

Answer 5

डेटा प्रारूप

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

कोड उदाहरण डेटापॉर्मट निर्दिष्ट विकल्प के साथ एक तारीख को इनिशियलाइज़ करें।

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

InFit के बाद, DateFormat विकल्प प्राप्त करें या सेट करें।

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

Comments

इस उदाहरण में कोड की पहली पंक्ति डिफ़ॉल्ट तिथि अमेरिकी मिमी / dd / yy प्रारूप के बजाय "दिनांक पिकर" एक विशिष्ट दिनांक प्रारूप के साथ काम करती है।

— रयान

@ यह मेरे लिए काम नहीं करता है, क्या आपके पास एक उदाहरण है जिसमें कोड की सभी लाइनें शामिल हैं?

— knocte

Answer 6

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

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

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

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

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

Comments

); यह बेहतर होता है अगर आप @kcsoft जवाब समृद्ध (जैसे मैं करता हूँ जा रहा हूँ) के बजाय नया पोस्ट करने

— नीले

Answer 7

$("#datepicker").datepicker("getDate") दिनांक ऑब्जेक्ट लौटाता है, स्ट्रिंग नहीं।

var dateObject = $("#datepicker").datepicker("getDate"); // get the date object
var dateString = dateObject.getFullYear() + '-' + (dateObject.getMonth() + 1) + '-' + dateObject.getDate();// Y-n-j in php date() format

Answer 8

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

Answer 9

का उपयोग करने का प्रयास करें

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

और वहाँ बहुत सारे विकल्प उपलब्ध हैं तारीख के लिए आप इसे यहां पा सकते हैं

http://api.jqueryui.com/datepicker/

यह वह तरीका है जिसे हम पैरामीटर के साथ डेटपिकर कहते हैं

$(function() {
      $('.selector').datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            numberOfMonths: 1,
            buttonImage: 'contact/calendar/calendar.gif',
            buttonImageOnly: true,
            onSelect: function(selectedDate) {
                 // we can write code here 
             }
      });
});

Answer 10

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

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

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

Answer 11

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

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

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

मुझे ०६, दिसम्बर २०१५ की जरूरत थी, मैंने ऐसा किया: -

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

Answer 12

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

Answer 13

बस इस HTML पृष्ठ को चलाएं, आप कई प्रारूप देख सकते हैं।

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
    $( "#datepicker" ).datepicker();
    $( "#format" ).change(function() {
        $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
});
</script>
</head>
<body>

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

<p>Format options:<br />
<select id="format">
    <option value="mm/dd/yy">Default - mm/dd/yy</option>
    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
    <option value="d M, y">Short - d M, y</option>
    <option value="d MM, y">Medium - d MM, y</option>
    <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
    <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>


</body>
</html>

Comments

से बिल्कुल कॉपी किया गया: jqueryui.com/resources/demos/datepicker/date-formats.html

— सुनील कुमार

Answer 14

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

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

Answer 15

<script>
    $(function() {  
        $("#datepicker").datepicker(); 
        $('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
    }); 
    $("#startDate").datepicker({dateFormat: 'd MM y'}); 
</script>

Answer 16

यह आसानी से काम करता है। इसे इस्तेमाल करे।

इन लिंक को अपने हेड सेक्शन में पेस्ट करें।

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

जेएस कोडिंग निम्नलिखित है।

 <script>

        $(document).ready(function () {
            $('#completionDate').datepicker({
                dateFormat: 'yy-mm-dd', // enter date format you prefer (e.g. 2018-10-09)
                changeMonth: true,
                changeYear: true,
                yearRange: "-50:+10",
                clickInput: true,

                onSelect: function (date) {
                    loadMusterChit();
                }

            });
        });

    </script>

Answer 17

यदि आप किसी डेटापॉकर को किसी ऐसे input[type="text"]तत्व पर सेट करते हैं, जो आपको लगातार स्वरूपित तारीख नहीं मिल सकता है, खासकर जब उपयोगकर्ता डेटा प्रविष्टि के लिए दिनांक प्रारूप का पालन नहीं करता है।

उदाहरण के लिए, जब आप dateFormat को dd-mm-yyउपयोगकर्ता प्रकारों के रूप में सेट करते हैं 1-1-1। डेटपीकर इसे Jan 01, 2001आंतरिक रूप से रूपांतरित करेगा लेकिन val()डेटपीकर ऑब्जेक्ट पर कॉल करने से स्ट्रिंग वापस आ जाएगी "1-1-1"- बिल्कुल वही जो टेक्स्ट फ़ील्ड में है।

इसका मतलब है कि आपको या तो उपयोगकर्ता इनपुट को मान्य करना चाहिए यह सुनिश्चित करने के लिए कि आप जिस तारीख को दर्ज करना चाहते हैं वह प्रारूप में है या उपयोगकर्ता को तारीखों में प्रवेश करने की अनुमति नहीं है (कैलेंडर पिकर के बजाय प्राथमिकता)। फिर भी यह है कि आप एक स्ट्रिंग की तरह आप उम्मीद कर स्वरूपित देने के लिए datepicker कोड मजबूर करने के लिए संभव:

var picker = $('#datepicker');

picker.datepicker({ dateFormat: 'dd-mm-yy' });

picker.val( '1-1-1' );  // simulate user input

alert( picker.val() );  // "1-1-1"

var d = picker.datepicker( 'getDate' );
var f = picker.datepicker( 'option', 'dateFormat' );
var v = $.datepicker.formatDate( f, d );

alert( v );             // "01-01-2001"

हालाँकि इस बात से अवगत रहें कि जबकि डेटपिकर की getDate()विधि एक तारीख को लौटाएगी , यह केवल उपयोगकर्ता इनपुट के साथ इतना कुछ कर सकता है जो तारीख प्रारूप से बिल्कुल मेल नहीं खाता है। इसका मतलब यह है कि सत्यापन की अनुपस्थिति में यह संभव है कि एक तारीख वापस मिल जाए जो उपयोगकर्ता की अपेक्षा से अलग हो। कैवियट खाली करनेवाला ।

Answer 18

मैं datepicker के लिए 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>

Answer 19

मेरा विकल्प नीचे दिया गया है:

$(document).ready(function () {
  var userLang = navigator.language || navigator.userLanguage;

  var options = $.extend({},
    $.datepicker.regional["ja"], {
      dateFormat: "yy/mm/dd",
      changeMonth: true,
      changeYear: true,
      highlightWeek: true
    }
  );

  $("#japaneseCalendar").datepicker(options);
});

#ui-datepicker-div {
  font-size: 14px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>

</body>
</html>

Answer 20

अंत में डेटपिकर डेट चेंज मेथड का जवाब मिला:

$('#formatdate').change(function(){
    $('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});

Answer 21

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

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

जो " 20120118" जैसे प्रारूप की एक तारीख लौटाता है Jan 18, 2012।

Answer 22

नीचे दिए गए कोड की जाँच करने में मदद मिल सकती है कि क्या फॉर्म को 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>

Comments

यह दिनांक स्वरूपों के मूल प्रश्न का उत्तर कैसे देता है?

— ryadavilli

Answer 23

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

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

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

Answer 24

यहाँ बॉक्स आउट ऑफ प्रूफ डेट स्निपेट है। फ़ायरफ़ॉक्स jquery यूआई डेटपिकर के लिए चूक। अन्यथा HTML5 डेटपिकर का उपयोग किया जाता है। यदि FF कभी भी HTML5 प्रकार = "तिथि" का समर्थन करता है, तो स्क्रिप्ट केवल बेमानी हो जाएगी। हेड टैग में तीन निर्भरताएँ आवश्यक हैं मत भूलना।

<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' );     
  }
});

Answer 25

आपको data-date-format="yyyy-mm-dd"अपने इनपुट क्षेत्र html और प्रारंभिक डेटा पिकर को JQuery में सरल की तरह उपयोग करना चाहिए

$("#issue_date").datepicker({ 
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    changeYear: true
});

Answer 26

आप इस तरह से जोड़ सकते हैं और आजमा सकते हैं:

HTML फ़ाइल:

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

जावास्क्रिप्ट फ़ाइल:

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

Answer 27

इसी से मेरा काम बना है:

$.fn.datepicker.defaults.format = 'yy-mm-dd'

Answer 28

इसलिए मैंने इससे संघर्ष किया और मुझे लगा कि मैं पागल हो रहा हूं, बात बूटस्ट्रैप की है और इसे लागू नहीं किया जा रहा है इसलिए jQuery नहीं है, इसलिए विकल्प अलग थे;

$('.dateInput').datepicker({  format: 'dd/mm/yyyy'})