jQuery Plugins: XDSoft DateTimePicker and Jssor Slider

It is quite common that we need our users to input date and time on the web pages. For example, when you search for flight schedules, you normally need to tell the search engine your journey period.

The Datepicker offered by jQuery UI is normally what people will use in their website. It offers a user-friendly way for the user to input a date from a popup calendar. However, it has a disadvantage. Datepicker doesn’t come with an interface for users to input the time. Workaround is normally to provide two more drop-down boxes for user to choose the hour and minute. However, this means that users have to click more times to input both date and time.

DateTimePicker

To solve the problem, I use the DateTimePicker, a cool jQuery plugin from XDSoft. Besides the calendar view, it also has a timer view which enables us to specify the time.

To use the plugin, first I need to include the DateTimePicker CSS file as well as the DateTimePicker JavaScript library.

After that, I need to bind the plugin to all HTML elements having “date_field” as their class.

$(function () {
    $('.date_field').datetimepicker({ format: 'Y-m-d H:i', step: 15, minDate: '0' });
}

In the sample code above, the step defines the gap (in terms of minutes) between two time selections in the plugin. The value of minDate is set to 0 so that the earliest date the user can choose is today.

That’s all. Now you can use the plugin in a text field for user to input both date and time.

@Html.EditorFor(model => model.IncidentTime, 
    new { 
        htmlAttributes = new { 
            @class = "form-control date_field", 
            @placeholder = "Incident Date & Time", 
            @style = "max-width: 100%" 
        } 
    }
)

More Options in DateTimePicker

There are many options available in the plugin. I will just highlight some that I use often here.

If you would like to restrict the time options that can be chosen, you can use the allowTimes together with a defaultTime value as demonstrated below.

$('.date_field_2').datetimepicker({
    format: 'Y-m-d H:i', step: 15, defaultTime: '09:00', minDate: '0',
    allowTimes: [
        '09:00', '09:15', '09:30', '09:45',
        '10:00', '10:15', '10:30', '10:45',
        '11:00', '11:15', '11:30', '11:45',
        '12:00'
    ]
});

The time picker will then only show the 13 options specified in the code above. If user doesn’t pick any of the time option, then by default the chosen time will be 9am.

In case you would like to hide the time picker, you can do so by setting timepicker to false.

$('.date_field').datetimepicker({ format: 'Y-m-d', timepicker: false });

Some users sent their feedback to me about the visibility of time picker on the plugin. To them, the time picker is not so obvious. Hence, I change to use a brighter background colour in one of the class definition in jquery.datetimepicker.css.

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div {
    background: #5cb85c; /* Updated here */
    border-top: 1px solid #ddd;
    color: #666;
    font-size: 12px;
    text-align: center;
    border-collapse: collapse;
    cursor: pointer;
    border-bottom-width: 0;
    height: 25px;
    line-height: 25px;
}

Image Slider

Jssor Slider is another free jQuery plugin that I like. It provides a convenient way to do image slider.

I tried it out in my MVC project. Basically, what I do is just use one of the examples as reference, and then include one JS library (Suggestion from the author: Use ‘jssor.slider.mini.js’ (40KB for jQuery Plugin) or ‘jssor.slider.min.js’ (60KB for No-jQuery Version) for release) and some other JavaScript codes together with some inline CSS. I don’t want to talk much about it here because, hey, they have hosted the code and samples on GitHub for public to download!

Summer 2015 Self-Learning Project

This article is part of my Self-Learning in this summer. To read the other topics in this project, please click here to visit the project overview page.