We Keep Coding

MaterializeCss Use dblclick event to open datepicker modal

I'm working with materializecss and my boss asked me to change the trigger on the datepicker modal from the classic 'click' to a double click.
Problem is, there's no documentation about that, and maybe is hard-coded in the object.
Is there a way to change this behavior?

You can create two input elements and hide either of them. Below I've created input1 as a datepicker and input2 as a standard text input. Then I've hidden the first one and assigned an event listener (ondblclick) for the second one.
It may not be the best solution but works.
var datepicker = document.querySelector('#input1')
var input2 = document.querySelector('#input2')
var options = {
autoClose : true,
container : document.body,
onSelect : function (day) {
input2.value = day.toDateString(),
M.updateTextFields()
}
}
var instance = M.Datepicker.init(datepicker, options)
input2.ondblclick = function () {
instance.open()
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="input-field col s5 hide">
<input type="text" class="datepicker" id="input1">
</div>
<div id="div2" class="input-field col s5">
<input type="text" id="input2">
<label for="input2">Pick a date</label>
</div>
</div>

Why timepicker can not be downgraded when choosing a date other than today?

My html code like this :
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
My JavaScript code like this:
$(function () {
$('#datepicker').datetimepicker();
$('#timepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
console.log(value)
});
Demo like this: https://jsfiddle.net/8jpmkcr5/89/
If I click the timepicker and click the decrement hour icon, it does not work. I know it happens because this code : minDate: moment().startOf('minute').add(300, 'm'). I want the code to work only on this day. Other than today the code does not work
How can I do it?

Your #datepicker and #timepicker are unrelated, they are fully independent,
is up to you to relate them. You can dinamically set minDate of #timepicker using minDate function.
You can add a listner for dp.change event and enable or disable the minDate for the #timepicker chceking if the selected day is current day (using momentjs isSame).
You have to add minDate option also to #datepicker if you want to disable past dates, as you stated in the comments.
Here a working sample:
$(function () {
$('#datepicker').datetimepicker({
minDate: moment().startOf('day')
}).on('dp.change', function(e){
if( e.date && e.date.isSame(moment(), 'd') ){
var min = moment().startOf('minute').add(300, 'm');
$('#timepicker').data("DateTimePicker").minDate(min);
} else {
$('#timepicker').data("DateTimePicker").minDate(false);
}
});
$('#timepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
});
$("#btnSubmit").click(function() {
value = document.getElementById('datepicker').value;
console.log(value)
valueTime = document.getElementById('timepicker').value;
console.log(valueTime)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.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.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
Please note that, as stated before, #datepicker and #timepicker are unrelated, so with the #timepicker you are simply selecting a time, that defaults to current day (no automatic relationship with the selected day using #datepicker).

If you want to limit the input to today only, why are you trying to set a limit on the time picker? You should be setting the limit on the date picker

Bootstrap datetimepicker does not firing change event on time change

I am using only time input (Custom Formats example 3 given on this link) http://eonasdan.github.io/bootstrap-datetimepicker/
I only wants to listen for change in time when user click up or down for hour or minute changes. I tried change.dp, change and dp.change but none are working
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" id="start_time"/>
<input type="hidden" name="book_meeting[start_date]" id="book_meeting_start_date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
$("#start_time").on("change", function(e) {
alert("helloi");
});
$("#book_meeting_start_date").on("change", function(e) {
alert("helloi");
});
$("#book_meeting_start_date").on("change.dp", function(e) {
alert("helloi");
});

After searching i found it's answer.i ended up using dp.hide which is working as expected.
$('#datetimepicker3').datetimepicker({
stepping: 5,
format: 'HH:mm'
}).on('dp.hide', function (event) {
});

DatePicker onchange event not firing in jQuery

I have a button and a textbox. Onclick of the button datepicker pop up appears and user selects a date from the calender pop up and the selected date is populated in the text field.
Now I want to fire an event when the result is populated on the textfield. Onchange event does not work for this as textfield onchange event is fired only if it loses focus. In my case it is changed from an external source.
Hence I thought to fire an onSelect event for the button click. But again event is not triggered.
here is my code
<input type="text" class="textbox_small" name=""
value="" id="txt_node" disabled="disabled"
onchange="fnChangeTime();" />
<input type="button" name="" value=""
class="timePicker_button" id="lnk_hpd"
; style="background-image: url('images/Date_time_picker.gif'); width: 29px; height: 20px;"
onclick="" onselect="" "disabled"/></td>
$('#'+fnParseIDForJ('lnk_hpd')).click(function () {
NewCssCal('txt_node','ddmmyyyy','arrow',false, null, null, null, fnInterimSave, 'txt_node');
});
$('#lnk_hpd').datepicker({
onSelect:function(datesel){
alert("hello");
// alert("Selected date: " + dateText + "; input's current value: " + this.value);
// $(this).change();
}
});
Here no event is triggered. Any help would be appreciated

1.Open datepicker on text box on clicking button , so you have to use id of text box , not button and a method $('#txt_node').datepicker('show'); to show the datepicker.
2.If change event triggered , the datepicker will be kept open, it is not closed so the line $('#txt_node').datepicker('hide');
Check this.
$('#txt_node').datepicker({
onSelect: function(datesel) {
$('#txt_node').trigger('change')
}
});
$('#lnk_hpd').click(function() {
$('#txt_node').datepicker('show');
})
$('#txt_node').change(
function(event) {
$('#SelectedDate').text("Selected date: " + this.value);
$('#txt_node').datepicker('hide'); // if youdon't hide datepicker will be kept open
})
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input type="text" class="textbox_small" name="" value="" id="txt_node" disabled="disabled" onchange="fnChangeTime();" />
<input type="button" name="" class="timePicker_button" id="lnk_hpd" ; onclick="" onselect="" "disabled" value='Open' />
<br/>
<br/>
<span id='SelectedDate'></span>

I've done something similar using:
HTML
<input type="text" id="NewDate" style="display:none" />
JavaScript
jQuery(function($){
$('#NewDate').datepicker(
{
showOn: 'button',
buttonImageOnly: true,
buttonText:"",
buttonImage: 'img/calendar.png',
onClose: function(date) {
if(date !="") {
alert(date);
}
}
})
})

Simple uncomment $(this).change(); this and It'll automatically work. This will tell the datepicker function to trigger Change() after selecting or Choosing a Date.

Jqueryui Datepicker not displaying calendar

I am currently using jquery ui datepicker for two input fields. In order to call the calendar the inputfield must have a class of datepicker. I am using a for loop in the javascript to generate the input fields. I have added the class datepicker to each input field that can be possibly generated. But no calendar appears. In the firebug console the html does show that the input fields have class datepicker. Now if do this with a static input field it works fine. How can I display calendar when the field is click? Example
In the jquery this is the line where i set the class:
content += '</select></br>Class Start Date: <input type="text" id="start_date_'+i+'" name="start_date_'+i+'" class="datepicker" />Class End Date: <input type="text" id="end_date_'+i+'" name="end_date_'+i+'" class="datepicker" /><div>';
Full Jquery code
<script>
$(document).ready(function () {
$('select').change(function() {
var option = $(this).val();
showFields(option);
return false;
});
function showFields(option) {
var content = '';
for (var i = 1; i <= option; i++) {
content += '<div id="course_'+i+'"><label>Course # '+i+'</label><br /><label>Course Name:</label> <select id="coursename_'+i+'" name="coursename_'+i+'"><option value="">--- Select ---</option>"'
<?php
$course_query = $db_con->prepare("SELECT course_id, course_name FROM courses_selection_list ");
$course_query->execute();
$data = $course_query->fetchAll();
foreach ($data as $row) {
//dropdown values pulled from database
echo 'content += \'<option value="' . $row['course_id'] . ':'.$row['course_name'].'">' . $row['course_name'] . '</option>\';';
}
?>
'"';
content += '</select></br>Class Start Date: <input type="text" id="start_date_'+i+'" name="start_date_'+i+'" class="datepicker" />Class End Date: <input type="text" id="end_date_'+i+'" name="end_date_'+i+'" class="datepicker" /><div>';
}
$('#course_catalog').html(content);
}
});
$(function() {
$( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd" }).val();
});
</script>
HTML
<form action="courses.php" method="POST">
<b>Select the course</b>
Academy<input id="academy_id" name="acad_id" placeholder="Academy ID" type="text" />
Courses being offered?
<select name="courses_offered">
<option value="default">---Select---</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="course_catalog"></div>
Static input: <input type="text" id="last_contacted_date" name="last_contacted_date" class="datepicker" />
<input value="SAVE" name="submit" type="submit">
</form>

What you want to do is make sure that the datepicker code runs after the content has been created and added to the DOM. The easiest way to do this would be to move the datepicker code inside your showFields method, right at the end. Like this:
function showFields(option) {
. . . rest of method . . .
$('#course_catalog').html(content);
$('#course_catalog').find(".datepicker").datepicker({dateFormat: "yy-mm-dd"});
}
The $('#course_catalog').find(".datepicker") part will make sure that only the dynamically added datepicker fields will be initialized (you don't want to run it again against the static ones).

Include jQuery UI to your page.
http://jqueryui.com/download/
In the <head>:
<script type=text/javascript src="your_jquery_ui.js"></script>
Ok, you included the jQuery UI, now check your class is not hasDatepicker instead of datepicker ?
As you see here: http://jqueryui.com/datepicker/

Since you're adding inputs (datepickers) dynamically, the easiest solution is to add this:
$('body').on('focus',".datepicker", function(){
$(this).datepicker();
});
jsFiddle example
BTW, you really only need one document ready call in your page.