I'm creating a web app in angularJS with ASP.NET, here is my JavaScript of a datepicker:
$('#sandbox-container input').datepicker({
autoclose: true
});
$('#sandbox-container input').on('show', function (e) {
console.debug('show', e.date, $(this).data('stickyDate'));
if (e.date) {
$(this).data('stickyDate', e.date);
} else {
$(this).data('stickyDate', null);
}
});
$('#sandbox-container input').on('hide', function (e) {
console.debug('hide', e.date, $(this).data('stickyDate'));
var stickyDate = $(this).data('stickyDate');
if (!e.date && stickyDate) {
console.debug('restore stickyDate', stickyDate);
$(this).datepicker('setDate', stickyDate);
$(this).data('stickyDate', null);
}
});
The code in ASPX is the following:
<div id="sandbox-container" class="row">
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-2">
<div class="row">
<input type="text" ng-model="datefrm" date-format="dd-MM-yyyy" class="textboxandbutton" placeholder="From" date-only />
</div>
</div>
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-2">
<div class="row">
<input type="text" ng-model="dateto" date-format="dd-MM-yyyy" class="textboxandbutton" placeholder="To" date-only>
</div>
</div>
</div>
The current format is MM/dd/yyyy. This is how the date is showing:
02/08/2017
I need to change the date format to:
dd-MM-yyyy
The data which I want to see is:
08-02-2017
All the help is appreciated!
Just add format option of datepicker:
format: 'dd-mm-yyyy'
Please find below snippet for more information
$('#sandbox-container input').datepicker({
autoclose: true,
format: 'dd-mm-yyyy'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>
<div id="sandbox-container">
<input type="text" type="text" class="form-control" />
</div>
The following code will work:
var date = "01/24/1977";
var datearray = date.split("/");
var newdate = datearray[0] + '-' + datearray[1] + '-' + datearray[2];
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am using bootstrap datepicker and I want to know is there a way to enable To Date Only after filling the From Date.Before that it will be disable. Both javascript or jQuery solutions are welcome.
my html
<div id="div2" style="display: none">
<div class="row m-t-5">
<div class="col-md-8">From Date </div>
<div class="col-md-4"><input type="text" class="form-control datepicker" id="leave_from" onblur="checkDate();" name="leave_from" placeholder="dd/mm/yyyy"></div>
</div>
<div class="row m-t-5">
<div class="col-md-8">To Date </div>
<div class="col-md-4"><input type="text" class="form-control datepicker" id="leave_to" onblur="checkDate();" name="leave_to" placeholder="dd/mm/yyyy"></div>
</div>
</div>
<script>
my javascript code
function checkDate(){
var error;
var $validator = $("#myform").validate();
var date1 = document.getElementById('leave_from').value;
var date = date1.substring(0, 2);
var month = date1.substring(3, 5);
var year = date1.substring(6, 10);
var FROM = new Date(year, month - 1, date);
var date2 = document.getElementById('leave_to').value;
var date1 = date2.substring(0, 2);
var month1 = date2.substring(3, 5);
var year1 = date2.substring(6, 10);
var TO = new Date(year1, month1 - 1, date1);
if(FROM > TO)
{
error = {leave_to:"Invalid Date!"};
$validator.showErrors(error);
$('#leave_to').val('');
}
}
Try with,
$(document).ready(function() {
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
}).on("changeDate", function (e) {
$('#datepicker2').prop('disabled',false);
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
});
$('#datepicker2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>
Hoe this will help you!! :)
Check this version of the code. Make sure that the first date must be set before heading to the second one. If someone is setting the first date, then the second and then delete the first, the second will also be cleared and disabled again.
$(document).ready(function() {
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
}).on("change", function (e) {
if($('#datepicker1').val() == ""){
$('#datepicker2').prop('disabled',true);
}else{
$('#datepicker2').val('');
$('#datepicker2').prop('disabled',false);
}
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
});
$('#datepicker2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>
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>
I implement bootstrap datepicker to my project on Symfony and user can save reservation dates in DB.
Does exist any possibility to disable date rages from database? For example, I have date range from 22.12.2016 to 26.12.2016 and form 31.12.2016 to 03.01.2017 and I want to disable these dates in datepicker.
Thanks.
Hope this will useful to you
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen" />
<style>
.datetimepicker table tr td.disabled, .datetimepicker table tr td.disabled:hover {
color: rgb(255, 0, 0);
cursor: not-allowed;
}
</style>
<div class="form-group required">
<label class="col-sm-2 control-label" for="datestart">Reservation Start date</label>
<div class="col-sm-4">
<div class="start-date">
<div class='input-group date' id="time-start">
<input type='text' class="clearfix form-control col-sm-5" name="datestart" id="datestart" placeholder="Reservation Start date" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<label class="col-sm-2 control-label" for="dateend">Reservation End date</label>
<div class="col-sm-4">
<div class="end-date">
<div class='input-group date' id="time-end">
<input type='text' class="clearfix form-control col-sm-5" name="dateend" id="dateend" placeholder="Reservation End date" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// use this date formate 'MM/dd/yyyy HH:mm'
// start time
var datestart = '<?php echo $reservation_start_date; ?>';
// end time
var dateend = '<?php echo $reservation_end_date; ?>';
jQuery('#datestart').val(datestart);
jQuery('#dateend').val(dateend);
var today = new Date();
jQuery('#time-start').datetimepicker({
format: 'mm/dd/yyyy hh:ii',
autoclose: true,
pickerPosition: datestart,
maxView: 3,
minuteStep: 15,
defaultDate: datestart,
startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes())
}).on("changeDate", function (e) {
jQuery('#start-time-before').html(e.date);
var TimeZoned = new Date(e.date.setTime(e.date.getTime() + (e.date.getTimezoneOffset() * 60000)));
jQuery('#time-end').datetimepicker('setStartDate', TimeZoned);
jQuery('#time-start').datetimepicker('setDate', TimeZoned);
jQuery('#start-time-adjusted').html(TimeZoned);
});
jQuery('#time-end').datetimepicker({
format: 'mm/dd/yyyy hh:ii',
pickerPosition: dateend,
autoclose: true,
maxView: 3,
minuteStep: 15,
defaultDate: dateend,
startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes())
}).on("changeDate", function (e) {
jQuery('#end-time-before').html(e.date);
var TimeZoned = new Date(e.date.setTime(e.date.getTime() + (e.date.getTimezoneOffset() * 60000)));
jQuery('#time-start').datetimepicker('setEndDate', TimeZoned);
jQuery('#time-end').datetimepicker('setDate', TimeZoned);
jQuery('#end-time-adjusted').html(e.date);
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
$('#datepicker0').datepicker({
autoclose: true,
format: 'dd-mm-yyyy'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div >
<div >
<label for="datepicker0">Execution Date:</label>
</div>
<div >
<input class="form-control date-picker" id="datepicker0" type="text" />
</div>
</div>
$().ready(function () {
$('#datepicker0').datepicker({
autoclose: true,
language: "pt-BR",
format: 'dd-mm-yyyy'
});
});
On a page I got this datepicker javascript function. But when selecting a date, the autoclose isn't working. What's wrong here?
i need to give user to select a date and a time and get that as an input here i have added the basic code i use and i need to restrict user only to add future date and a time not past dates or time!
$(function () {
var currentDate = new Date();
$('#datetimepicker1').datetimepicker({
//viewMode: 'years',
format: 'DD/MM/YYYY'
});
$('#datetimepicker2').datetimepicker({
format: 'LT'
});
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
<div class="form-group">
<label class="control-label col-sm-4" for="pwd"><a style="color:red !important; font-size:18px">* </a>Select a date:</label>
<div class="col-sm-8">
<div class="form-group" style="margin-right: 0px !important; margin-left: 0px !important;">
<div class='input-group date' id='datetimepicker1'>
<input name="datepicker" id="datepicker" type='text' class="form-control" min="2015-01-01" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<!--Time picker-->
<div class="form-group">
<label class="control-label col-sm-4" for="pwd"><a style="color:red !important; font-size:18px ; font-size:18px">* </a>Select a time:</label>
<div class="col-sm-8">
<div class="form-group" style="margin-right: 0px !important; margin-left: 0px !important;">
<div class='input-group date' id='datetimepicker2'>
<input name="timepicker" id="timepicker" type='text' class="form-control" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
my question is i need to allow user only to put future date not past ones!
Restrict the range of selectable dates with the minDate and maxDate options.
$('#datetimepicker1').datepicker({ minDate: 0});
See the official documentation here.
or you can check this example from the documentation bootstrap datetimepicker
$('.starts_on, .ends_on').datetimepicker({
format: 'YYYY-MM-DD',
useCurrent: false,
minDate: moment()
});
$('.starts_on').datetimepicker()
.on('dp.change', function(v){
var incrementDay = moment(new Date(v.date));
incrementDay.add(1, 'days');
$('.ends_on').data('DateTimePicker').minDate(incrementDay);
$(this).data("DateTimePicker").hide();
});
$('.ends_on').datetimepicker()
.on('dp.change', function(v){
var decrementDay = moment(new Date(v.date));
decrementDay.subtract(1, 'days');
$('.starts_on').data('DateTimePicker').maxDate(decrementDay);
$(this).data("DateTimePicker").hide();
});
Try this
$("#datetimepicker1").datepicker({
minDate: 1,
onSelect: function(theDate) {
$("#datetimepicker1").datepicker('option', 'minDate', new Date(theDate));
},
dateFormat: 'mm/dd/yy'
});
use minDate: 1, this should allow only future date
$('#datetimepicker1').datetimepicker({
minDate:1,
format: 'DD/MM/YYYY'
});
i got issue solved by this thank you everyone for your help they were very helpful!
$('#datetimepicker1').datetimepicker({
//viewMode: 'years',
//minDate:0,
//format: 'DD/MM/YYYY'
format: "MM/DD/YYYY",minDate: new Date()
});