การทำช่องเลือก 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

[login] ข้อมูลใน models ของ login

models ของ app login จะมีคลาสชื่อว่า UserProfile ซึ่งมีโค้ดดังต่อไปนี้

from django.db import models
from django.contrib.auth.models import User

# Create your models here.
class UserProfile(models.Model):
    # This line is required. Links UserProfile to a User model instance.
    user = models.OneToOneField(User)

    # The additional attributes we wish to include.
    website = models.URLField(blank=True)
    picture = models.ImageField(upload_to='profile_images', blank=True)

    # Override the __unicode__() method to return out something meaningful!
    def __unicode__(self):
        return self.user.username

โดยมีการเก็บข้อมูลทั้งหมดดังนี้
1. user จะสืบทอดข้อมูลมาจาก django.contrib.auth.model.User ซึ่งมีข้อมูลทั้งหมดดังนี้
    1.1 username ชื่อผู้ใช้
    1.2 first_name ชื่อจริง
    1.3 last_name นามสกุล
    1.4 email (ไม่จำเป็นต้องมี)
    1.5 password รหัสผ่าน
    ส่วนที่เหลือจะไม่ค่อยได้ใช้งาน หรือมีการทำงานอัตโนมัติ
    1.6 groups (ไม่จำเป็นต้องมี)
    1.7 user_permissions (ไม่จำเป็นต้องมี)
    1.8 is_staff เป็นผู้ดูแลระบบหรือไม่ จะกำหนดเริ่มต้นเป็น False
    1.9 is_active จะกำหนดเริ่มต้นเป็น True
    1.10 is_superuser จะกำหนดเริ่มต้นเป็น False
    1.11 las_login เข้าสู่ระบบครั้งสุดท้ายเมื่อใด บันทึกเองอัตโนมัติ
    1.12 date_joined วันที่สมัครเข้าใช้งาน บันทึกเองอัตโนมัติ

2. website เก็บที่อยู่เว็บไซต์ของผู้ใช้ (ถ้ามี)
    หมายเหตุ: แต่ตอนนี้ไม่ได้ให้ผู้ใช้กรอกตอนสมัคร
3. picture เก็บรูปภาพโปรไฟล์ของผู้ใช้
    หมายเหตุ: แต่ตอนนี้ไม่ได้ให้ผู้ใช้กรอกตอนสมัคร



ถ้าหากต้องการข้อมูลผู้ใช้ในส่วนที่ไม่มี เช่น อยากได้ข้อมูลสาขา ภาควิชา คณะ ของผู้ใช้ อาจจะต้องมีการสร้าง models เพิ่มขึ้นมาภายในกลุ่มของตนเอง โดยสืบทอด models ของคลาส UserProfile ไปใช้งาน ดังตัวอย่าง

#-*- coding: utf-8 -*-
# ใส่สิ่งนี้ เข้าไปจะสามารถพิมพ์ภาษาไทยในไฟล์ python ได้

from django.db import models
from login.models import UserProfile

class Example(models.Model):
    your_user = models.OneToOneField(UserProfile)
    
    # ที่เหลือใส่ฟิลข้อมูลที่ต้องการเพิ่มลงไป เช่น สาขา ภาควิชา ฯลฯ
    department = models.CharField(max_length=50)
    # ... ฯลฯ

โดยเราสามารถ get ข้อมูล Object ของ UserProfile ปัจจุบัน (ผู้ใช้งานปัจจุบัน) ได้จากโค้ดตัวอย่างดังนี้

#-*- coding: utf-8 -*-
# โค้ดตัวอย่างเราจะใช้ในไฟล์ views
# ใช้สำหรับ get ข้อมูลของ UserProfile คนปัจจุบัน
# เพื่อนำข้อมูลที่ได้ไปใช้ในตาราง models ที่ได้ออกแบบไปในตัวอย่างด้านบน

import django.shortcuts
from login.models import UserProfile

def exampleCurrentUser(request):
    # ตัวอย่างการ get ค่าของ object คนปัจจุบันที่กำลังใช้งานอยู่
    thisuser = request.user
    currentUser = UserProfile.objects.get(user = thisuser)
    # นำ currentUser มาใช้ทำได้ ในตัวอย่างนี้จะนำมาแสดงหน้าเว็บ โดยแสดง username, first name และ last name
    # สำหรับการนำไปใช้งานจริงของแต่ละกลุ่ม อาจจะนำไปใช้เพิ่มข้อมูลลงใน ตารางของตนเอง
    return django.shortcuts.HttpResponse(currentUser.user.username + " " + currentUser.user.first_name + " " + currentUser.user.last_name)

ตัวอย่างผลลัพธ์ของหน้าเว็บที่ได้