Jquery Plugin For MomentJS and Bootsrap 5 - Date Picker

Posted by bg teuku On Wednesday, October 25, 2023 0 comments
Are You looking for plugin date picker for bootrap 5 and momentjs? you are on right way, because i was building a plugin with jquery where can connect to amazing bootsrap 5 and amazing momentjs. this plugin made diferent with each plugin, because when user click date picker button, this plugin not open pupop but will open modal from bootsrap so user can more focus and trouble when pick a date.


This plugin is a must-have for developers who are working with Bootstrap 5 and Moment.js. It provides a user-friendly date picker that can be easily integrated into any web application. With its sleek design and intuitive interface, users can easily select dates and times with just a few clicks. The plugin is highly customizable, allowing developers to tailor it to their specific needs. It is also lightweight and fast, ensuring that it won't slow down your website. Overall, this plugin is a great addition to any web development toolkit.

Let's take a look at a tutorial on how to use this plugin.,

 1. Firstly, make sure that your website has jQuery, Bootstrap 5, and Moment.js installed.

 2. Next, you need to add the date picker plugin.
3.To do this, put an input tag with the attribute data-datePicker="true" where you want the date picker to appear.




 4.If successful, the input tag will be replaced with an input that includes the date picker.
5 Finally, click on the calendar icon to open the modal date picker and select the date you want. That's it!
READ MORE
Location: 859F922J+4M

Upload multiple file with codeigniter and ajax serta menggunkan drag file tutorial

Posted by bg teuku On Saturday, May 7, 2016 0 comments


require:

demo

description:
Drag and select multi file and showing progres when upload with ajax and codeigniter
here is singgle page where load from view folder of codeigniter 
<!doctype html>
<html>
<head>
    <link href="<?php echo base_url() ?>asset/bootsrap/css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript" src="<?php echo base_url() ?>/asset/bootsrap/js/jquery.js"></script>
     <script src="<?php echo base_url() ?>asset/bootsrap/js/bootstrap.min.js"></script>
       <script src="<?php echo base_url() ?>asset/admin/bootstrap-filestyle.js"></script>
</head>
<body>
<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" ><a href="#upload" aria-controls="upload" role="tab" data-toggle="tab">Upload</a></li>
    <li role="presentation" class="active"><a href="#galery" aria-controls="galery" role="tab" data-toggle="tab">Galery</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in " id="upload">
 <br>
   <div id="files" class="row" rel="" >
    </div>
   <div id="holder" style="width:100%; height:200px; border: 5px dashed #ccc" id="holder">
  <div class="drag">Drag</div>
  <div class="drag or">or</div>
  <div class="drag">
   <input class="filestyle drag" type="file" id="userfile" name="userfile" multiple />
  </div>
   </div>
 </div>
    <div role="tabpanel" class="tab-pane fade in active" id="galery">..b.</div>
  </div>
</div >
</body>
</html>
 <style>
 .img-upload{
width:208px;
height:208px;
float:left;
background:#eee;
padding:5px 5px 5px 5px;
margin:3px;
 }
 .img-upload >img{
 display: block;
    display: block;
   margin: auto auto;
 
 }
 .box-opload{
 float:left;
 width:208px;
 float:left;
 margin:3px;
 }
 .progress{
 position:relative;
 top:-7px;
 width:200px;
 height:5px;
 margin-left:8px;

 }
 .progress >.progress-bar{
 height:4px;
 position:relative !important;
 bottom:0px;
 }
  #holder.hover { border: 10px dashed #0c0 !important; }
  .boxfile{
  align-items: center;
  display: flex;
  justify-content: center;
  top:50px;
  position:relative;
  height:40px;
  width:300px;
  }
  .drag{
  font-size:30px;
  color:#ccc;
   align-items: center;
  display: flex;
  justify-content: center;
  }

</style>
<script>
$(".filestyle").filestyle({input: false,buttonText: " pilih"});
var storedFiles = [];
$(document).ready(function() {
    $("#userfile").on("change", handleFileSelect); 
    var holder = document.getElementById('holder');
 holder.ondragover = function () { this.className = 'hover'; return false; };
 holder.ondragend = function () { this.className = ''; return false; };
 holder.ondrop = function (e) {
 this.className = '';
 e.preventDefault();
 var files = e.dataTransfer.files;
 var filesArr = Array.prototype.slice.call(files);
 
  aturfile(e,filesArr);
 }
    });
function aturfile(e,filesArr) {   
 var img = document.createElement("img");
 var jumlah = $("#files > .box-opload").length;
 var i  = 0+jumlah;
 filesArr.forEach(function(f) {  
  i++; 
  var html = "<div class='box-opload'><div class='img-upload' id='img"+i+"' ></div><div class='progress'><div id='p"+i+"' class='progress-bar progress-bar-striped progress-bar-info active'  role='progressbar' aria-valuenow='20' aria-valuemin='0' aria-valuemax='100' style='width: 1%;'></div></div></div>";
  
        $('#files').append(html);
   
   var ext = f.name.split('.').pop().toLowerCase();
   console.log(ext);
   
   if($.inArray(ext, ['gif','png','jpg','jpeg','rar','zip']) == -1) {
     var html = "<img id='"+i+"' src='<?php echo base_url(); ?>gambar/admin/invalid.png' data-file='"+f.name+"' class='selFile img-responsive' title='Click to remove'>";
               $('#img'+i).prepend(html);
      $('#p'+i).toggleClass("progress-bar-info progress-bar-danger");
       $('#p'+i+'').css("width","100%")
     return;
   }
   
            
   
   f.id = i;
            storedFiles.push(f);
   if($.inArray(ext, ['rar','zip'])>0) {
   var html = "<img id='"+i+"' src='<?php echo base_url(); ?>gambar/admin/rar.png' data-file='"+f.name+"' class='selFile img-responsive' title='Click to remove'>";
               $('#img'+i).prepend(html);
      $('#p'+i).attr("rel",f.name);
    $('#p'+i+'').css("width","15%")
   
   }else{
            var reader = new FileReader();
           reader.onload =gambarload.bind(reader,i,img,f);
     $('#p'+i+'').css("width","5%") 
            reader.readAsDataURL(f); 
   }
        });
  
  
  
  if($('#files').attr("rel")==="on"){}else{
   $('#files').attr("rel","on");

   submitFile(e,jumlah);
  }
  }      
 
 
function  gambarload(id,img,f,e){
  img.src = e.target.result;
        var canvas = document.createElement("canvas");
        //var canvas = $("<canvas>", {"id":"testing"})[0];
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var MAX_WIDTH = 200;
        var MAX_HEIGHT =200;
        var width = img.width;
        var height = img.height;

        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }
  $('#p'+id+'').css("width","10%")
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);

        var dataurl = canvas.toDataURL("image/png");
   var html = "<img id='"+id+"' src=\"" + dataurl + "\" data-file='"+f.name+"' class='selFile img-responsive' title='Click to remove'>";
               $('#img'+id).prepend(html);
      $('#p'+id).attr("rel",f.name);
    $('#p'+id+'').css("width","15%"); 

}
function submitFile(e,i){
  
   var data = new FormData();
   console.log(storedFiles[i]);
   if(!storedFiles[i]){
  $('#files').attr("rel","");
  return;
   }
   var ext = storedFiles[i].name.split('.').pop().toLowerCase();
  if($.inArray(ext, ['rar','zip'])>0){
   var formUrl = "<?php echo base_url(); ?>home/upload_file_rar/";
  }else{
   var formUrl = "<?php echo base_url(); ?>home/upload_file/";
  }
  var id= storedFiles[i].id;
        data.append('userfile', storedFiles[i]); 
        $.ajax({
                url: formUrl,
                type: 'POST',
                data: data,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
    
                success: function(data, textSatus, jqXHR){
        var data = JSON.parse(data);
      if (data["status"]=="sukses"){
        console.log(data["info"]);
       $('#p'+id).css("width","100%") ;
       var selanjutnya= i+1;
       submitFile(e,selanjutnya)
      
      }
     
     
                     
                },
                error: function(jqXHR, textStatus, errorThrown){
                        //handle here error returned
                }
        });

   
}

function handleFileSelect(e) {
        var files = e.target.files;
        var filesArr = Array.prototype.slice.call(files);
 aturfile(e,filesArr);
}

</script>
and controller: 
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class home extends CI_Controller {
    public function __construct()
        {
            parent::__construct();
            $this->load->helper('url');
   $this->load->helper('link_aktif');
   $this->load->helper('show');
      $this->load->database();
   $this->load->model('tool_model');
   $this->load->helper(array('form', 'url'));
        }
 
 public function tes(){
 
 $this->load->view("tes");
 }
 
public function upload_file_rar(){
          $config['upload_path']          = './uploads/doc/';
                $config['allowed_types']        = '*';
                $config['max_size']             = 500000000000;
               
                $this->load->library('upload', $config);
                 if ( ! $this->upload->do_upload())
                {
     $error = array('error' => $this->upload->display_errors());
                    if (is_array($error)) {
      foreach ($error as $item) {
      $arr = array('info' => $this->upload->display_errors(),'status'=>"error");
      json_encode($arr);
      return  $arr;
      }
     }     
                }
                else
                {
     $image_data =$this->upload->data();
     $this->tool_model->resizes_thumb($image_data);
     $this->tool_model->resizes($image_data);
                     //echo $image_data["file_name"] ;
     $this->add_data_urut_upload("doc",$image_data["file_name"]);
     $arr = array('info' =>$image_data["file_name"],'status'=>"sukses","progress"=>"100%");
     echo  json_encode($arr);
      
                }


}
public function upload_file(){
          $config['upload_path']          = './uploads/original/';
                $config['allowed_types']        = 'gif|jpg|png|jpeg||zip|rar|';
                $config['max_size']             = 500000000000;
                $this->load->library('upload', $config);
                if ( ! $this->upload->do_upload())
                {
     $error = array('error' => $this->upload->display_errors());
                    if (is_array($error)) {
      foreach ($error as $item) {
      $arr = array('info' => $this->upload->display_errors(),'status'=>"error");
      json_encode($arr);
      return  $arr;
      }
     }     
                }
                else
                {
     $image_data =$this->upload->data();
     $this->tool_model->resizes_thumb($image_data);
     $this->tool_model->resizes($image_data);
                     //echo $image_data["file_name"] ;
     $this->add_data_urut_upload("image",$image_data["file_name"]);
     $arr = array('info' =>$image_data["file_name"],'status'=>"sukses","progress"=>"100%");
     echo  json_encode($arr);
      
                }
    

}

  
}
and the last is model 
}
public function resizes_thumb($upload_data) { 
 $this->load->library('image_lib');
    $config_res['source_image'] = 'uploads/original/'.$this->upload->file_name;
    $config_res['maintain_ratio'] = TRUE;
    $config_res['width'] = 60;
    $config_res['height'] = 60;
 $config_res['create_thumb'] = true;
 $config_res['thumb_marker'] = "_thumb";
 $config_res['new_image'] = "uploads/thumb/";

    $this->image_lib->initialize($config_res);

    $this->image_lib->resize();

    $this->image_lib->clear();
 
}
public function resizes($upload_data) { 
 $this->load->library('image_lib');
    $config_res['source_image'] = 'uploads/original/'.$this->upload->file_name;
    $config_res['maintain_ratio'] = TRUE;

    $config_res['height'] = 250;
 $config_res['create_thumb'] = true;
 $config_res['thumb_marker'] = "_thumb";
 $config_res['new_image'] = "uploads/post/";

    $this->image_lib->initialize($config_res);

    $this->image_lib->resize();

    $this->image_lib->clear();
}
READ MORE