Ir al contenido principal

JQuery - Timepicker & Datepicker

Timepicker & Datepicker


I took a component from http://trentrichardson.com/examples/timepicker/ to display a calendar that used Jquery.

The steps to install the JQuery plugin

1) Include in your file the following files, this can be done downloading the files or doing the references.

Downloading the Files.
    <script src="../Scripts/Mail/jquery-2.0.2.min.js"></script>
    <script src="../Scripts/Mail/jquery-ui.min.js"></script>
    <link href="../Content/jquery-ui.css" rel="stylesheet" />    
    <script src="../Scripts/Mail/jquery-ui-timepicker-addon.js"></script>

Includinf the references.
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/hot-    sneaks/jquery-ui.css" />
    <script src="pathtojs/jquery-ui-timepicker-addon.js"></script>

2) For this plugin additionally request include the following style.

.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }

3) Include the following function in your file
<script type="text/javascript">
   $(function() { $('#selectedDateTime').datetimepicker(); });
</script>

4) Finally include the element.
<input type="text" id="selectedDateTime" />

5) Optionally if you want to customize the format include in the script section
$('#selectedDateTimeWithFormat').datetimepicker({ dateFormat: 'dd-mm-yy', timeFormat: 'hh:mm:ss' });

Comentarios

Publicar un comentario

Entradas populares de este blog

C# Using tabs

To use tabs in C# use the TabContainer element from AjaxControlToolkit Include AjaxControlToolkit  Include in the Web.config file, inside the tag <system.web> the following code  <pages>       <controls>         <add tagPrefix="ajaxCTK" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit"/>       </controls>     </pages>   Include TabContainer element First  include TabContainer element that is the section where all the tabs will be displayed. <ajaxCTK:TabContainer ID="TabContainerUpdate" runat="server"                 Height="800"                 CssClass="ajax__tab_style"> </ajaxCTK:TabContainer> Second per each tab include the following code corresponding to each ...
Publicar un comentario
Leer más

Rails - Basic Steps III

pValidations Validations are a type of ActiveRecord Validations are defined in our models Implement Validations Go to   root_app/app/models Open files  *.rb for each model Mandatory field validates_presence_of   :field Ex:   validates_presence_of    :title Classes The basic syntax is class MyClass        @global_variable                def my_method              @method_variable        end end Create an instance myInstance = MyClass.new Invoke a mehod mc.my_method class() method returns the type of the object In Ruby, last character of method define the behavior If ends with a question -> return a boolean value If ends with an exclamation -> change the state of the object Getter / Setter method def global_variable       return @global_variable end ...
Publicar un comentario
Leer más

Python create package

Create a root folder Create a sub-folder "example_pkg" that contains the funtionallity packaging_tutorial/ example_pkg/ __init__.py In the root folder create the following structure  packaging_tutorial/ example_pkg/ __init__.py tests/ setup.py LICENSE README.md in the setup.py contains the configuration of the packages your package is found by find_packages() import setuptools with open ( "README.md" , "r" ) as fh : long_description = fh . read () setuptools . setup ( name = "example-pkg-YOUR-USERNAME-HERE" , # Replace with your own username version = "0.0.1" , author = "Example Author" , author_email = "author@example.com" , description = "A small example package" , long_description = long_description , long_description_content_type = "text/markdown" , url = "https://github.com/pypa/sam...
Publicar un comentario
Leer más