Select entire week and put week interval in input field

I have used Bootstrap datetime picker in my project ran into same problem like yours When trying to select the weeks.
Got the below Solution on my own you can try it.
Required Files :

  1. Bootstrap.css
  2. Bootstrapdatetime picker css(You can use only datepicker instead of datetime)
  3. jquery.js
  4. Bootstrap.js
  5. moment.js
  6. Bootstrap Date time Picker js(Again you can use only datepicker instead of datetime)


<div class="container">
    <div class="row">
        <div class="col-sm-6 form-group">
            <div class="input-group" id="DateDemo">
              <input type='text' id='weeklyDatePicker' placeholder="Select Week" />

JS : Used the moment.js for calculating the start and end of the week.

//Initialize the datePicker(I have taken format as mm-dd-yyyy, you can have your own)
    format: 'MM-DD-YYYY'
//Get the value of Start and End of Week
$('#weeklyDatePicker').on('dp.change', function (e) {
    value = $("#weeklyDatePicker").val();
    firstDate = moment(value, "MM-DD-YYYY").day(0).format("MM-DD-YYYY");
    lastDate =  moment(value, "MM-DD-YYYY").day(6).format("MM-DD-YYYY");
    $("#weeklyDatePicker").val(firstDate + "   -   " + lastDate);


.bootstrap-datetimepicker-widget tr:hover {
    background-color: #808080;

Link to Working Code in JSFiddle :

How to Add a Date Picker to a Bootstrap Form

This tutorial will teach you how to add a date picker to your form using bootstrap. A date picker is an interactive dropdown that makes it easy to choose the date from a calendar instead of typing it manually. It’s a great way to avoid user errors because you can see the corresponding day of the week for each date. Plus it gives your form a little extra interactive shine!

Step 1: Create a Date Picker

<!DOCTYPE html>
<html >
<meta charset="UTF-8">
<title>Simple Bootstrap datepicker example</title>
<link rel='stylesheet prefetch' href=''>
<link rel='stylesheet prefetch' href=''>
<link rel='stylesheet prefetch' href=''>
 <div class="container">
 <div class="row">
 Date formats: yyyy-mm-dd, yyyymmdd, dd-mm-yyyy, dd/mm/yyyy, ddmmyyyyy
 <br />
 <div class="row">
 <div class='col-sm-3'>
 <div class="form-group">
 <div class='input-group date' id='datetimepicker1'>
 <input type='text' class="form-control" />
 <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
 <script src=''></script>
<script src=''></script>
<script src=''></script>
<script src=''></script>
$(function () {
   var bindDatePicker = function() {
			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');
   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;

How to make a responsive youtube iframe video

To scale a YouTube video to fit any browser or tablet/mobile device for responsive design you can use either a CSS or Javascript solution to accomplish the goal.
This example uses a CSS solution, you need to add a couple of CSS styles in your main CSS file.
Here is what a typical YouTube embed code looks like, with fixed width and height:

<iframe width="560" height="315" src=""
 frameborder="0" allowfullscreen></iframe>

It would be nice if we could just give it a 100% width, but it won’t work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):

<div class="container">
 <iframe src=""
 frameborder="0" allowfullscreen class="video"></iframe>

And use the following CSS:

.container {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;
 .video {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

How this works: The container element is given a zero height and a percentage bottom padding. The percentage bottom padding is a percentage of the container width, so that gives it a fixed aspect ratio. But in order to get the iframe to show up inside the zero-height container, you need to make the container relative and the iframe absolute, positioned inside the div.