jquery date time picker minDate / maxDate issue - date

the code below was working perfectly fine before but recently I noticed that the minDate/maxDate isn't working anymore, strange because I didn't make any change on the code. I have been struggling with this for a few days now, it's annoying.
I am using this -- http://mugifly.github.io/jquery-simple-datetimepicker/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://mugifly.github.io/jquery-simple-datetimepicker/jquery.simple-dtpicker.js"></script>
<link type="text/css" href="http://mugifly.github.io/jquery-simple-datetimepicker/jquery.simple-dtpicker.css" rel="stylesheet" />
<input type="text" name="start_time" id="start_time">
<input type="text" name="end_time" id="end_time">
<script type="text/javascript">
$(function(){
$('#end_time').change(function() {
$('#start_time').appendDtpicker({
"futureOnly": true,
"closeOnSelected": true,
"dateFormat": "DD/MM/YYYY hh:mm",
"minTime":"07:00",
"maxTime":"23:00",
maxDate: $('#end_time').val() // when the end time changes, update the maxDate on the start field
});
});
$('#start_time').change(function() {
$('#end_time').appendDtpicker({
"futureOnly": true,
"closeOnSelected": true,
"dateFormat": "DD/MM/YYYY hh:mm",
"minTime":"07:00",
"maxTime":"23:00",
minDate: $('#start_time').val() // when the start time changes, update the minDate on the end field
});
});
// trigger change event so datapickers get attached
$('#end_time').trigger('change');
$('#start_time').trigger('change');
});
</script>

Related

Date Picker: Any one day selection

How to select any one day selection using datepicker.If user select in fromdate 05-11-2018 so todate also should be 05-11-2018.It means it will be only for one day data selection.
And all other dates should be disable.So user can select only one date.
Please help how to do that.
CODE:
$("#searchFromDate").datepicker({dateFormat:'yy-mm-dd'});
$("#searchFromDate").datepicker("setDate", new Date());
$("#searchToDate").datepicker({dateFormat:'yy-mm-dd'});
$("#searchToDate").datepicker("setDate", new Date());
Try this...
$("#searchFromDate").datepicker({
dateFormat:'yy-mm-dd',
onClose: function( selectedDate ) {
$("#searchToDate" ).datepicker( "option", "maxDate", selectedDate );
$("#searchToDate" ).datepicker( "option", "minDate", selectedDate );
}});
$("#searchFromDate").datepicker("setDate", new Date());
$("#searchToDate").datepicker({dateFormat:'yy-mm-dd'});
$("#searchToDate").datepicker("setDate", new Date());
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="datepicker" id="searchFromDate"></p>
<p>Date: <input type="datepicker" id="searchToDate"></p>
</body>

converting datepicker to datetimepicker

In my site, using Bootstrap 4, I have a perfectly working datepicker instance giving me a calendar to choose dates. However, I want to modify this to use time as well. I've tried so many different versions of datetime pickers and put the CDN files in proper order but something is conflicting for whatever reason.
I'm hoping for someone to just point me into the direction of the best way to use a datetimepicker or just incorporate time with this, in a way that works with what I'm using now.
Here's the code for the working datepicker:
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<h6>Set New Expiration: <input data-date-format="mm/dd/yyyy" id="datepicker" name="datepicker"></h6>
You can use AuspeXeu DateTimePicker. It also supports keyboard navigation.
$(".datepicker").datetimepicker({
format: 'm/d/yyyy',
datesDisabled: ['2018-06-20'],
autoclose: true
});
function showDate()
{
console.log($('.datepicker').data("datetimepicker").getDate());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
<link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<input class="datepicker" type="text">
<button onclick="showDate()">Get Date</button>

How to disable days is datepicker materializeCSS

I am using materializeCSS datepicker and I only want to select Year and Months
I tried this. Also how to format the date. I want to have it's representation as 2017-07-20
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15,
selectDays: false,
today: 'Today',
clear: 'Clear',
close: 'Ok',
closeOnSelect: false // Close upon selecting a date,
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.0/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.0/js/materialize.min.js"></script>
<div class="input-field">
<input type="date" class="datepicker" name="date" id="date">
</div>
Try this code
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15,
disable: [true],//disable days
today: 'Today',
clear: 'Clear',
close: 'Ok',
closeOnSelect: false // Close upon selecting a date,
});
DEMO

Leaving field blank but showing a start hour?

I am trying to set up start times for the day. When the time picker shows, it keeps saying 12 : 00 AM. I want the times to start at 10 : 00 AM, and increment by 30 minutes. I am using enabledHours to limit the input. I am also using useCurrent: false so that the input field is empty when the page is loaded.
Basically am using this:
format: 'LT',
stepping: 30,
enabledHours: [10, 11, . . . 19],
minDate: moment().hour(10),
useCurrent: false,
showClose: true,
allowInputToggle: true
I have a separate input for the date, all I want to show is the time.
Any help is appreciated.
The easiest way to set starting date for datetime picker is using defaultDate option. Setting this option, the picker input field will be populated with the given date, as you can see in the live example:
$("#datetimepicker1").datetimepicker({
format: 'LT',
stepping: 30,
minDate: moment({hour: 10}),
maxDate: moment({hour: 19, minutes: 30}),
defaultDate: moment({hour: 10}),
useCurrent: false,
showClose: true,
allowInputToggle: true
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<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>
If the input has to be initally blank, then you have to do something a little bit complex. You can listen for dp.show event and set a given date (using date method) if no previous date was set.
Here a live working example:
$("#datetimepicker1").datetimepicker({
format: 'LT',
stepping: 30,
minDate: moment({hour: 10}),
maxDate: moment({hour: 19, minutes: 30}),
useCurrent: false,
showClose: true,
allowInputToggle: true
}).on('dp.show', function(){
var date = $(this).data("DateTimePicker").date();
if( !date ){
var defaultDate = moment({hour: 10});
$(this).data("DateTimePicker").date(defaultDate);
}
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<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>
Please note that I used minDate and maxDate instead of enabledHours, since you are selecting only time. Moreover I used moment({hour: 10}) instead of moment().hour(10) because the first (moment({unit: value, ...});) defaults to 0 for minutes, seconds, milliseconds while the latter takes in account current minutes, seconds etc.

Changing jQuery Mobile date picker options

I am using the jQuery Mobile date picker control but I cannot change any of the properties. For example, the following code will attempt to set the first day of the week to Wednesday, in the document ready function but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<script src="jquery.ui.datepicker.mobile.js"></script>
<script>
$(document).ready(function()
{
$("#date").datepicker({ firstDay: 3 });
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="home">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
<div data-role="fieldcontain">
<input type="date" name="date" id="date" value="" />
</div>
</div>
</div>
</body>
</html>
Any ideas what I'm doing wrong? Is this failing to work because the date picker is already displayed?
I have managed to change to change the properties by changing the "jquery.ui.datepicker.mobile.js" file
To change the date format to : "dd/mm/yy" Code shown below
//bind to pagecreate to automatically enhance date inputs
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input[data-type='date']" ).each(function(){
$(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true, dateFormat: "dd/mm/yy" }));
});
});
What happens if you try a different setter?
$('.selector').datepicker('option', 'firstDay', 1);
Your missing the bind()
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
Docs (At the bottom of the page): http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/
Also I like the DateBox a littler better IMO: http://dev.jtsage.com/jQM-DateBox/
I had a similar problem and had to change two lines in jquery.ui.datepicker.mobile.js
First, I needed to store the return value of the call to prevDp (line 18).
var value = prevDp.call( this, options );
Then I had to return this value instead of this (line 46)
return value;
Now you should be able to call the datepicker with options like Matt Ball suggested.