jQuery UI তারিখপিকার - তারিখ ফর্ম্যাট পরিবর্তন করুন

546

আমি স্ট্যান্ড একা বাছাইকারী হিসাবে jQuery UI থেকে UI তারিখপিকার ব্যবহার করছি। আমার এই কোডটি রয়েছে:

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

এবং নিম্নলিখিত জেএস:

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

যখন আমি এই কোডটি দিয়ে মানটি ফেরত দেওয়ার চেষ্টা করি:

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

আমি এটি ফিরে এসেছি:

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

যা সম্পূর্ণ ভুল ফর্ম্যাট। ফর্ম্যাটে ফিরে আসার উপায় আছে কি DD-MM-YYYY?

jquery  jquery-ui  date  jquery-ui-datepicker 
— tarnfeld
সূত্র
2
নিখুঁত, ধন্যবাদ, কেন d .datepicker.formatDate ("yy-mm-dd", নতুন তারিখ (2007, 1 - 1, 26)) নয়; দলিল হিসাবে কাজ?
— হেইন ডু প্লেসিস

উত্তর:

961

আপনার কোডের জন্য এখানে একটি নির্দিষ্ট:

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

আরও সাধারণ তথ্য এখানে উপলব্ধ:

— AvatarKava
সূত্র
6
এটি আমাকে ডেট-পিকারে উল্লিখিত এবং ডিডি-মিমি-ওয়াইয়ের মতো একই ফর্ম্যাটটি দেয় না। সংস্করণ 1.10 ব্যবহার করে। নীচের উত্তরটি ভাল কাজ করে।
— টমি
4
The yyআমাকে দিচ্ছেন 2015। আমি কিভাবে পেতে 15পারি?
— জ্ঞান
6
শুধু ব্যবহার @SearchForKnowledge y। ডেটপিকার-ফর্ম্যাটিং
— শাদোয়াথ
11
মনোযোগ দিন যে আপনি যদি ইতিমধ্যে একটি ভিন্ন ফর্ম্যাট সংজ্ঞায়িত করেন তবে এটি কাজ করে না, আপনার এটি করা উচিত$("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy" ).val()
— জোও পিমেন্টেল
4
পুরানো সংস্করণগুলিতে format: 'dd-mm-yyyy',কাজ করা উচিত
— তারাংপি
99

jQuery স্ক্রিপ্ট কোডের ভিতরে কেবল কোডটি পেস্ট করুন। 

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

এই কাজ করা উচিত.

— sampath
সূত্র
9
.selectorএবং #datepickerএক নয়। আপনার কোড ভারব্যাটিম পেস্ট করা কার্যকর হবে না।
— ডেভ জার্ভিস
63

getDateDatepicker পদ্ধতি একটি তারিখ ধরন, না একটি স্ট্রিং ফেরৎ।

আপনার তারিখ ফর্ম্যাটটি ব্যবহার করে আপনাকে ফেরত মানটিকে স্ট্রিংয়ে ফর্ম্যাট করতে হবে। ডেটপিকারের formatDateফাংশনটি ব্যবহার করুন :

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

বিন্যাস নির্দিষ্টকরী সম্পূর্ণ তালিকা এখানে পাওয়া যায় ।

— kcsoft
সূত্র
34

তারিখ বিন্যাস (yy / মিমি / ডিডি) সহ তারিখ পিকারের জন্য এখানে সম্পূর্ণ কোড।

নীচের লিঙ্কটি অনুলিপি করুন এবং হেড ট্যাগে পেস্ট করুন: 

   <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তারপরে এই স্ক্রিপ্টটি ব্যবহার করুন এবং তারিখের ফর্ম্যাটটি পরিবর্তন করুন।

   <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"/>
— Nasirali
সূত্র
19

তারিখ বিন্যাস

পার্স করা এবং প্রদর্শিত তারিখগুলির জন্য ফর্ম্যাট। এই বৈশিষ্ট্যটি আঞ্চলিকতার অন্যতম বৈশিষ্ট্য। সম্ভাব্য বিন্যাসগুলির একটি সম্পূর্ণ তালিকার জন্য ফর্ম্যাট তারিখ ফাংশনটি দেখুন।

কোড উদাহরণ নির্দিষ্ট তারিখের ফর্ম্যাট বিকল্পের সাথে একটি ডেটপিকার শুরু করুন।

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

তারিখের পরে তারিখের বিন্যাস বিকল্পটি পান বা সেট করুন।

//getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
//setter
$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
— রেভস , 2 ব্যবহারকারী 60% ব্যবহারকারী 369661
সূত্র
এই উদাহরণের কোডের প্রথম লাইনটি "তারিখ পিকার" একটি নির্দিষ্ট তারিখের ফর্ম্যাট দিয়ে ডিফল্ট আমেরিকান মিমি / ডিডি / ওয়াই ফর্ম্যাটের পরিবর্তে কাজ করে।
— রায়ান
3
@ রায়ান এটি আমার পক্ষে কাজ করে না, আপনার কাছে এমন কোনও উদাহরণ রয়েছে যা কোডের সমস্ত লাইন অন্তর্ভুক্ত করে?
— ই
19

getDateফাংশন একটি জাভাস্ক্রিপ্ট তারিখ ফেরত। এই তারিখটি ফর্ম্যাট করতে নিম্নলিখিত কোডটি ব্যবহার করুন:

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

এটি একটি ইউটিলিটি ফাংশন ব্যবহার করে যা ডেটপিকারে অন্তর্নির্মিত হয়:

$.datepicker.formatDate( format, date, settings ) - একটি নির্দিষ্ট বিন্যাসের সাথে একটি তারিখকে স্ট্রিং মান হিসাবে ফর্ম্যাট করুন।

বিন্যাস নির্দিষ্টকরী সম্পূর্ণ তালিকা এখানে পাওয়া যায় ।

— সালমান আ
সূত্র
2
); এটা ভালো হবে, যদি তুমি @kcsoft উত্তর সমৃদ্ধ (যেমন আমি কি যাচ্ছি) পরিবর্তে একটি নতুন পোস্ট করার
— নীলাভ
10

$("#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
— Catalin
সূত্র
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 
             }
      });
});
— রিতেশ ডি জোশি
সূত্র
6

আপনি কেবল এই ফর্ম্যাটটি ঠিক ঠিক তেমন ব্যবহার করতে পারেন 

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

<input type="text" id="datepicker"></p>
— রোহিত
সূত্র
5

আপনার যদি yy-mm-dd ফর্ম্যাটে তারিখের প্রয়োজন হয় তবে আপনি এটি ব্যবহার করতে পারেন: -

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

আপনি সমস্ত সমর্থিত ফর্ম্যাটটি https://jqueryui.com/datepicker/#date-formats খুঁজে পেতে পারেন

আমাকে 06, ডিসেম্বর 2015 এর প্রয়োজন ছিল, আমি এটি করেছি: -

$("#datepicker").datepicker({ dateFormat: "d M,y" });
— Kgn ওয়েব
সূত্র
4

এই এইচটিএমএল পৃষ্ঠাটি চালান, আপনি বেশ কয়েকটি ফর্ম্যাট দেখতে পারেন।

<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>
— কনস্ট্যান্ট লার্নার
সূত্র
হুবহু অনুলিপি করেছেন: jqueryui.com
— সুনীল কুমার
3 
<script>
    $(function() {  
        $("#datepicker").datepicker(); 
        $('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
    }); 
    $("#startDate").datepicker({dateFormat: 'd MM y'}); 
</script>
— শনি
সূত্র
3

এটি মসৃণভাবে কাজ করে। এটা চেষ্টা কর.

এই লিঙ্কগুলি আপনার প্রধান বিভাগে আটকান।

<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>
— ডুলিথ দে কস্তা
সূত্র
2

আপনি যদি একটি তারিখ পিকার সেটআপ করেন input[type="text"] উপাদানটিতে একটি ধারাবাহিক বিন্যাসিত তারিখ পেতে পারেন না, বিশেষত যখন ব্যবহারকারী ডেটা প্রবেশের জন্য তারিখের ফর্ম্যাটটি অনুসরণ না করে follow

উদাহরণস্বরূপ, আপনি যখন তারিখের ফর্ম্যাটটি সেট করুন dd-mm-yyএবং ব্যবহারকারীর প্রকারগুলি 1-1-1। ডেটপিকারটি এটিকে Jan 01, 2001অভ্যন্তরীণ রূপান্তরিত করবে তবে val()ডেটপিকারের অবজেক্টে কল করা স্ট্রিংটি ফিরিয়ে দেবে "1-1-1"- পাঠ্যের ক্ষেত্রে ঠিক কী আছে।

এর দ্বারা বোঝানো হয় যে আপনি প্রবেশের তারিখটি আপনার প্রত্যাশিত ফর্ম্যাটে রয়েছে কিনা তা নিশ্চিত করার জন্য বা ব্যবহারকারীকে তারিখগুলি ফ্রিফর্ম প্রবেশের অনুমতি না দেওয়া (ক্যালেন্ডার বাছাইকারীকে পছন্দ করে) either তা সত্ত্বেও ডেটপিকারের কোডটি আপনার প্রত্যাশা মতো স্ট্রিং ফর্ম্যাট করতে বাধ্য করা সম্ভব:

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()তারিখ- পিকারের পদ্ধতিটি কোনও তারিখ ফিরিয়ে দেবে, এটি কেবলমাত্র ব্যবহারকারী ইনপুট দিয়ে এমন অনেক কিছু করতে পারে যা তারিখের ফর্ম্যাটের সাথে মেলে না। এর অর্থ বৈধতার অনুপস্থিতিতে কোনও তারিখ ফিরে পাওয়া সম্ভব যা ব্যবহারকারীর প্রত্যাশা থেকে আলাদা। ক্রেতা সাবধান নীতি ।

— সমাবস্থা
সূত্র
2

আমি ডেটপিকারের জন্য jquery ব্যবহার করছি se এই 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>
— সিনসিল ম্যাথিউ
সূত্র
2

আমার বিকল্পটি নীচে দেওয়া হল:

$(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>
স্নিপেট প্রসারিত করুন

1

শেষ পর্যন্ত ডেটপিকারের তারিখ পরিবর্তন পদ্ধতির উত্তর পেয়েছে:

$('#formatdate').change(function(){
    $('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});
— রবি সোনি
সূত্র
1

নীচের কোডটি ফর্মটি 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>
— Chakry
সূত্র
2
এটি কীভাবে তারিখের ফর্ম্যাটগুলি সম্পর্কে মূল প্রশ্নের উত্তর দেয়?
— ryadavilli
0

আমি মনে করি এটি করার সঠিক উপায়টি এরকম কিছু হবে:

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

এইভাবে আপনি নিশ্চিত করেছেন যে ফর্ম্যাট স্ট্রিংটি কেবল একবার সংজ্ঞায়িত হয়েছে এবং বিন্যাসের স্ট্রিংটি বিন্যাসিত তারিখে অনুবাদ করতে আপনি একই বিন্যাস ব্যবহার করেন।

— naktinis
সূত্র
0

এখানে ভবিষ্যতের প্রমাণের তারিখ স্নিপেটের বাইরে is ফায়ারফক্স জিকিউরি ইউআই ডেটপিকারে ডিফল্ট। অন্যথায় HTML5 ডেটপিকার ব্যবহার করা হয় ick যদি এফএফ কখনও HTML5 টাইপ = "তারিখ" সমর্থন করে তবে স্ক্রিপ্টটি কেবল অনর্থক হবে red হেড ট্যাগে তিনটি নির্ভরতা দরকার তা ভুলে যাবেন না।

<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' );     
  }
});
— jimshot
সূত্র
0

data-date-format="yyyy-mm-dd"আপনার ইনপুট ফিল্ড এইচটিএমএল এবং জিকুয়েরিতে প্রাথমিক ডেটা পিকারটি সাধারণের মতো ব্যবহার করা উচিত

$("#issue_date").datepicker({ 
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    changeYear: true
});
— এসকে বিকাশকারীগণ
সূত্র
0

আপনি এইভাবে যুক্ত এবং চেষ্টা করতে পারেন:

এইচটিএমএল ফাইল:

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

জাভাস্ক্রিপ্ট ফাইল:

$(function() {  
    $("#demoDatepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        constrainInput: false
    });
});
— Ashraf.Shk786
সূত্র
0

এটিই আমার পক্ষে কাজ করেছে:

$.fn.datepicker.defaults.format = 'yy-mm-dd'
— LalienX
সূত্র
0

সুতরাং আমি এটির সাথে লড়াই করেছিলাম এবং ভেবেছিলাম আমি পাগল হয়ে যাচ্ছি, জিনিসটি বুটস্ট্র্যাপ ডেটপিকারটি jQuery নয় বাস্তবায়িত হচ্ছে তাই তেহ বিকল্পগুলি ভিন্ন ছিল;

$('.dateInput').datepicker({  format: 'dd/mm/yyyy'})
— Tristanisginger
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.