start date end date tmepicker

start date end date tmepicker

by Ruchika Sharma

HTML

<script src="https://raw.github.com/wvega/timepicker/master/jquery.timepicker.js"></script>
<h1>jQuery TimePicker Demo</h1>

<p>The dropdown starts using <code>HH:mm</code> as the timeFormat. Click the input field to see it.<p/>
    
    <p>As of version 1.2 is easy to change the timepicker options using the <code>option</code> method. Pressing the button will change the <code>timeFormat</code> option; the function associated to the button's click event shows how.</p>
    
    <p>Using the <code>change</code> callback several timepickers can be linked together. In this temo when a value is selected in the first timepicker it becomes the new value for startTime option of the second timepicker, constraining the elements shown in the dropdown.</p>
    
    <br/>

    <div>
        <input id="tp1" class="timepicker" name="timepicker" />
        <input class="change-format" data-format="HH:mm:ss p" type="button" value="Change timeFormat option to HH:mm:ss p" />
    </div>
    
    <br/><br/>
    
    <div>
        <input id="tp2" class="timepicker" name="timepicker" />
        <input class="change-format" data-format="H:mm" type="button" value="Change timeFormat option to H:mm" />
    </div>

<a href="http://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

CSS

.ui-timepicker-container {
    position: absolute;
    overflow: hidden;
}

.ui-timepicker {
    display: block;
    height: 200px;
    text-align: center;
    list-style: none outside none;
    overflow: auto;
    overflow-x: hidden; /* IE */
    margin: 0;
    padding: 0 0 0 1px;
}
.ui-timepicker-standard {
    /* .ui-widget */
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
    /* .ui-widget-content */
    background-color: #FFF;
    border: 1px solid #AAA;
    color: #222;
    /* .ui-menu */
    margin: 0;
    padding: 2px;
}
.ui-timepicker-standard a {
    /* .ui-widget-content a */
    color: #222;
}
.ui-timepicker-standard .ui-state-hover {
    /* .ui-state-hover */
    background-color: #DADADA;
    border: 1px solid #999;
    font-weight: normal;
    color: #212121;
}
.ui-timepicker-standard .ui-menu-item {
    /* .ui-menu .ui-menu-item */
    /*clear: left;
    float: left;*/
    margin: 0;
    padding: 0;
    /*width: 100%;*/
}
.ui-timepicker-standard .ui-menu-item a {
    /* .ui-menu .ui-menu-item a */
    display: block;
    padding: 0.2em 0.4em;
    line-height: 1.5;
    text-decoration: none;
}
.ui-timepicker-standard .ui-menu-item a.ui-state-hover {
    /* .ui-menu .ui-menu-item a.ui-state-hover */
    font-weight: normal;
    margin: -1px -1px -1px -1px;
}
 .ui-timepicker-corners, .ui-timepicker-corners .ui-corner-all {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.ui-timepicker-hidden {
    /* .ui-helper-hidden */
    display: none;
}

body {
    background: #EFEFEF;
    padding: 20px;
}
h1 {
    font-weight: bold;
    margin-top: 100px;
}
p {
    margin: 10px 0;
}

JavaScript

$(document).ready(function(){
    // initialize both timepickers at once
    $('input.timepicker').timepicker({
        timeFormat: 'hh:mm p',
        // year, month, day and seconds are not important
        minTime: new Date(0, 0, 0, 8, 0, 0),
        maxTime: new Date(0, 0, 0, 15, 0, 0),
        // time entries start being generated at 6AM but the plugin 
        // shows only those within the [minTime, maxTime] interval
        startHour: 6,
        // the value of the first item in the dropdown, when the input
        // field is empty. This overrides the startHour and startMinute 
        // options
        startTime: new Date(0, 0, 0, 8, 20, 0),
        // items in the dropdown are separated by at interval minutes
        interval: 10
    });
    
    // change select time in timepicker-2. 
    $('#tp2').timepicker().setTime('13:15');
    
    // change select time in timepicker-1. 
    //
    // calling the constructor on an already initialized
    // timepicker will return an object with access to TimePicker
    // API methods.
    //
    // setTime() will return the same object so it's chainable
    $('#tp1').timepicker()
        .setTime('11:40a')
        .option('change', function(time) {
            // update startTime option in timepicker-2
            $('#tp2').timepicker('option', 'startTime', time);
        });
    
    $('input.change-format').click(function() {
       
        var input = $(this),
            timepicker = input.closest('div').find('.timepicker'),
            instance = timepicker.timepicker();
        instance.option('timeFormat', $(this).data('format'));
        console.log(instance.element);
    });
});