docs/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="JavaScript date time picker.">
  <meta name="author" content="Chen Fengyuan">
  <title>Picker.js</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/highlightjs@9.12.0/styles/github.css">
  <link rel="stylesheet" href="css/picker.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <!--[if lt IE 9]>
  <div class="alert alert-warning alert-dismissible fade show m-0 rounded-0" role="alert">
    You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <![endif]-->

  <!-- Header -->
  <header class="navbar navbar-light navbar-expand-md">
    <div class="container">
      <a class="navbar-brand" href="./">Picker.js</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbar-collapse" role="navigation">
        <nav class="nav navbar-nav">
          <a class="nav-link" href="https://github.com/fengyuanchen/pickerjs/blob/master/README.md">Docs</a>
          <a class="nav-link" href="https://github.com/fengyuanchen/pickerjs">GitHub</a>
          <a class="nav-link" href="https://fengyuanchen.github.io">Explore</a>
          <a class="nav-link" href="https://chenfengyuan.com">About</a>
        </nav>
      </div>
    </nav>
  </header>

  <!-- Jumbotron -->
  <div class="jumbotron bg-primary text-white rounded-0">
    <div class="container">
      <div class="row">
        <div class="col-md">
          <h1>Picker.js <small class="h6">v1.2.1</small></h1>
          <p class="lead">JavaScript date time picker.</p>
        </div>
        <div class="col-md">
          <div class="carbonads">
            <script id="_carbonads_js" src="https://cdn.carbonads.com/carbon.js?serve=CKYI55Q7&placement=fengyuanchengithubio" async></script>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Content -->
  <div class="container">
    <h1>Overview</h1>
    <hr>
    <div class="row">
      <div class="col-sm-6 col-md-4">
        <h3>Demo</h3>
        <hr>
        <div class="docs-picker">
          <input type="text" class="form-control docs-date" name="date" placeholder="Pick a date and time">
          <div class="docs-picker-container"></div>
        </div>
        <br>
      </div>
      <div class="col-sm-6 col-md-4">
        <h3>Options</h3>
        <hr>
        <div class="docs-options">
          <ul class="list-group mb-2">
            <li class="list-group-item">
              <div class="form-check">
                <input type="checkbox" class="form-check-input" id="container" name="container">
                <label class="form-check-label" for="container">container</label>
              </div>
            </li>
            <li class="list-group-item">
              <div class="form-check">
                <input type="checkbox" class="form-check-input" id="controls" name="controls">
                <label class="form-check-label" for="controls">controls</label>
              </div>
            </li>
            <li class="list-group-item">
              <div class="form-check">
                <input type="checkbox" class="form-check-input" id="headers" name="headers">
                <label class="form-check-label" for="headers">headers</label>
              </div>
            </li>
            <li class="list-group-item">
              <div class="form-check">
                <input type="checkbox" class="form-check-input" id="inline" name="inline">
                <label class="form-check-label" for="inline">inline</label>
              </div>
            </li>
          </ul>
          <div class="input-group">
            <span class="input-group-prepend">
              <label class="input-group-text" for="date">date</label>
            </span>
            <input type="text" class="form-control" id="date" name="date" placeholder="null">
          </div>
          <div class="input-group">
            <span class="input-group-prepend">
              <label class="input-group-text" for="format">format</label>
            </span>
            <input type="text" class="form-control" id="format" name="format" value="YYYY-MM-DD HH:mm" placeholder="YYYY-MM-DD HH:mm">
          </div>
          <div class="input-group">
            <span class="input-group-prepend">
              <label class="input-group-text" for="language">language</label>
            </span>
            <select class="form-control" id="language" name="language">
              <option value="">(Default)</option>
              <option value="en-US">en-US</option>
              <option value="en-GB">en-GB</option>
              <option value="pl-PL">pl-PL</option>
              <option value="zh-CN">zh-CN</option>
            </select>
          </div>
          <div class="input-group">
            <span class="input-group-prepend">
              <label class="input-group-text" for="rows">rows</label>
            </span>
            <select class="form-control" id="rows" name="rows">
              <option value="1">1</option>
              <option value="3">3</option>
              <option value="5" selected>5</option>
              <option value="7">7</option>
              <option value="9">9</option>
            </select>
          </div>
        </div>
        <br>
      </div>
      <div class="col-sm-6 col-md-4">
        <h3>Methods</h3>
        <hr>
        <div class="docs-methods">
          <div class="input-group">
            <div class="input-group-prepend">
              <button type="button" class="btn btn-primary" data-method="getDate" data-related-target="#putDate">Get Date</button>
            </div>
            <input type="text" class="form-control" id="putDate">
          </div>
          <div class="input-group">
            <div class="input-group-prepend">
              <button type="button" class="btn btn-primary" data-args="[true]" data-method="getDate" data-related-target="#putDateFormatted">Get Date (formatted)</button>
            </div>
            <input type="text" class="form-control" id="putDateFormatted">
          </div>
          <button type="button" class="btn btn-block btn-primary" data-method="show">Show</button>
          <button type="button" class="btn btn-block btn-primary" data-method="pick">Pick</button>
          <button type="button" class="btn btn-block btn-primary" data-method="update">Update</button>
          <button type="button" class="btn btn-block btn-primary" data-method="reset">Reset</button>
          <button type="button" class="btn btn-block btn-danger" data-method="destroy">Destroy</button>
        </div>
      </div>
    </div>

    <h1>Examples</h1>
    <hr>

    <div class="card mb-4">
      <h4 class="card-header">Date Picker</h4>
      <div class="card-body">
        <h6>Demo</h6>
        <input type="text" class="form-control js-date-picker" value="Oct 24, 2048">
        <br>
        <h6>HTML</h6>
        <pre class="html"><code>
&lt;input type=&quot;text&quot; class=&quot;form-control js-date-picker&quot; value=&quot;Oct 24, 2048&quot;&gt;
</code></pre>
        <h6>JavaScript</h6>
        <pre class="js"><code>new Picker(document.querySelector('.js-date-picker'), {
  format: 'MMM D, YYYY',
  text: {
    title: 'Pick a date',
  },
});</code></pre>
      </div>
    </div>

    <div class="card mb-4">
      <h4 class="card-header">Time Picker</h4>
      <div class="card-body">
        <h6>Demo</h6>
        <input type="text" class="form-control js-time-picker" value="02:56">
        <br>
        <h6>HTML</h6>
        <pre class="html"><code>
&lt;input type=&quot;text&quot; class=&quot;form-control js-time-picker&quot; value=&quot;02:56&quot;&gt;
</code></pre>
        <h6>JavaScript</h6>
        <pre class="js"><code>new Picker(document.querySelector('.js-time-picker'), {
  format: 'HH:mm',
  headers: true,
  text: {
    title: 'Pick a time',
  },
});</code></pre>
      </div>
    </div>

    <div class="card mb-4">
      <h4 class="card-header">Full Picker</h4>
      <div class="card-body">
        <h6>Demo</h6>
        <input type="text" class="form-control js-full-picker" value="2048-10-24 05:12:02.056">
        <br>
        <h6>HTML</h6>
        <pre class="html"><code>
&lt;input type=&quot;text&quot; class=&quot;form-control js-full-picker&quot; value=&quot;2048-10-24 05:12:02.056&quot;&gt;
</code></pre>
        <h6>JavaScript</h6>
        <pre class="js"><code>new Picker(document.querySelector('.js-full-picker'), {
  controls: true,
  format: 'YYYY-MM-DD HH:mm:ss.SSS',
  headers: true,
});</code></pre>
      </div>
    </div>

    <div class="card mb-4">
      <h4 class="card-header">Month Picker</h4>
      <div class="card-body">
        <h6>Demo</h6>
        <input type="text" class="form-control js-month-picker" value="November">
        <br>
        <h6>HTML</h6>
        <pre class="html"><code>
&lt;input type=&quot;text&quot; class=&quot;form-control js-month-picker&quot; value=&quot;November&quot;&gt;
</code></pre>
        <h6>JavaScript</h6>
        <pre class="js"><code>new Picker(document.querySelector('.js-month-picker'), {
  format: 'MMMM',
  text: {
    title: 'Pick a month',
  },
});</code></pre>
      </div>
    </div>

    <div class="card mb-4">
      <h4 class="card-header">Inline Picker</h4>
      <div class="card-body">
        <h6>Demo</h6>
        <div class="js-inline-picker">2048-10-24 05:12</div>
        <br>
        <h6>HTML</h6>
        <pre class="html"><code>
&lt;div class=&quot;js-inline-picker&quot;&gt;2048-10-24 05:12&lt;/div&gt;
</code></pre>
        <h6>JavaScript</h6>
        <pre class="js"><code>new Picker(document.querySelector('.js-inline-picker'), {
  controls: true,
  inline: true,
});</code></pre>
      </div>
    </div>

    <div class="card mb-4">
      <h4 class="card-header">Mini Picker</h4>
      <div class="card-body">
        <h6>Demo</h6>
        <input type="text" class="form-control sr-only js-mini-picker">
        <div class="js-mini-picker-container"></div>
        <br>
        <h6>HTML</h6>
        <pre class="html"><code>
&lt;input type=&quot;text&quot; class=&quot;form-control sr-only js-mini-picker&quot;&gt;
&lt;div class=&quot;js-mini-picker-container&quot;&gt;&lt;/div&gt;
</code></pre>
        <h6>JavaScript</h6>
        <pre class="js"><code>new Picker(document.querySelector('.js-mini-picker'), {
  container: '.js-mini-picker-container',
  inline: true,
  rows: 1,
});</code></pre>
      </div>
    </div>

    <div class="card mb-4">
      <h4 class="card-header">Super Picker / I18n</h4>
      <div class="card-body">
        <h6>Demo</h6>
        <input type="text" class="form-control js-super-picker" value="2020年2月20日2时20分">
        <div class="js-super-picker-container"></div>
        <br>
        <h6>HTML</h6>
        <pre class="html"><code>
&lt;input type=&quot;text&quot; class=&quot;form-control js-super-picker&quot; value=&quot;2020年2月20日2时20分&quot;&gt;
&lt;div class=&quot;js-super-picker-container&quot;&gt;&lt;/div&gt;
</code></pre>
        <h6>CSS</h6>
        <pre class="css"><code>.js-super-picker-container .picker-years {
  width: 28%;
}</code></pre>
        <h6>JavaScript</h6>
        <pre class="js"><code>new Picker(document.querySelector('.js-super-picker'), {
  container: '.js-super-picker-container',
  format: 'YYYY年M月D日H时m分',
  increment: {
    minute: 10,
  },
  text: {
    title: '选择日期时间',
    cancel: '取消',
    confirm: '确认',
  },
  translate(type, text) {
    const suffixes = {
      year: '年',
      month: '月',
      day: '日',
      hour: '时',
      minute: '分',
    };

    return Number(text) + suffixes[type];
  },
});</code></pre>
      </div>
    </div>

  </div>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <p class="heart"></p>
      <nav class="nav flex-wrap justify-content-center mb-3">
        <a class="nav-link" href="https://github.com/fengyuanchen/pickerjs">GitHub</a>
        <a class="nav-link" href="https://github.com/fengyuanchen/pickerjs/releases">Releases</a>
        <a class="nav-link" href="https://github.com/fengyuanchen/pickerjs/blob/master/LICENSE">License</a>
        <a class="nav-link" href="https://chenfengyuan.com">About</a>
      </nav>
    </div>
  </footer>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://unpkg.com/highlightjs@9.12.0/highlight.pack.js"></script>
  <script src="https://fengyuanchen.github.io/shared/google-analytics.js"></script>
  <script src="js/picker.js"></script>
  <script src="js/picker.en-US.js"></script>
  <script src="js/picker.en-GB.js"></script>
  <script src="js/picker.pl-PL.js"></script>
  <script src="js/picker.zh-CN.js"></script>
  <script src="js/main.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</body>
</html>