list_dph.pt 2.07 KB
<html metal:use-macro="load: ./base.pt">
<div metal:fill-slot="content">
  <style>
    .dataTables_filter .input-group-addon {
      width: 120px !important;
      padding-left: 10px !important;
    }
  </style>
  <div class="widget-body"><!-- widget-body -->

    <div class="dataTables_wrapper form-inline no-footer">

      <div class="dt-toolbar" style="padding: 0; margin-bottom: 5px; background: #fff; border-bottom: none;">
        <!-- dt-toolbar -->
        <div class="col-xs-12 col-sm-10">
          <div class="dataTables_filter">
            <label> <!-- Tgl.realisasi -->
              <span class="input-group-addon" id="label-awal" style="width: 120px;">Tgl. Penerimaan</span>
              <input class="form-control" id="awal" name="awal" type="text" value="${request.session['awal']}" />
              <span class="input-group-addon" id="label-akhir" style="width: 50px;">s.d.</span>
              <input class="form-control" id="akhir" name="akhir" type="text" value="${request.session['akhir']}" />
            </label>
          </div>
        </div>
      </div> <!-- dt-toolbar -->
    </div>
  </div>
  <div class="jarviswidget jarviswidget-color-blueLight"> <!-- jarviswidget -->
    <div tal:content="structure form"></div>
  </div>
  <tal metal:fill-slot="scripts">
    <link href="${home}/static/v3/js/plugin/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <script src="${home}/static/v3/js/plugin/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="${home}/static/v3/js/plugin/bootstrap-timepicker/bootstrap-timepicker.min.js"></script>
    <script>

      $(document).ready(function () {
        var home = "${home}";
        $('#awal, #akhir').datepicker({
          format: "dd-mm-yyyy"
        });

        $("#awal, #akhir").change(function () {
          var awal = $("#awal").val();
          var akhir = $("#akhir").val();
          window.location = home + "/pbbm/dph?awal=" + awal + "&akhir=" + akhir;
        });

      });


    </script>
  </tal>
</div>

</html>