Snippets

Valberto Carneiro Django semantic-ui datetime picker as custom formfieldwidget

Created by Valberto Carneiro last modified
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django import forms
from django.forms import DateTimeField
from django.forms.widgets import DateTimeInput
from django.conf import settings
from django.utils.html import format_html
from django.utils.encoding import force_unicode
from django.utils.safestring import mark_safe
from django.forms.utils import flatatt


class SemanticMasked:
    '''
    Download css and js files from http://mugifly.github.io/jquery-simple-datetimepicker/jquery.simple-dtpicker.html
    Css and js files was adapted with semantic-ui css classes. Please, consult my personal repository to get this files.
    '''
    class Media:
        js = (
            '/static/core/js/jquery.simple-dtpicker.js',
            '/static/core/js/jquery.mask.js'
        )

        css = {'all': ('/static/core/css/jquery.simple-dtpicker.css',)}


class SemanticDateTimeWidget(DateTimeInput, SemanticMasked):
    
    def render(self, name, value, attrs=None):
        field = super(SemanticDateTimeWidget, self).render(name, value, attrs)
        id_ = 'id_%s' % name
        div = '<div class="ui icon input">%s%s</div>%s'
        icon = '<i class="calendar icon"></i>'
        script = u"""
        <script>
            $(document).ready(function() {
                $('#%s').appendDtpicker({
                    "duration": '',
                    "locale": "br",
                    "closeOnSelected": true,
                    "dateFormat": "DD/MM/YYYY hh:mm"
                });

                $('.datepicker').on("blur", function (e) {
                    setTimeout(function () {
                        if (!context.is(':focus')) {
                            $(context).datepicker("hide");
                        }
                    }, 250); 
                });

            });
            $('#%s').mask('00/00/0000 00:00');
        </script>""" % (id_, id_)
        html = div % (field, icon, script) 
        return mark_safe(u'%s%s' % (html, script))


class DateTimeFieldSemantic(forms.DateTimeField):
    widget = SemanticDateTimeWidget()
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.forms import ModelForm
from django import forms
from polls.models import Question
from core.formfields import DateTimeFieldSemantic
from django.utils.translation import ugettext_lazy as _

class QuestionForm(ModelForm):
    pub_date = DateTimeFieldSemantic(label=_('Pub date'), localize=True, help_text=u'dd/mm/yyyy hh:mm')

    error_css_class = 'error'
    required_css_class = 'required'

    class Meta:
        model = Question
        exclude = ()

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.