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
Related
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.
I'm using eonasdan bootstrap-datetimepicker. I'm trying to work in UTC time (including hours) but maxDate seems to refer to local time.
An example would be if I want to limit the time to 10:00 am UTC time. I want the datetimepicker to allow time modification but no longer than 10:00 am UTC time. Because I'm +3 timezone, I'm able to go until 13:00 pm.
Here is the fiddle: http://jsfiddle.net/vvtwq0xm/1/
var dateUTCtime = new Date().toISOString();
alert('UTC time = ' + dateUTCtime);
var opts = {
format: "DD-MMM-YYYY HH:mm",
stepping: 5,
maxDate: dateUTCtime,
useCurrent: true,
sideBySide: false,
showTodayButton: true,
widgetPositioning: {
'vertical': 'bottom'
}
};
$('#datetimepicker1').datetimepicker();
My date is in UTC but maxTime seems to not respect time (hour) to UTC. It allows me to go until current local time.
Anyway to make it work on UTC?
ps: I added some explanation for better understanding. I'm interested in respecting UTC date and time (hours).
In version 4.17.37 timezone integration was added (see changelog), while you are using version 4.14.30 of the datetimepicker in your fiddle.
To use the picker with UTC, add moment-timezone to your imports and set maxDate using moment.utc().
Here a working example (using lastest picker version: 4.17.42):
var opts = {
format: "DD-MMM-YYYY HH:mm",
stepping: 5,
maxDate: moment.utc(),
useCurrent: true,
sideBySide: false,
showTodayButton: true,
widgetPositioning: {
'vertical': 'bottom'
}
};
$('#datetimepicker1').datetimepicker(opts);
<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.42/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.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.5/moment-timezone-with-data-2010-2020.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.42/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>
$(function() {
$('input.month-mode').datetimepicker({
viewMode: 'months',
format: 'MM/YYYY',
showClose: true,
maxDate: current_month,
});
});
I want to add close text to it. by default it shows 'X', but I want to change it. Is it possible?
You can use icons option to define a custom css class for your icon and then you can write a css rule to customize close text as shown below:
$(function () {
var current_month = moment(); // just a sample value
$('#datetimepicker1').datetimepicker({
showClose: true,
viewMode: 'months',
format: 'MM/YYYY',
maxDate: current_month,
icons: {
close: 'closeText'
}
});
});
.closeText:before {
content: "Close";
}
<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.7.14/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.12.0/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.7.14/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>
One way to do this is to use the icon classes to a add a new class and then use css to add some content. Something like:
$(function() {
$('input.month-mode').datetimepicker({
viewMode: 'months',
format: 'MM/YYYY',
showClose: true,
maxDate: current_month,
icons: {
close: 'textclass1'
}
});
});
Css:
.textclass1::before {
content: "Close";
}
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>
I have the following code for my datepicker text box:
<!-- Setup Datepicker -->
<script type="text/javascript"><!--
$(function() {
$('input').filter('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: 'jquery/calendar.gif',
buttonImageOnly: true
});
});
--></script>
I would like to setup the year slide drop-down from 1910 to 2014.
I read the API but I´m new in coding and don´t understand and don´t know how to apply.
How can I do it?
What I have to put in this code for that?
How can I change the language from English to Spanish?
Here it is, working:
Add the option yearRange: '1910:2014'
$(function() {
$( "#datepicker" ).datepicker({changeMonth: true,changeYear: true,
yearRange: '1910:2014'});
});
<p>Date: <input type="text" id="datepicker" /></p>
UPDATE 1
$(function() {
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '<Ant',
nextText: 'Sig>',
currentText: 'Hoy',
monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
'Jul','Ago','Sep','Oct','Nov','Dic'],
dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['es']);
//for year list
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1910:2014'});
});
<p>Date: <input type="text" id="datepicker" /></p>