การทำช่องเลือก Date Field แบบปฏิทิน

ภาพตัวอย่างของช่องเลือก Date Field แบบปฏิทิน

 

ภาพก่อนจะกดเลือกที่ field

ภาพเมื่อกดเลือกที่ field

วิธีการทำ 

        สำหรับการทำจะใช้ jQuery-ui กับ Plugin ที่ทำให้แสดงวัน เดือน ปี ตอนเลือกเป็นภาษาไทย ซึ่งได้ทำการรวมไฟล์ทั้งหมดที่จำเป็นต้องใช้ไว้ภายในโฟลเดอร์ static แล้วสามารถใช้งานได้ทันที

        1. ตัวอย่าง การเขียนโค้ดในไฟล์ template

{% extends "start_base.html" %}
{% load staticfiles %}

{% block title %}ทดสอบ Date Field{% endblock %}

{% block content %}
<div class="row">
    <div class="container">
        <div class="page-header">
            <h2>ทดสอบ <small>Date Field</small></h2>
        </div>

        <form class="form-horizontal" method="post" action="{% url 'login:testDateField' %}">
            {% csrf_token %}

            <script>
                $(function(){
                    $( "#date" ).datepicker({
                        changeMonth: true,
                        changeYear: true,
                        dateFormat: 'dd-mm-yy', // รูปแบบการแสดงผล วัน-เดือน-ปี
                        yearRange: '-100:+0',   // ย้อนหลังไป 100 ปี
                    });
                });
            </script>

            <div class="form-group">
                <label class="col-sm-3 control-label">เลือกวัน</label>
                <div class="col-sm-9">
                    <input type="text" name="date" id="date">
                </div>
            </div>

            <!-- save button -->
            <div class="form-group">
                <label class="col-sm-3 control-label"></label>
                <div class="col-sm-9">
                    <input type="submit" class="btn btn-success" value="ตกลง"/>
                </div>
            </div>

        </form>

    </div>
</div>
{% endblock %}

        2. ตัวอย่างการเขียนโค้ดในไฟล์ views เพื่อรับข้อมูลจาก Field

def testDateField(request):
    template = 'login/test_date_field.html'
    context = {}

    if request.method == 'POST':
        date = request.POST['date']     # ตัวที่ได้มาจากหน้าเว็บรูปแบบจะเป็น วัน-เดือน-ปี

        # ทำการแปลงให้เป็น ปี-เดือน-วัน แล้วเป็นเป็นตัวแปรประเภท datetime.date ให้พร้อมสำหรับบันทึกลง database
        valid_date = datetime.strptime(date, '%d-%m-%Y').date()
        print ">>> ", valid_date, " ", type(valid_date), " <<<"

    return render(
        request,
        template,
        context
    )

 

สามารถรัน server และเข้าไปดูตัวอย่าง field ได้ที่ localhost:8000/test