How to disable Weekends in Jquery Datetime picker

In this post, I will demonstrate how to disable week ends using jQuery Datetime picker.
There are different ways of implementing the same functionality. In this post, I will show case basic way of disabling weekends using jquery.

Prerequisites

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css

I'm using beforeShowDay inbuilt function to implement this:

HTML:

JavaScript:
$("#datepicker").datepicker({

    beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day != 6 && day != 0)]; // 1- saturday, 0- sunday
    }
});

Or you can get the same functionality by providing a inbuilt function as the parameter.

$(function() {
   $( "#datepicker" ).datepicker({
     beforeShowDay: $.datepicker.noWeekends
   });
 });

How do I get the text value of a selected option

Consider following option control to get the selected value and the text from jQuery. Same functionality can be done using javascripts. For more information please refer  Get asp.net drop down list Selected value and text using javascript.

<select id="drpControl">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option selected="true" value="3">Ms</option>
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>

If you want to get the selected string "Ms", you would do that in the following way:

$("#drpControl option:selected").text();
// returns Ms

If you want to get the selected value of "Ms", you would do that in the following way:

$("#drpControl option:selected").Val();
// returns 3

Create a simple jQuery Slider

By using jQuery slider, I have customized the Css styles to give a different look. Click here to refer the jQuery API documentation. This will allow your users to select a value from a numerical range by simply dragging a slider.

Step 01:

Add following  script links to the header tags.

<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

Will add a div to create a slider on it:

 <h2>Basic Example</h2>
 <div id="slider" class="slider"></div>

Within the Script block add following code to create a slider:

<script>
   $( "#slider" ).slider({
    value: 10,
    min: 0,
    max: 10,
    step: 5
  });

 for (var i = 0; i <= 10; i = i + 5) {
      var el = $('' + (i) + '').css('left', (i / 10 * 100 - 5) + '%');
      $("#slider").append(el);
    }
 
  

To make the slider more nice change default css class:

#slider label {
        position: absolute;
        width: 60px;
        margin-left: -10px;
        text-align: center;
        margin-top: 10px;
        font-size: 10px;
    }

    #slider {
        margin-left: 20px;
        width: 50%;
    }

    .ui-slider-horizontal {
        background: -webkit-linear-gradient(top, #bbb, #ddd);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
        border-radius: 8px;
        border: 1px solid #aaa;
        height: 4px;
    }

    .ui-state-default, .ui-widget-content .ui-state-default {
        background: #8DCA09;
        background: -webkit-linear-gradient(top, #8DCA09, #72A307);
        background: -moz-linear-gradient(top, #8DCA09, #72A307);
        background: linear-gradient(top, #8DCA09, #72A307);
        -webkit-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
        -moz-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
        box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        border: 1px solid #496805;
        width: 16px;
        height: 16px;
        margin-top: -2px;
    }

    .ui-slider-handle:hover {
        background: -webkit-linear-gradient(top, #8DCA09, #8DCA09);
        cursor: pointer;
    }

    .ui-slider-handle:focus {
        outline: 0;
    }

    .ui-slider .ui-slider-handle:before {
        content: '';
    }

You can get a working solution here

Final Result: