[Html5] هل هناك أي طريقة لتغيير نوع المدخلات = "التاريخ"؟


Answers

منذ طرح هذه الإجابة ، حدثت أشياء قليلة في عالم الويب ، وأكثرها إثارة هو هبوط مكونات الويب . يمكنك الآن حل هذه المشكلة بشكل أنيق باستخدام عنصر HTML5 مخصص تم تصميمه ليلائم احتياجاتك. إذا كنت ترغب في تجاوز / تغيير طريقة عمل أي علامة html ، فاعمل فقط على إنشاء لعبك باستخدام dom dom .

والخبر السار هو أن هناك الكثير من الأسس المتوفر حالياً ، وعلى الأرجح لن تحتاج إلى التوصل إلى حل من الصفر. ما عليك سوى check مما يبني الناس والحصول على أفكار من هناك.

يمكنك البدء بحل بسيط (وعامل) مثل date-util البوليمر الذي يسمح لك باستخدام علامة مثل هذه:

<date-util format="dd/MM/yyyy"></date-util>

وتهيئته كحقل مدخلات ... أو يمكنك الحصول على إبداع وتاريخ إبداعي منبثقين تمامًا على النحو الذي تريده ، مع التنسيق والأماكن التي تريدها ، وعمليات الرد ، وقائمة الخيارات الطويلة (لديك واجهة برمجة التطبيقات المخصصة بالكامل تحت تصرفك!)

متوافقة مع المعايير ، لا يوجد مخترقين.

لا يوجد سوى صيد ، على الرغم من أننا هناك تقريبًا ، إلا أنه لا يزال حلًا يتطلع إلى المستقبل: لن يدعم الإصدار 10 من IE أو الزملاء القديمين العلامة المخصصة ، لذلك تحقق مرة أخرى من polyfills المتوفرة ، وما browsers/versions التي يدعمونها وإذا كان يغطي ما يكفي من٪ قاعدة المستخدمين الخاصة بك ... في غضون بضعة أشهر ، فإنه سيغطي معظم المستخدمين بالتأكيد ، نظرًا لأن جميع بائعي المستعرضات الرئيسيين على متن الطائرة ومتحمسين للمواصفات ، كما أن تنفيذ 360 قريب جدًا.

آمل أن يساعد!

Question

أعمل مع عناصر HTML5 على صفحة الويب الخاصة بي. حسب type="date" الإدخال الافتراضي type="date" يعرض التاريخ كـ YYYY-MM-DD .

والسؤال هو ، هل من الممكن تغيير شكله إلى شيء من هذا القبيل: DD-MM-YYYY ؟




بعد قراءة الكثير من المناقشات ، قمت بإعداد حل بسيط ولكن لا أريد استخدام الكثير من Jquery و CSS ، فقط بعض javascript.

كود HTML:

<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />

رمز CSS:

#dt {
  text-indent: -500px;
  height: 25px;
  width: 200px;
}

كود جافا سكريبت:

function mydate() {
  //alert("");
  document.getElementById("dt").hidden = false;
  document.getElementById("ndt").hidden = true;
}

function mydate1() {
  d = new Date(document.getElementById("dt").value);
  dt = d.getDate();
  mn = d.getMonth();
  mn++;
  yy = d.getFullYear();
  document.getElementById("ndt").value = dt + "/" + mn + "/" + yy
  document.getElementById("ndt").hidden = false;
  document.getElementById("dt").hidden = true;
}

انتاج:




بعد العديد من العقبات ، توصلت إلى حل يسمح بتغيير الشكل. هناك بعض التحذيرات لكن يمكن استخدامها إذا كنت ترغب في عرض "Jan" أو "01" بشكل ثابت. وهو يعمل في Chrome على نظامي التشغيل Windows و Mac فقط بسبب حقيقة أن متصفح Firefox لا يدعم حتى الآن منتقي التاريخ الأصليين على الإطلاق.

https://github.com/northamerican/custom-input-date-format

JS:

function updateDateInputs() { 
    $('input').each(function() {
        var $date = $(this),
            date = $date.val().split('-'),
            format = ['year', 'month', 'day'];
        $.each(format, function(i, v) {
            $date.attr('data-' + v, +date[i]);
        });
    });
}

ساس:

$months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12';
@each $month in $months {
    $i: index($months, $month);

    input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after { 
        content: "#{$month}";
    }
}



function dmy() {
  var mydate = document.getElementById('dat').value;
  //alert(mydate);
  var yf = mydate.split("-")[0];
  var mf = mydate.split("-")[1];
  var df = mydate.split("-")[2];

  var b = localStorage.getItem("b");
  if (!b) {
    b = [];
  } else {
    b = JSON.parse(b);

  }
  b.push({
    df: df,
    mf: mf,
    yf: yf
  });

  localStorage.setItem("b", JSON.stringify(b));
}

function showdate() {
  var sdate = JSON.parse(localStorage.getItem('b'));
  var a = '';
  if (sdate != null) {
    for (var i = 0; i < sdate.length; i++) {
      a += sdate[i]['df'] + '/' + sdate[i]['mf'] + '/' + sdate[i]['yf'] + '<br>';

    }
  } else {
    a = 'No DATA';
  }
  document.getElementById('conversion').innerHTML = a;
}
<form onsubmit=dmy()>
  <input type="date" name="dat" id="dat">
  <input type="submit" value="submit">
</form>
<input type="button" value="convert" onclick=showdate()>
<div id="conversion"></div>



من المهم التمييز بين شكلين مختلفين :

  • تنسيق الأسلاك RFC 3339 / ISO 8601 ": YYYY-MM-DD. وفقًا لمواصفات HTML5 ، هذا هو التنسيق الذي يجب استخدامه لقيمة الإدخال عند إرسال النموذج أو عند طلبه عبر DOM API. إنها اللغة والمنطقة المستقلة.
  • التنسيق المعروض بواسطة عنصر تحكم واجهة المستخدم والمقبول كمدخلات المستخدم. يتم تشجيع موردي المستعرض على اتباع تفضيلات المستخدم. على سبيل المثال ، في نظام Mac OS مع المنطقة "الولايات المتحدة" المحددة في جزء تفضيلات اللغة والنص ، يستخدم Chrome 20 التنسيق "m / d / yy".

لا تتضمن مواصفات HTML5 أي وسيلة لإلغاء أو تحديد أي من التنسيقات يدويًا.




جرب هذا إذا كنت بحاجة إلى حل سريع لجعل yyyy-mm-dd go "dd- Sep -2016"

1) إنشاء بالقرب من فئة واحدة من المدخلات الخاصة بك (بمثابة تصنيف)

2) تحديث التسمية في كل مرة يتم تغيير تاريخك من قبل المستخدم ، أو عندما تحتاج إلى تحميل من البيانات.

يتطلب العمل على الهواتف المحمولة لمتصفح webkit وأحداث المؤشر لـ IE11 + jQuery و Jquery Date

$("#date_input").on("change", function () {
     $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
        });
#date_input{text-indent: -500px;height:25px; width:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="d M y" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>