Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>jQuery Date Range Picker Demo</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-date-range-picker/0.16.1/daterangepicker.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-date-range-picker/0.16.1/jquery.daterangepicker.min.js"></script>
 
        <style type="text/css">
        #wrapper
        {
            width:800px;
            margin:0 auto;
            color:#333;
            font-family:sans-serif;
            line-height:1.5;
            font-size:14px;
        }
        .demo { margin:30px 0;}
        .date-picker-wrapper .month-wrapper table .day.lalala { background-color:orange; }
        .options { display:none; border-left:6px solid #8ae; padding:10px; font-size:12px; line-height:1.4; background-color:#eee; border-radius:4px;}
        </style>
    </head>
    <body>
   <input type="hidden" id="date-range12" size="40" value="">
    <div id="date-range12-container" style="width:100%;"></div>
</body>
​
</html>
 
$(document).ready(function () {
​
               $('#date-range12').dateRangePicker(
                   {
                       inline: true,
                       container: '#date-range12-container',
                       alwaysOpen: true,
                       format: 'DD.MM.YYYY',
                       separator: ' to ',
                       language: 'tr',
                       showTopbar: false,
                       showWeekNumbers: false,
                       extraClass: 'date-range-picker19',
                       monthSelect: true,
                       yearSelect: true,
                       customArrowPrevSymbol: '<a href="#" class="fa-blok fa fa-arrow-circle-left"></a>',
                       customArrowNextSymbol: '<a href="#" class="fa-blok fa fa-arrow-circle-right"></a>',
                       //maxDays: 7,
                       //minDays: 3,
                       startDate: moment(),
                       startOfWeek: 'monday',
                       customTopBar: 'Tarih Aralığı Seçiniz',
                       showDateFilter: function (time, date) {
                           return '<div style="padding:0 5px;">\
                                    <span style="font-weight:bold">'+ date + '</span>\
                                    <div style="opacity:0.3;">$'+ Math.round(Math.random() * 999) + '</div>\
                                </div>';
                       }
​
                   });
           });
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers