{% load i18n static common %}
<div style="padding: 10px;height: 160px;width: 360px">
    <form class="layui-form action-form" action method="post" id="{{ model_name }}_{{ action_repr }}">
        {% csrf_token %}
        <div class="layui-form-item">
          {% layui_inline form.form.transaction %}
        </div>
        <div class="layui-form-item">
          {% layui_inline form.form.start_time %}
          {% layui_inline form.form.end_time %}
        </div>
    </form>
</div>
<script>
  layui.use(['form', 'laydate'], function () {
    var laydate = layui.laydate, form = layui.form;;
    $("form.layui-form input.layui-datetime").each(function () {
      laydate.render({elem: this, type: "datetime"});
    });
    var listenChange = function(val){
        switch (val) {
          case '0':
              document.getElementById("id_start_time").disabled=false;
              document.getElementById("id_end_time").disabled=false;
              break;
          case '1':
              document.getElementById("id_start_time").disabled=true;
              document.getElementById("id_end_time").disabled=true;
              break;
          default:
              break;
      }
    $(".layui-layer-btn0").click(function () {
                if (document.getElementById("id_start_time").value == ''){
                  $("#id_start_time").css({'border':'solid', 'border-color': 'red', 'border-width': '1px', 'border-radius': '2px'})
                }
              });
    $(".layui-layer-btn0").click(function () {
                if (document.getElementById("id_end_time").value == ''){
                  $("#id_end_time").css({'border':'solid', 'border-color': 'red', 'border-width': '1px', 'border-radius': '2px'})
                }
              });

    };
    form.on('select(transaction)', function(data){
      listenChange(data.value)
    });
  });
</script>