EzDevInfo.com

rails semantic ui jquery not updating field

I've run into a strange problem where I can't get a date picker to update the field in a rails app. I've tried a few different date pickers, so it's not a problem with the jquery plugin. Same results.

There's nothing strange about what I'm trying to do.

<div class="datepicker field">
  <label>Date of Birth</label>
  <%= f.text_field :dob %>
</div>

I have tried both with manual turbolinks workarounds..

var ready;
ready = function() { .... everything in here }
$(document).ready(ready);
$(document).on('page:load', ready);

and with jquery-turbolinks gem. It always gives me the same result - the jquery will load the picker, but the field does not get updated.

I believe I've got it narrowed down to Semantic UI at this point, but I'm happy to be proven wrong.

application.js :

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require semantic-ui
//= require pickadate/picker 
//= require pickadate/picker.date 
//= require turbolinks
//= require_tree .

relevant portion of local js:

$(function() {
  $('.datepicker').pickadate()
});

Any clues as to what I'm missing? Thanks.

Pickadate not working

I'm trying to use the Pickadate plugin. I've got a very strange problem occurring. Sometimes the plugin decides to work and other times it doesn't.

I've added some console.log()'s to picker.js picker.date.js and picker.time.js and all are firing off as expected. Also if I check $.fn.pickadate to see if it exists it does. But then when I actually call $('.datepicker').pickadate() i'm getting:

Uncaught TypeError: jQuery(...).pickadate is not a function

If I refresh the page then the majority of times it all works as expected. But the odd occasion it doesn't.

Any suggestions on what this could be?

Pickadate seeding one filed from another

I am trying to seed one field from another onChange, almost there but throwing an error when I try and access 'endDate' from within onSet, obviously I don't have access to it from within the function?:

var endDate = $('.end-date .datepicker').pickadate({
    formatSubmit: 'yyyy-mm-dd'
})

// Would like date from here copied over to endDate on change
var startDate = $('.start-date .datepicker').pickadate({
    formatSubmit: 'yyyy-mm-dd',
    onSet: function(endDate) {
        console.log('Want to set endDate to - ' + this.get('select', 'yyyy/mm/dd'));
        endDate.set('select', this.get('select')); // This line is wrong ..
    }
}) 

Heavy CPU usage only when using Safari

I discovered the CPU is roaming over 100% when I use Safari to load an web-app that I am building. I realised this when I see a conflict when using Remodal.JS (link) and pickadate.js (link) together and caused a glitch as shown below:

It should instead look like below (rendered correctly in Chrome, Firefox)

Note that the modal has width and height of 100%, so it takes up 100% of the window.

The performance in Safari is severely affected. Imagine a modal takes 15 seconds to load and a pickadate calendar takes 20 seconds to load... (my computer is Macbook Pro 2.7GHz QuadCore 16GB RAM late 2013 model..)

The CPU is constantly over 100%, as shown below:

The problem I had when using the two libraries in conjunction is described in another question here.

However, I would like to know how I can better debug CPU problems, especially browser-specific ones. (i.e. in my case, only Safari causes the problem but not Firefox nor Chrome).

Temporary Link - http://new.carshare.hk/car (will delete this link)

Thanks!

calculate number of days between two dates and dates are selecting by pickadate in jquery

i have 3 text fields in rails view

<div>
<%= f.label :from_date %>
<%= f.text_field :start_date, :class => 'datepicker' %>
</div>
<div>
<%= f.label :to_date %>
<%= f.text_field :end_date, :class => 'datepicker' %>
</div>
<div>
<label>Days</label
<%= f.text_field :days,:readonly => true %>
</div>

by selecting dates from pickadate. mt code in application.js is :

$('.datepicker).pickadate();

i want to calculate the days between dates. my calculate method is defined below:-

function calculate() {
 var d1 = $('#startdate').pickadate('getDate');
var d2 = $('#enddate').pickadate('getDate');
var diff = 1;
if (d1 && d2) {
diff = diff + Math.floor((d2.getTime() - d1.getTime()) / 86400000);
}
$('#days').val(diff);
 }

but it does not work properly there is something missing. i didn't get it. please help me. Thanks in advance.

Disable Previous Dates When Using Pickadate.js

I am using piackadate.js as a date picker for my site. I would like to implement the functionality that would disable any previous date. I read the docs on disabling dates but I don't see a way to disable all previous dates.

How would one do this?

Pickadate Clear/Close Button not closing picker in IE9

I’m having a problem with Pickadate & Pickatime on a site setup using Foundation, the client has just noticed an issue with the Clear and Close buttons not closing the Pickadate pop-up in IE9, which is making it impossible for IE9 users to complete the form.

This seems to be an intermittent problem, it looks like the Clear button will work the first time, but if you try and do this a few times in the same field you get the same issue.

The Close button was working for me in my tests in IE9 which would be a get out for users, but sadly the client has come back to me saying that in their tests in IE9 (running on Citrix), the Close button is not closing the Pickadate either which is making the form unusable again.

Here is the link to my demo: http://my-allianz-fa-02.designchief.ie/claim-notification.html

The sequence is:

1. scroll down to "Please select a claim option" dropdown
2. select Accident/Incident option
3. In the Accident Details fieldset you will find the "Date of Accident" Pickadate field (Pickatime also used in the field next to this one)

Everything works as expected apart from IE9 where you can select a date ok, but when you re-enter the field and try to Clear the info, the Pickadate flickers (disappears and then reappears) and then cannot be closed.

The site was built using Zurb Foundation 4.3.2, Pickadate 3.5.6 (latest version) and is using jQuery 1.10.2.

This issue is not present in the Pickadate demo - http://amsul.ca/pickadate.js/ which makes me think that something in the Foundation JS, or in the setup is causing the issue?

But, I have not found anything online that relates to this specific issue so I am reaching out in the hope that someone recognises the problem. If the issue cannot be resolved then maybe you could suggest a solution using a new plugin but the preferred option would be to use the Pickadate solution as it suits the needs of the site better.

Any help much appreciated, thanks.

Setting From and To Dates with Pickadate.js

I am setting To and From dates with pickadate.js. I have it working based on a Code Pen example. The code I am using is below:

var from_$input = $('#CAT_Custom_649616, #CAT_Custom_649610').pickadate(),
    from_picker = from_$input.pickadate('picker');

var to_$input = $('#CAT_Custom_649617, #CAT_Custom_649611').pickadate(),
    to_picker = to_$input.pickadate('picker');


if ( from_picker.get('value') ) {
  to_picker.set('min', from_picker.get('select'));
}
if ( to_picker.get('value') ) {
  from_picker.set('max', to_picker.get('select'));
}


from_picker.on('set', function(event) {
  if ( event.select ) {
    to_picker.set('min', from_picker.get('select'))  ;  
  }
  else if ( 'clear' in event ) {
    to_picker.set('min', false);
  }
});
to_picker.on('set', function(event) {
  if ( event.select ) {
    from_picker.set('max', to_picker.get('select'));
  }
  else if ( 'clear' in event ) {
    from_picker.set('max', false);
  }
});

I want to take the code one step further than what the example does. When you set the From date it will disable the To dates that are before the From date. For example, if you set a From date of August 21 2015, in the To date field you can select August 21 2015 or later, nothing before. The same happens when you set the To date. You cannot select any From date after the To date.

The one issue is, if I set a From date as August 21, I can also select a To date of August 21. What I would like to achieve is the ability to disable the date selected in the respective From and To fields.

In other words, if I select August 21 as my From date, then the earliest date I can select in the To date field is August 22 and vice versa.

How would I modify my code to achieve this?

Facing issue in executing pickadate function in same classes

I have two pickadate datepicker in view of new action of the controller.Both pickadate has same class. HTML Code of both pickadate is below:

<input class="datepicker picker__input" 
type="text" name="start_date" id="disable0" 
readonly="" tabindex="-1" aria-haspopup="true" 
aria-expanded="false" aria-readonly="false" aria-owns="start_date_root">

 <input class="datepicker picker__input" type="text" name="end_date" 
id="disable1" readonly="" tabindex="-1" aria-haspopup="true" 
aria-expanded="true" aria-readonly="false" aria-owns="end_date_root">

Disable holiday dates in start_date pickadate are working properly but end_date pickadate is not working with this functionality. I want to disable holiday dates in both pickadate. I try to solve this problem through regex.

$('.datepicker').each(function(i){
        $(this).attr('id', 'disable' + i);
    });
    var dates = $("input[id^='disable']").pickadate();
    var picker = dates.pickadate('picker');
    jQuery.each(gon.holidays, function(i,val){
        var newDate = new Date(val);
        var disableDate = picker.set("disable", [newDate]);
    });

But its not working. Please guide me how to solve this issue?

How to determine if a datepicker was invoked on form post

I am using pickadate.js as a date-picker with the following initialization:

$start_cal_input = $("#start-date-picker").pickadate({
        min: true,
        max: 30,
        editable: true,
        clear: false,
        formatSubmit: 'yyyy/mm/dd',
        hiddenName: true,
        onSet: function(e) {

        },
        onClose: function() {
            return setTimeout(function() {
                return $("#start-date-picker").blur();
            }, 200);
        },
    onStart: function() {
    }
});

and HTML:

<input id="start-date-picker" name="start-date-picker" class="form-control" type="text" value="Start date">

The HTML is posted back to the server in a form, which is used to filter a search criteria. If the user does not actually invoke and select a date with the datepicker, a value of today's today in the 'yyyy/mm/dd' format is being sent to the form, rather than the default value of "Start date". If it is not actually invoked, I don't want to filter my search results by date, but I have no way of distinguishing between the user selecting today's date and the user leaving the date empty and having today's date automatically returned.

How can I determine on form post whether or not the date picker was invoked?

pickadate.js-3.5.3 converting string date to correct format for mysql DATE

I understand very little about javascript/jquery and am trying to pass the date using the pickadate.js-3.5.3 using html/php/mysql i need to take the user inputed date from pickadate.js-3.5.3 date function and convert it into a format subtible for the DATE data type in MYSQL

This is the code i have so far;

<p id="datepairExample">Date:<input class="fieldset__input js__datepicker" name="datepicker1" value="" type="text" placeholder="Date"> </p><br/>

   <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

   <script src="dt/js/legacy.js"></script>
    <script src="dt/js/picker.js"></script>
    <script src="dt/js/picker.date.js"></script>
    <script src="dt/js/picker.time.js"></script>
     <script>window.jQuery||document.write('<script src="pickadate.js-3.5.3/tests/jquery.2.0.0.js"><\/script>')</script>
    <script src="dt/demo.js"></script>

I have read the documents on how to do this, and have even tryed to copy and paste the code from the demo into my own page but with no luck! Any advice is welcome! Thanks

Pickadate Time Selector Disappears on Click on JQuery UI Dialog

If you open a time picker in a jQuery dialog using the classic theme and try to use the time picker scroll bar to move down the time list, the time list disappears.

You can see the issue here: http://jsfiddle.net/7c2z840a/7/

jQuery("#tmStart").pickatime({
    editable: true,
    format: 'h:i A',
    formatSubmit: 'HH:i',
    //hiddenSuffix: '_FORMATTED',
    interval: 15,
    min: [7,0],
    max: [21,0]
});

The problem appears in both Chrome and Firefox, but not in IE.

Anyone have any ideas as to why this is happening and how to fix it?

What's the right way to make pickadate play well with browserify?

I've been struggling and very frustrated because I can't find a way to make pickadate play well with browserify. I'm migrating a Backbone app from AMD but pickadate seems impossible to work with it. I must say that I began to use browserify recently so I'm not an expert but I could migrate the rest of my code without any major incident. Of course I'm open to receive some tips and references to master browserify :)

I have jquery and pickadate installed via npm and when trying to use pickadate I'm getting the classic error: undefined is not a function I used this way of requiring (note the use without assigning the require to a variable): require("jquery"); require("pickadate");

I saw this on an answer here at stackoverflow (Requiring pickadate.js with Browserify) but it doesn't work in my case.

Any help or reference about where to find help will be pretty much appreciated.

Triggering datepicker from function doesnt work

I use a pickadate.js plugin.

What i would like to do is to trigger a date container after checkbox is checked, but it somehow doesn't work. I assume it has to do something with out of the scope variables since it works just fine outside the checkbox event function.

Official documentation:

See here and also here

JS:

var pick = $('#chosen').pickadate({format:'dd.mm.yyyy'});
var picker = pick.pickadate('picker');
//picker.open();
// it works here

$(":checkbox").change(function() {
    if(this.checked) {

        picker.open();
        // it doesnt work here
        event.stopPropagation();

    console.log('checkbox triggers!');

    }
});

JSFIDDLE

add +1 for month indexing in pickadate

I want to disable all dates excepting from range of start_date and end_date for eg : date start from 26/05/2015 to 29/05/2015 so all the dates before start and after end get disable. For this I am using pickadate and pickadate month indexing start from zero.

$('.datepicker2').pickadate({
        format: 'dd/md/yyyy',
        selectMonths: true,
        selectYears: 25,
min: [$("#leave_start_date").val().split("/").map(Number).reverse()],
max: [$("#leave_end_date").val().split("/").map(Number).reverse()]
});

but it is not working. It disable all dates remaining current date. Please guide me how to solve this. I want to disable that dates only who is not coming in range of start_date and end_date values.