مرضیه
1 سال پیش توسط مرضیه مطرح شد
4 پاسخ

تگ html تاریخ تولد

سلام وقت بخیر
راهنمایی میخواستم این قسمتو چجوری داخل html پیاده سازی کنم با تاریخ فارسی
ممنونم
 تصویر


ثبت پرسش جدید
سعید بهرامی
تخصص : طراح و برنامه نویس
@saeedbahramei 1 سال پیش آپدیت شد
0

درود @bahar عزیز🙂
برای پیاده سازی این مورد شما به غیر از دانش html css
کمی هم باید از Java Script کمک بگیری برای این کار

بنده در زیر یک نمونه برای شما قرار دادم، امیدوارم به کارتون بیاد🤗

HTML


<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <title>جعبه تاریخ</title>   
</head>
<body>

    <section class="center">

    <a href="https://saeedbahramei.ir">جعبه تاریخ</a>

        <form class="selects">
            <select id="day"> 
                <option value="بیست و دوم">روز</option>
                <option value="یکم">1</option>
                <option value="دوم">2</option>
                <option value="سوم">3</option>
            </select>

            <select id="month">
                <option value="خرداد">ماه</option>
                <option value="فروردین">فروردین</option>
                <option value="اردیبهشت">اردیبهشت</option>
                <option value="خرداد">خرداد</option>
            </select>

            <select id="year">
                <option value="1402">سال</option>
                <option value="1400">1400</option>
                <option value="1401">1401</option>
                <option value="1402">1402</option>
            </select>

        </form>

        <button id="btn">حله</button>

    </section>

    <script>
        const btn = document.querySelector('#btn');
        const days = document.querySelector('#day');
        const month = document.querySelector('#month');
        const year = document.querySelector('#year')
        btn.onclick = (event) => {
            event.preventDefault();
            alert(days.value);
            alert(month.value);
            alert(year.value);
        };
    </script>

</body>
</html>

CSS

body{
    background-color: #ffffff;
    margin: 0 auto;
}
a{
    width: 100%;
    color: #fff;
    display: inline-block;
    text-decoration: none;
    font-size: 2rem;
    text-align: center;
    margin: 50px auto;
}
.center{
    width: 80%;
    height: 500px;
    background-color: #ffcc00;
    margin:80px auto;
    border-radius: 10px;
}
.selects{
    display: flex;
    justify-content: center;
}
select{
    height: 50px;
    padding: 10px;
    border: 1px solid #9e9e9e;
    background-color: #ffffffab;
    outline: none;
    margin-top: 80px;
    color: #9e9e9e;
    text-align: center;
}
#day{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: 0;
}
#year{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: 0;
}
select option{
    background-color: #ffcc00;
    color: #181c2e;
}
#btn{
    width: 100px;
    height: 40px;
    border: 0;
    outline: none;
    border-radius: 5px;
    margin:50px auto;
    display: flex;
    justify-content: center;
    font-size: 2rem;
    color: #181c2e;
    background-color: #7ec224;
    cursor: pointer;
}

خروجی
 تصویر


رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 1 سال پیش مطرح شد
1

درود خوبی...

<label for="birthday">تاریخ تولد:</label>
<input type="date" id="birthday" name="birthday">

مرتضی واعظی
تخصص : توسعه دهنده وب
@MortezaVaezi 1 سال پیش آپدیت شد
1

با سلام نمونه کد میتونه کمکتون کنه. البته شکل و شمایلش متفاوت هست. میتونید بنابه خواسته خودتون کاستومش کنید.

<form>
    <div class="date-select">
      <select id="year">
        <option>1402</option>
        <option>1401</option>
        <!-- سال‌های دیگر -->
      </select>

      <select id="month">
        <option>1</option>
        <option>2</option>
        <!-- ماه‌های دیگر -->
        <option>12</option>
      </select>

      <select id="day">
        <option>1</option>
        <option>2</option>
        <!-- روزهای دیگر -->
        <option>31</option>
      </select>
    </div>
  </form>

<style>
.date-select {
  display: inline-block;
}

.date-select select {
  padding: 10px;
  padding-right: 23px;
  border: none;
  border-bottom: 2px solid #ccc;
  font-size: 16px;
  color: #333;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") no-repeat right center;
}

.date-select select:focus {
  outline: none;
  border-bottom-color: #999;
}

</style>  

لطفا در صورتی که پاسخ ارائه شده، پاسخ مشکل شما بود، گزینه بهترین پاسخ را برای این پاسخ بگذارید.


سعید بهرامی
تخصص : طراح و برنامه نویس
@saeedbahramei 1 سال پیش آپدیت شد
0

درود @bahar عزیز🙂
برای پیاده سازی این مورد شما به غیر از دانش html css
کمی هم باید از Java Script کمک بگیری برای این کار

بنده در زیر یک نمونه برای شما قرار دادم، امیدوارم به کارتون بیاد🤗

HTML


<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <title>جعبه تاریخ</title>   
</head>
<body>

    <section class="center">

    <a href="https://saeedbahramei.ir">جعبه تاریخ</a>

        <form class="selects">
            <select id="day"> 
                <option value="بیست و دوم">روز</option>
                <option value="یکم">1</option>
                <option value="دوم">2</option>
                <option value="سوم">3</option>
            </select>

            <select id="month">
                <option value="خرداد">ماه</option>
                <option value="فروردین">فروردین</option>
                <option value="اردیبهشت">اردیبهشت</option>
                <option value="خرداد">خرداد</option>
            </select>

            <select id="year">
                <option value="1402">سال</option>
                <option value="1400">1400</option>
                <option value="1401">1401</option>
                <option value="1402">1402</option>
            </select>

        </form>

        <button id="btn">حله</button>

    </section>

    <script>
        const btn = document.querySelector('#btn');
        const days = document.querySelector('#day');
        const month = document.querySelector('#month');
        const year = document.querySelector('#year')
        btn.onclick = (event) => {
            event.preventDefault();
            alert(days.value);
            alert(month.value);
            alert(year.value);
        };
    </script>

</body>
</html>

CSS

body{
    background-color: #ffffff;
    margin: 0 auto;
}
a{
    width: 100%;
    color: #fff;
    display: inline-block;
    text-decoration: none;
    font-size: 2rem;
    text-align: center;
    margin: 50px auto;
}
.center{
    width: 80%;
    height: 500px;
    background-color: #ffcc00;
    margin:80px auto;
    border-radius: 10px;
}
.selects{
    display: flex;
    justify-content: center;
}
select{
    height: 50px;
    padding: 10px;
    border: 1px solid #9e9e9e;
    background-color: #ffffffab;
    outline: none;
    margin-top: 80px;
    color: #9e9e9e;
    text-align: center;
}
#day{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: 0;
}
#year{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: 0;
}
select option{
    background-color: #ffcc00;
    color: #181c2e;
}
#btn{
    width: 100px;
    height: 40px;
    border: 0;
    outline: none;
    border-radius: 5px;
    margin:50px auto;
    display: flex;
    justify-content: center;
    font-size: 2rem;
    color: #181c2e;
    background-color: #7ec224;
    cursor: pointer;
}

خروجی
 تصویر


مرضیه
تخصص : طراح رابط کاربری،برنامه‌نویس
@marziehkhani 1 سال پیش مطرح شد
1

ممنونم خیلی کمک بزرگی بود @saeedbahramei


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام