جعل القيمة value + min تأخذ التاريخ الحالي والقيمة max تأخذ قيمة بعد 3 أشهر من التاريخ الحالي JavaScript

احمد منصور10 · 26 يوليو 2020

<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">

السلام عليكم

هذا كود html كيف اجعل القيمة value + min تاخذ التاريخ الحالي كذلك القيمة max كيف اجعل قيمتها بعد 3 اشهر من التاريخ الحالي

مصطفى القباني · 26 يوليو 2020

يمكنك عمل الآتي عن طريق الjavascript كالتالي:

<script>
    var inputElement = document.querySelector('input[type="date"]');
  
    var getCurrentDate = function (monthOffset) {
        today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1; //As January is 0.
        if (monthOffset) {
            mm = mm + monthOffset;
        }
        var yyyy = today.getFullYear();

        if (dd < 10) dd = '0' + dd;
        if (mm < 10) mm = '0' + mm;
        return (yyyy + '-' + mm + '-' + dd);
    };

    var currentDate = getCurrentDate();
    var maxDate = getCurrentDate(3);
    inputElement.value = currentDate;
    inputElement.min = currentDate;
    inputElement.max = maxDate;
</script>

قم بإضافة هذا الوسم بعد وسم الinput وقبل نهاية وسم الbody، وسيقوم بجعل الcurrent والmin بالتاريخ الحالي، والmax بعد ثلاثة أشهر.

شرح الكود:

    var inputElement = document.querySelector('input[type="date"]');

قمنا بإختيار الوسم input الذي نوعه date ووضعه داخل المتغير inputElement، وسنقوم بالتعديل على خواصه.

var getCurrentDate = function (monthOffset) {
    today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth() + 1; //As January is 0.
    if (monthOffset) {
        mm = mm + monthOffset;
    }
    var yyyy = today.getFullYear();

    if (dd < 10) dd = '0' + dd;
    if (mm < 10) mm = '0' + mm;
    return (yyyy + '-' + mm + '-' + dd);
};

قمنا بتعريف دالة وظيفتها أن ترجع لنا التاريخ الحالي، نقوم بالحصول على التاريخ الحالي عن طريق new Date() وهو يرجع لنا تاريخ اليوم، وقمنا بوضعه داخل المتغير today.

قمنا بإستخدام getDate و getMonth و getFullYear للحصول على اليوم والشهر والسنة، وقمنا بإرجاع التاريخ في الشكل المطلوب وهو على الشكل yyy-mm-dd.

var currentDate = getCurrentDate();
var maxDate = getCurrentDate(3);
inputElement.value = currentDate;
inputElement.min = currentDate;
inputElement.max = maxDate;

وفي النهاية قمنا بإستخدام هذه الدالة للحصول على التاريخ الحالي، والتاريخ الحالي مضاف إليه ثلاثة أشهر، وقمنا بتعديل الخواص value و min و max للوسم.

تم التعديل في 26 يوليو 2020 بواسطة مصطفى القباني

احمد منصور10 · 26 يوليو 2020

اشكرا جزيل الشكر

لكن انا مبتدء في هذه المواضيع ولم يسبق لي استخدام ال javascript هل اضيف هذه الاكواد الى ملف html الخاص بي ام تكون في ملف مستقل لانني حاولت اطبقها على نفس المثال حقي ولم استطع

هل يمكنك ان تنسقه لي

هذا هو الكود الخاص بي mytext.html

<!DOCTYPE html>
  <html dir="rtl" lang="ar">
  <head>

  <meta charset="UTF-8">
  <meta name="description" content="تجربة">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="تجربة">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>درس 1</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  </head>
 <body>
  <center>
    <img src="/images/logo.jpg" alt="centered image" />
</center>

       <div class="container">
        <div class="row col-md-6 col-md-offset-3">
        <div class="panel panel-primary">
          <div class="panel-heading text-center">
      

<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">
    
      <input type="submit" class="btn btn-primary text-right" />     

          </div>
          <div class="panel-footer text-right">
            <small>شكرا لكم</small>
          </div>
        </div>
      </div>
    </div>

مصطفى القباني · 26 يوليو 2020

بتاريخ 32 دقائق مضت قال Abo Abdullah Abo Abdullah:

اشكرا جزيل الشكر

لكن انا مبتدء في هذه المواضيع ولم يسبق لي استخدام ال javascript هل اضيف هذه الاكواد الى ملف html الخاص بي ام تكون في ملف مستقل لانني حاولت اطبقها على نفس المثال حقي ولم استطع

هل يمكنك ان تنسقه لي

هذا هو الكود الخاص بي mytext.html

نعم يمكنك إضافتها إلى ملف الhtml قبل غلق الbody، أو يمكنك إضافتها في ملف منفصل.

الكود بعد التنسيق:

<!DOCTYPE html>
  <html dir="rtl" lang="ar">
  <head>

  <meta charset="UTF-8">
  <meta name="description" content="تجربة">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="تجربة">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>درس 1</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  </head>
 <body>
  <center>
    <img src="/images/logo.jpg" alt="centered image" />
</center>

       <div class="container">
        <div class="row col-md-6 col-md-offset-3">
        <div class="panel panel-primary">
          <div class="panel-heading text-center">
      

<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">
    
      <input type="submit" class="btn btn-primary text-right" />     

          </div>
          <div class="panel-footer text-right">
            <small>شكرا لكم</small>
          </div>
        </div>
      </div>
    </div>
    <script>
        var inputElement = document.querySelector('input[type="date"]');
      
        var getCurrentDate = function (monthOffset) {
            today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth() + 1; //As January is 0.
            if (monthOffset) {
                mm = mm + monthOffset;
            }
            var yyyy = today.getFullYear();
    
            if (dd < 10) dd = '0' + dd;
            if (mm < 10) mm = '0' + mm;
            return (yyyy + '-' + mm + '-' + dd);
        };
    
        var currentDate = getCurrentDate();
        var maxDate = getCurrentDate(3);
        inputElement.value = currentDate;
        inputElement.min = currentDate;
        inputElement.max = maxDate;
    </script>
</body>
</html>

احمد منصور10 · 26 يوليو 2020

شكرا جزيلا الف شكر ضبط معي بارك الله فيك وفي علمك شغل احترافي ماشاء الله

هل يمكن عمل نفس هذه الكود علي التاريخ الهجري

مصطفى القباني · 26 يوليو 2020

بتاريخ 5 ساعات قال Abo Abdullah Abo Abdullah:

شكرا جزيلا الف شكر ضبط معي بارك الله فيك وفي علمك شغل احترافي ماشاء الله

هل يمكن عمل نفس هذه الكود علي التاريخ الهجري

للأسف لا يمكن تطبيقه على التاريخ الهجري بسبب أن هذه الدوال مخصصة لإسترجاع التاريخ الميلادي.

احمد منصور10 · 26 يوليو 2020

شكرا بارك الله فيك

جعل القيمة value + min تأخذ التاريخ الحالي والقيمة max تأخذ قيمة بعد 3 أشهر من التاريخ الحالي JavaScript

السؤال

احمد منصور10

6 أجوبة على هذا السؤال

Recommended Posts

مصطفى القباني

احمد منصور10

مصطفى القباني

احمد منصور10

مصطفى القباني

احمد منصور10

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية