We Keep Coding

Datetimepicker client side validation for start and end date

I have 2 datetimepickers that I'm using and I'm setting the default date on each of them when the page loads. One is the start time (#datetimepicker1), the other is the end time (#datetimepicker2). I have validation in place for when the user changes the values. It will validate that the end date is not less than the start date and the start date is not greater than the end date.
This works, however, it does not seem to register the default values, so the validation only works if you click into it and select a new datetime and then go to the other datetimepicker and select a value. Basically, it's treating the default value as null within the validation. Any idea how to make the validation factor in the default values provided?
#using (Html.BeginForm("Graph", "Home", FormMethod.Post))
{
<div class="form-group">
<div class="container">
<div class='col-lg-4 text-center' style="text-align:center">
<label class="control-label col-md-2" style="width:40%" for="datetimepicker1">From Date:</label>
#Html.TextBoxFor(m => m.datetimepicker1, new { #class = "input-group date" })
</div>
<div class='col-lg-4' style="text-align:center">
<label class="control-label col-md-2" style="width:40%" for="datetimepicker2">To Date:</label>
#Html.TextBoxFor(m => m.datetimepicker2, new { #class = "input-group date" })
</div>
<div class='col-lg-4' style="text-align:center">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search
</button>
</div>
</div>
</div>
}
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.min.css">
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
defaultDate: "#DateTime.Now.ToString("MM/dd/yyyy") 12:00:00 AM"
});
$('#datetimepicker2').datetimepicker({
defaultDate: "#DateTime.Now.ToString("MM/dd/yyyy") 11:59:59 PM"
});
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
});
</script>

Not Set Datetime Value To The Bootstrap DatetimePicker

I have update form. And this update form has bootstrap datetime picker and it has html code like as below:
<div class="input-group date" id="startdateandtime" value="Thu Jul 25 1997 00:00:00">
<input required="" type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I want to set any date and time of this picker when edit form is opened.
But my jquery functions doesn't work. And value is not set to this datetime picker. I use jquery like as below:
$('#startdateandtime').datetimepicker({
date: new Date(1434544882775)
});
$("#startdateandtime").datetimepicker("update", new Date(1434544882775));
$("#startdateandtime").datepicker("setValue", "02-17-2012");
$('#startdateandtime').datepicker({
onSelect: function () {
$('#startdateandtime').text(new Date(1434544882775));
}
});
All of the above jquery functions doesn't work. So that I can't set any
datetime to the picker which is in the edit form.
I use bootstrap datetime picker. Bootstrap DateTimePicker css and js source files. And their version is 4.7.14.
How can I set any datetime to the datetime picker when edit form is opened ?

If you are using this bootstrap component: https://github.com/Eonasdan/bootstrap-datetimepicker
you can reference date function this ways:
set value in the picker to current datetime:
$("#startdateandtime").data("DateTimePicker").date(new Date());
set value to timestamp (24/11/2017 11:41:41 ==> timestamp 1511520101020):
$("#startdateandtime").data("DateTimePicker").date(new Date(1511520101020));
set value to date string:
$("#startdateandtime").data("DateTimePicker").date("30/11/2017 11:30");
See http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#date
Here is a working snippet:
$('#datetimepicker1').datetimepicker(
{
format: "DD/MM/YYYY HH:mm:ss",
toolbarPlacement: 'top',
showClear: true,
showClose: true,
sideBySide: true
}
);
$(document).ready(function() {
$("#datetimepicker1").data("DateTimePicker").date("30/11/2017 11:30");
})
function setTs() {
$("#datetimepicker1").data("DateTimePicker").date(new Date(1511520101020));
}
function setNow() {
$("#datetimepicker1").data("DateTimePicker").date(new Date());
}
function setDateStr() {
$("#datetimepicker1").data("DateTimePicker").date("30/11/2017 11:30");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js?ver=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/5a991bff/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.css">
<div class="row">
<div class="col-md-4">
<div class="panel-body">
<form id="srcForm" data-toggle="validator">
<div class="row">
<div class="form-group col-xs-12">
<label>Date</label>
<div id="datetimepicker1" class="input-group">
<input type="text" class="form-control" name="from">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</form>
<div class="search-footer">
<button type="button" class="btn btn-primary btn-search" onclick="setTs()">Set Date To TS</button>
<button type="button" class="btn btn-primary btn-search" onclick="setNow()">Set Date To Now</button>
<button type="button" class="btn btn-primary btn-search" onclick="setDateStr()">Set Date To Date String</button>
</div>
</div>
</div>
</div>

I am sharing how I made it work with setDate OPTION:
var dateEx = "08/14/2022 01:57:00 AM";
$('#datetimepicker1').data('DateTimePicker').setDate(dateEx);
Hope it helps someone too!

How to calculate two asp text box values using JavaScript and save it on database?

I have two text boxes which take date time value and the date time is setting from Bootstrap DateTimePicker. Now i want to subtract two date time values using JavaScript and save it in database?
Here is my code of date time pickers:
<script type="text/javascript">
$(function () {
$("#<%=datetimeCreated.ClientID %>").datetimepicker({
calendarWeeks: true,
useCurrent: false,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeCreated").on('dp.change', function (e) {
var date = $("#datetimeCreated").val();
});
});
$(function () {
$("#<%=datetimeClosed.ClientID%>").datetimepicker({
calendarWeeks: true,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeClosed").on('dp.change', function (e) {
var date = $("#datetimeClosed").val();
});
});

You can calculate the diff using moment.js (which is already required for datetimepicker) like this:
var diff = moment.duration(date1.diff(date2)).asDays();
Read more about .duration() and .diff() in the docs.
Read the code and let me know if something is not clear.
$(function () {
$('#datetimepicker1, #datetimepicker2').datetimepicker();
$('button').click(function(e) {
e.preventDefault();
var date1 = $('#datetimepicker1').data('DateTimePicker').date();
var date2 = $('#datetimepicker2').data('DateTimePicker').date();
var diff = moment.duration(date1.diff(date2)).asDays();
// here is what are you looking for:
console.log(diff);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<button class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>

AngularJS datepicker using date-set

I've been trying out this AngularJS package (https://www.npmjs.com/package/angularjs-datepicker) and was struggling to use the date-set property. In my example I have 2 calendars, 1 that should display yesterdays date and 1 that should display todays date. Could someone please help me set these dates?
Datepicker:
<div class="datepicker-container">
<div class="date-from">
From:
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{}}" class="date-picker">
<div class="input-group">
<input class="form-control" placeholder="Choose a date"/>
<span class="input-group-addon" style="cursor: pointer">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</datepicker>
</div>
<div class="date-too">
To:
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{}}" class="date-picker">
<div class="input-group">
<input class="form-control" placeholder="Choose a date"/>
<span class="input-group-addon" style="cursor: pointer">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</datepicker>
</div>
</div>
Setting the date:
$scope.dateFrom = new Date();
$scope.dateTo = new Date();

var date = new Date();
$scope.today = date; //to show today's date
date.setDate(date.getDate() - 1); //to get yesterday's date, Ref:http://stackoverflow.com/questions/5511323/javascript-yesterday
$scope.yesterday = date;
Using date-set:
From the documentation linked above, https://www.npmjs.com/package/angularjs-datepicker . I see you have to pass date object as string to attribute date-set , hence convert the date object to string.
//js
var date = new Date();
$scope.today = date.toString(); //to show today's date
date.setDate(date.getDate() - 1); //to get yesterday's date, Ref:http://stackoverflow.com/questions/5511323/javascript-yesterday
$scope.yesterday = date.toString();
//html
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{today}}" class="date-picker">
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{yesterday}}" class="date-picker">

see this plnkr http://plnkr.co/edit/mDHliPweKoUNOAmVv5oo?p=preview
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<pre>Raw date is: <em>{{dt}}</em></pre>

I solved it in a simpler way, just activated the ng-if attribute in the div before the datepicker
pagamentoService.getCronograma(moment().year()).then(function (resp){
var cronogramas = resp.data;
console.log('99',resp.data);
cronogramas.forEach(function (obj){
vm.datasBloqueadas.push(moment(obj.data_limite).format('YYYY-M-D'));
});
}).catch(function (err){
console.log(err);
});
<div class="col-md-4 mt-1">
<label>data vencimento</label>
<div ng-if="Beneficios.datasBloqueadas.length > 0" class="input-control full-size text">
<datepicker date-format="yyyy-MM-dd" date-disabled-dates="{{Beneficios.datasBloqueadas}}" >
<input id="dataVencimento" class="required" type="date" date-converter ng-model="Beneficios.view.data_filter"
data-role="hint" data-hint-background="bg-orang-e"
data-hint-color="fg-white" data-hint-position="bottom" data-hint-mode="2">
<button class="button" onclick="$('#dataVencimento').focus();">
<span class="mif-calendar"></span>
</button>
</datepicker>
</div>

How to set Time-picker in MVC 4

I need to create a view that includes a field with time only. Can anyone help me on how to create Timepicker in MVC 4 razor.
This is my code:
Model
public TimeSpan TIME_OUT { get; set; }
View
<div class="form-group">
#Html.LabelFor(model => model.TIME_OUT, "End Time", htmlAttributes: new { #class = "col-xs-4 col-sm-offset-1 col-sm-4" })
<div class='input-group date col-xs-8 col-sm-6' id='timeout'>
#Html.TextBoxFor(model => model.TIME_OUT, new { #class = "form-control" })
<span class="input-group-addon">
<span class="glyphicon glyphicon-time">
</span>
</span>
</div>
</div>
JavaScript:
$(function () {
$('#timeout').datetimepicker({
format: 'LT'
});
});
This is the result of my code:
But when I click the time icon, it doesn't show the result I want
This is what I want to do in my timepicker

You can use bootstrap time picker, and set it by this Jquery
$("#YourId").timepicker("setTime", '');
Refer this Bootstrap Timpicker examples,
https://eonasdan.github.io/bootstrap-datetimepicker/
responsive-bootstrap-3-timepicker
http://tarruda.github.io/bootstrap-datetimepicker/