cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container">
  <div class="row styling">
      <h3><strong>Bootstrap Datepicker</strong></h3><br>
      <div class='col-sm-offset-4 col-sm-4'>
        <div class="form-group">
          <div class='input-group date' id='datetimepicker1'>
            <input type='text' class="form-control input-lg" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
          </div>
        </div>
        <p class="help-block"><strong>Date format:</strong> yyyy-mm-dd</p>
      </div>
    </div><br>
  
    <div class="row">
      <pre>
        <ul>
          <h4><strong>Add External CSS</strong></h4>
          <li>//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css</li>
          <li>https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css</li>
          <li>//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css</li>
        </ul>
      </pre>
    </div><br>
  
    <div class="row">
      <pre>
        <ul>
          <h4><strong>Add External JavaScript</strong></h4>
          <li>//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js</li>
          <li>//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js</li>
          <li>//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js</li>
          <li>//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js</li>
        </ul>
      </pre>
    </div>
  
  </div>
            
          
!
            
              /* Just for styling */
.styling {
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  /* height: 150px;
  overflow: auto; */
}
            
          
!
            
               $(function () {
   var bindDatePicker = function() {
		$(".date").datetimepicker({
        format:'YYYY-MM-DD',
			icons: {
				time: "fa fa-clock-o",
				date: "fa fa-calendar",
				up: "fa fa-arrow-up",
				down: "fa fa-arrow-down"
			}
		}).find('input:first').on("blur",function () {
			// check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.
			// update the format if it's yyyy-mm-dd
			var date = parseDate($(this).val());

			if (! isValidDate(date)) {
				//create date based on momentjs (we have that)
				date = moment().format('YYYY-MM-DD');
			}

			$(this).val(date);
		});
	}
   
   var isValidDate = function(value, format) {
		format = format || false;
		// lets parse the date to the best of our knowledge
		if (format) {
			value = parseDate(value);
		}

		var timestamp = Date.parse(value);

		return isNaN(timestamp) == false;
   }
   
   var parseDate = function(value) {
		var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/);
		if (m)
			value = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2);

		return value;
   }
   
   bindDatePicker();
 });
            
          
!
999px
Loading ..................

Console