Jquery Date Time Picker
17:17
Introduction
The purpose of this article to show Date & Time using jquery.Using Js & CSS
<script src="/Scripts/jquery.js"></script> <script src="/Scripts/jquery.datetimepicker.full.min.js"></script> <link href="/Scripts/jquery.datetimepicker.min.css" rel="stylesheet" /> <script src="/Scripts/jquery.timepicker.min.js"></script> <link href="/Scripts/jquery.timepicker.css" rel="stylesheet" />
Test.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="JqueryDateTimePicker.Test" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
h3 {
color: #5e5959;
padding: 5px;
margin-top: 0;
margin-bottom: 0;
}
input[type=text] {
width: 200px;
padding: 5px;
}
div.in1 {
margin-left:100px;
display: inline-block;
}
div.in2 {
margin-left:100px;
display: inline-block;
}
.main {
margin-left:20%;
margin-top: 2%;
margin-right:16%;
padding:10px;
border:1px solid #3433ce;
}
h2 {
margin-left:20%;
margin-right:16%;
}
</style>
</head>
<body>
<h2>Jquery Date Time Picker:</h2>
<div class="main">
<div class="in1">
<h3>Date_time_picker:</h3>
<input type="text" value="" id="datetimepicker" /><br><br>
<h3>Mask_date_time_picker:</h3>
<input type="text" value="" id="datetimepicker_mask" /><br><br>
<h3>Time_picker:</h3>
<input type="text" id="datetimepicker1" /><br><br>
<h3>Time_picker_12 am/pm:</h3>
<input type="text" id="datetimepicker12" /><br><br>
<h3>Date_picker:</h3>
<input type="text" id="datetimepicker2" /><br><br>
</div>
<div class="in2">
<h3>Disable_all_weekend:</h3>
<input type="text" id="datetimepicker9" />
<h3>Default_date_and_time:</h3>
<input type="text" id="default_datetimepicker" />
<h3>Disable_specific_dates:</h3>
<p>Disable the dates 2 days from current date.</p>
<input type="text" id="datetimepicker11" />
<h3>Dark_theme:</h3>
<input type="text" id="datetimepicker_dark" />
<h3>Date_time_format_and_locale:</h3>
<div>
<select id="datetimepicker_format_locale">
<option value="en">English</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="uk">Ukrainian</option>
<option value="fr">French</option>
<option value="es">Spanish</option>
</select>
<input type="text" value="D, l, M, F, Y-m-d H:i:s" id="datetimepicker_format_value" />
</div>
<div style="margin:10px;"></div>
<div>
<input type="button" value="applay =>" id="datetimepicker_format_change" />
<input type="text" id="datetimepicker_format" class="input input-wide" />
</div>
</div>
</div>
<script src="/Scripts/jquery.js"></script>
<script src="/Scripts/jquery.datetimepicker.full.min.js"></script>
<link href="/Scripts/jquery.datetimepicker.min.css" rel="stylesheet" />
<script src="/Scripts/jquery.timepicker.min.js"></script>
<link href="/Scripts/jquery.timepicker.css" rel="stylesheet" />
<script>
$.datetimepicker.setLocale('en');
$('#datetimepicker_format').datetimepicker({ value: '2015/04/15 05:03', format: $("#datetimepicker_format_value").val() });
console.log($('#datetimepicker_format').datetimepicker('getValue'));
$("#datetimepicker_format_change").on("click", function (e) {
$("#datetimepicker_format").data('xdsoft_datetimepicker').setOptions({ format: $("#datetimepicker_format_value").val() });
});
$("#datetimepicker_format_locale").on("change", function (e) {
$.datetimepicker.setLocale($(e.currentTarget).val());
});
$('#datetimepicker').datetimepicker({
dayOfWeekStart: 1,
lang: 'en',
disabledDates: ['1986/01/08', '1986/01/09', '1986/01/10'],
startDate: '1986/01/05'
});
$('#datetimepicker').datetimepicker({ value: '2015/04/15 05:03', step: 10 });
$('#default_datetimepicker').datetimepicker({
formatTime: 'H:i',
formatDate: 'd.m.Y',
//defaultDate:'8.12.1986', // it's my birthday
defaultDate: '+03.01.1970', // it's my birthday
defaultTime: '10:00',
timepickerScrollbar: false
});
$('#datetimepicker_mask').datetimepicker({
mask: '9999/19/39 29:59'
});
$('#datetimepicker1').datetimepicker({
datepicker: false,
format: 'H:i',
step: 5
});
$('#datetimepicker12').timepicker({ 'step': 5 });
$('#datetimepicker2').datetimepicker({
//yearOffset: 222,
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d'
//minDate: '-1970/01/02', // yesterday is minimum date
//maxDate: '+1970/01/02' // and tommorow is maximum date calendar
});
$('#datetimepicker9').datetimepicker({
onGenerate: function (ct) {
$(this).find('.xdsoft_date.xdsoft_weekend')
.addClass('xdsoft_disabled');
},
weekends: ['01.01.2014', '02.01.2014', '03.01.2014', '04.01.2014', '05.01.2014', '06.01.2014'],
timepicker: false
});
var dateToDisable = new Date();
dateToDisable.setDate(dateToDisable.getDate() + 2);
$('#datetimepicker11').datetimepicker({
beforeShowDay: function (date) {
if (date.getMonth() == dateToDisable.getMonth() && date.getDate() == dateToDisable.getDate()) {
return [false, ""]
}
return [true, ""];
}
});
$('#datetimepicker_dark').datetimepicker({ theme: 'dark' })
</script>
</body>
</html>
Now after run the application we see the screen like below:
0 comments